menu

Slabmedia

Thoughts & Articles

Ideas for our musician clients during this national COVID19 emergency

slab
Jim Infantino
image of a band performing in a rehearsal space

Photo credit: Harrison Haines from Pexels

Hi to all of our Slabmedia musician and performer clients,


We know that with the current COVID-19 emergency, touring may be harder than ever before, if not prohibitive. We wanted to share some solutions other musicians are using so you have some ideas about options.

Recently, the site I used for live streaming of Jim's Big Ego concerts, concertwindow has closed down but there are some other options for online concerts you should check out:


Your fans want to support you, even in hard times.
patreon.com is a good way to get subscribers that look for your new material. You can post individual songs, home shows, etc.

Two of our artists have made good use of this.
Ellis Paul
Catie Curtis

I have my own, less successful Patreon account patreon.com/jiminfantino - what I would share from my experience is that it's important to plan your tiers well, and make sure you keep adding new material for your fans to stream, read, view, or download.

Those are the ideas I have right now. It might also make sense to think about live outdoor shows when the weather gets better. Outdoor gatherings are risky, but less so. We shall see how that shakes out when the weather gets warmer.

We are wishing you all the best in this emergency. Alexander and I work in two remote offices, so we will be available to help you with your online presence.

best wishes,

Jim Infantino

Bug at Let’s Encrypt Secure Certificates caused problems for some, but not our clients.

slab
Jim Infantino
Beetle close up

Photo by Alan Emery on Unsplash

We are always on the lookout for issues that might affect our clients’ websites and we spotted this one yesterday that described a problem with Let’s Encrypt Certificates. Let’s Encrypt are in use with many of our clients’ websites so we checked in with our server company to be sure nothing would impact our sites.

The problem seems to be that for some users who were applying a single certificate to multiple websites. A breif summary of the above article is that LE was disabling some certificates which were applied to multiple domains for security reasons. None of our clients’ websites were affected thanks to the fact that we employ a superior host company: Pair.com for all of our services.

You can read the full article below:

Upcoming changes to Google Chrome's User Agent String handling

xander
Alexander
mashup of camera and chrome logo

Google recently announced plans to change a longstanding component of their Chrome web browser, the User Agent String, which is a fundamental feature of the browser used to announce to visited websites various information about the end user's browser and device configuration. Present in every major web browser, if not in every single web browser available as well as in non-browser software which connects to the internet, the User Agent String has been a persistent characteristic of internet enabled devices for most of Internet History. So, what is a User Agent String, and why does Google want to change it?

What Is a User Agent String (UAS)?

At its most fundamental, the UAS is a piece of text sent from the browser to an internet server in conjunction with a request for content. The UAS announces various information about the site visitor so that receiving computer can most effectively serve the request. Here is an example of a UAS:

Mozilla/5.0 (iPad; U; CPU OS 3_2_1 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Mobile/7B405

As you can see, various information about the type of device connecting to the server is sent in the UAS, including, according to Wikipedia, "Mozilla/[version] ([system and browser information]) [platform] ([platform details]) [extensions]."

For servers automatically reviewing the UAS, the information in these announcements has become very valuable. For example, when a server is able to recognize that a visitor is browsing from a Windows computer, it can supress messages related to Mac computers, to, say, show only software downloads that are compatible with the visitor's computer. Likewise, if a UAS indicates an older or non-compatible browser version, the server can display an error page or other upgrade instructions for the end user.

Why does Google want to change the UAS? In a word, privacy.

Google's plan is to freeze the UAS around September of 2020, such all Chrome browsers show the same UAS regardless of the device on which they're running. (With the exception that desktop and mobile browsers will still be differentiated). All other information will be standardized in the UAS such that further identification of browser version, operating system, and other details will be uniform. Why would they want to do this?

The move to essentially deprecate the UAS comes as part of Google's "Privacy Sandbox" initative. As you can already see, the existing UAS automatically gives the receiving server *lots* of information about the end user's browser and device configuration, and this information is being exploited to fingerprint individual end users and groups of users to track their web usage for advertising purposes. Google intends to replace the UAS with a new feature set called User Agent Client Hints, which yields much the same information as the traditional UAS but will allow for user customizations to the amount of data chosen to be shared. In essence, the new standard will allow for end users to block components of the UAS which are otherwise unblockable under the current scheme.

The proposed change would appear to be a win for end user privacy. Given that Google is an advertising company, there's an open question as to why it would want to limit user fingerprinting, which presumably would be useful for it to generate more targeted advertising. However, migrating the information provided by the UAS to a user-configurable set of options is a move in the right direction for privacy, regardless.

Graphic Design and CSS: Where WYSIWYG went wrong.

slab
Jim Infantino
Graphic Design and CSS Where WYSIWYG went wrong

Way back in the 1980s, some very nerdy graphic designers began to write their designs in code. John Warnock, one of the founders of Adobe Systems had developed a computer-generated, vector-based programming language called PostScript that became the underlying code of much of the design and typographic tools we take for granted today. This very interface still relies heavily on it. Almost every letter in every word you read uses it. Before there was any such thing as Illustrator or PageMaker or InDesign or web pages, there were designers writing code to make a mark on a page. To draw an arc on a page, a PostScript designer would write in a text document: “300 600 20 270 arc stroke” and then adjust the numbers to get the right result in the compiled output. Crazy, right?

I remember reading about this and thinking,

“That is way too much effort. I could never think about my design in code. Give me a pen or a brush and some paper. That form of design is going nowhere.”

Then, along came the graphic user interface. Now everyone who designs writes about arcs and strokes and fills and vector positions on a virtual canvas, only we use a mouse and a computer screen and let the robots do the calculations for us.

So, what is wrong with that? Courses in Design are taught specifically in branded programs like Adobe Illustrator or Photoshop with little to no reference to the underlying code that enabled the process. These programs have enabled us to create increasingly complex designs quicker than we could possibly achieve by hand-coding positions and shapes, and that is, by-in-large a good thing.

Along came the web page, and some designers and non-designers began to code again. This time, the language was HTML. HTML was created by a group of programmers and thinkers lead by Tim Berners-Lee at CERN. Unlike PostScript, it was not a proprietary system, but open to all to use, free of charge or license. It was meant to deliver linked information through a new idea called a browser. The first browsers were run in a terminal, not a graphical user interface (GUI) as we know now, but a stream of text. Design was not a factor, the sharing of linked information was the primary goal. When GUI browsers arrived in the 1990s, designers looked at the gray pages of Times New Roman on their screens and imagined the possibilities of something more exciting and engaging. Programming Designers, like those who had worked in PostScript developed CSS and Javascript and Web Design was born.

CSS stands for Cascading Style Sheets, and was developed by Håkon Wium Lie in 1994. Lie was also working at CERN with Berners-Lee. His idea was to take the structure of the HTML page; the underlying elements like body, h1 (for a headline), p (for a paragraph), img (for image reference), and div (for block elements) and give them design specifications like background-color, width, height, padding, margins, font-family, and more. Early web designers began to code or “script” these modifications to their dull looking, gray pages and things on the web got interesting.

One year later, Brendan Eich at Netscape released the first version of Javascript, based on the same ideas as Lie’s CSS and things got even more interesting. Programming Designers like Jeffrey Zeldman began using it to animate the elements on the page to create dynamic content that changed on the screen due to variables, some of which could be set by the page visitor. At this point, the web page became a living thing, radically set apart from the printed page.

A very limited number of designers adopted these methods. The creative interface was still a plain text editor, usually a terminal program, to write the HTML code, and script the CSS and Javascript to make it look and feel pleasing to the viewer. Companies like Apple and Adobe saw the opportunity and created WYSIWYG programs so that graphic designers could automatically generate the web code without touching it. That was a good thing too, wasn’t it? Yes, of course, it was and no, it wasn’t.

The trouble with web design today, is that each choice or fork in the process has exponential consequences. Modern web design is often reliant on templates and programs that make it easy to get started and generate a design that is balanced and pleasing. Content editors have drag and drop interfaces that allow for placement of elements with a gesture of a hand. The trouble arrives when a designer begins to think outside the parameters of the pre-defined GUI interface and discovers that they are blocked from making creative decisions by the template or program underlying the layout on the page.

When faced with the limitations of the interface, a non-coding designer has a choice:

  1. Start again with another template or platform that seems to better align with their vision
  2. Give up and let the client know that what they want simply cannot be done with the tools at hand
  3. Team up with a programmer that can shoehorn the elements into place with modifications to the constraining template or platform, adding cost to the project and complexity to changes down the road

None of these are good options.

What is needed to do this right is a designer who thinks in code. What kind of designer thinks in code?

Prior to the term being co-opted by the startup community, a Unicorn used to refer to a designer who was also a programmer. The belief was and is today, that the ability to design precludes the ability to write code and those who did both are as impossible to find as a mythical beast with a horn growing out of its forehead. People who have these talents are now sometimes referred to as hybrid designers for disambiguation.

For too long, the design curriculum has ignored code as an essential interface for creating graphic layouts. The focus has been on the WYSIWYG interface, rather than what it generates. All GUI interfaces for design have limitations in application. A page created in photoshop is, by its nature non-responsive to screen size. It lacks any accessibility elements. It ignores user-input. A website built with templates will always be limited to the parameters of that template, no matter how flexible it claims to be. A designer who wants to rise to the challenges of how layouts are presented on the web must have some understanding of the underlying elements of HTML and how to modify their appearance and behavior to create durable, compelling work.

I can sometimes find examples of educational courses that teach design with code. I hope this is a trend. It is not, as has been asserted, the job of two very different brains to write code and create beauty. One brain will do, so long as we begin thinking of design from the perspective of rules and behavior, rather than fixed elements on a page. The interface is radically different from those based on the ancient modes of paint, brush, line, and type. The interface is the code itself.

Designers still need to understand color, form, and typography, but the tool to create their work is the script they write, not the compiled output of a program created to mimic the methods of the past.

Great web designs are built from the ground up without compromise. Web designers paint on an ever-changing canvas governed by an evolving set of rules. Without a deep understanding of these rules and materials, work created with easy to use but constraining tools will always come up short.

Are you a coding designer? Drop me a line.

– Jim

Don't Get Trapped In A Box: The Pitfalls of Design by Template.

slab
Jim Infantino
Don039t Get Trapped In A Box The Pitfalls of Design by Template

There is a reason we recommend custom web design for our clients.

We have worked with templates extensively in WordPress, Squarespace, Shopify, and others and we know the actual ups and downs of a pre-formatted design for your online identity.

Yes. Templates have become more flexible.

The promise is you see in advertising lately is: “We offer thousands of professionally designed templates that are so flexible that you won't even know it's a template.”

So, you upload your logo, fill in the forms, select a template and bam! You are done. Sort of. Actually, you need to change some colors and backgrounds and reconfigure the width of some sections of your site. Then you need to check the mobile treatment, which may not be exactly what you want. So, you change what you can for that, and then... you are done. For now.

The problems arise a little down the road. You get feedback from your clients or other members of your team, and they want to see something a little different. So do you. So you go in and try to reconfigure something, and it doesn't work with the template you chose. So, maybe you need another template. You choose one that will work with the feedback you got and tweak it again to get it to look right. A month or two later, you want to feature some new content on your homepage, or show only excerpts on the first page of your blog and you find out that you can't do quite what you want with your new template.

Finally, you see another website, maybe a competitor's website, and it all looks vaguely familiar. That is because:

Web design is as much about structure and behavior as it is about design.

So you go back to the template and try to tweak it again to help your business stand apart from the other sites that use the same template, but you don't have the expertise and/or time to get the results you want. So you hire a professional company, like ours. They tell you:

“This is going to be a lot of work because we have to fight the pre-existing template. It just wasn't made to do what you want it to do, but there is another template that might work, or we can build you a custom template for more money.”

Does this sound familiar?

The truth is, templates are a quick and cheap route, and ultimately, you get what you pay for. They are not a substitute for professional design. They might be your new website version 1.0, but that version will need some work before you have a website that optimally showcases your brand.

Our process is different.

We do not start with a template. We start with a blank slate (or slab). We build out your site on top of a simple, basic and flexible framework that can be tweaked and customized to get the results you really need out - of - the - box.

We understand how websites change and evolve. We have decades of experience building websites and that means we can see into the future of your site and anticipate aggravators for your visitors and the true flexibility you need. Down the road, when you need to modify or re-envision your site, we are not limited by a pre-conceived idea and structure. We can redesign and rework from the ground up.

That is the difference of Slab.

Brought to you by the nerds here at Slabmedia. We are recognized as a Top Massachusetts Website Design Company on DesignRush.

Web Design: Why Simple is So Complex

slab
Jim Infantino
sample of simple design version 1
“I just want a simple design. Minimal, nothing fancy. Something that will grab the visitor, but with a clean look. Minimal text, because people don't read – lots of photos and video, but keep it simple.”

We often hear this request from prospective clients, and it makes sense to us. We are inundated with lots of new information all the time, and when we arrive at a site that feels simple and minimal, it is like a breath of fresh air.

So let's start with something truely minimal and simple.

When we start to design a site that is super minimal, we find that it lacks character. More importantly, it lacks branding. The most minimal site conveys the basic information that is on the page but it tends to fall flat. What is necessary is to not only provide a sense of spaciousness and clarity but also to the culture and uniqueness of your brand identity.

Your brand is not just your logo. The logo is part of the brand identity, and perhaps it is the supreme distillation of that identity, but it is not the whole thing. Your brand is a visual representation of your company or project’s total narrative. So, let's see that same simple design with a logo and see what happens.

So, now that we see the site in relation to the existing branding, we find that the overall look doesn't quite live in harmony with it. More than anything else, your website needs to be an eloquent expression of your brand, so we need to make sure the typeface and color scheme agrees with it.

Also, although the hamburger nav is, indeed a very simple way to show the site's navigation, it can often be too confusing, requiring the visitor to memorize what was in it the last time they clicked it and keeping the visitor from browsing around when they are on their desktop. On mobile, it is a necessary evil (if, it is at all evil) because of the limited real estate of phones, but on the desktop, you may want to provide a visual reminder of which section you are in and provide clues to where the visitor might click to find out more, without a click.

So, the next step in this fictional design process, we will choose new graphic imagery to fit better with the brand, and change the typeface for the header and the text. We will also open up the navigation so that visitors can get around better. This is not, in any sense the final step in the creation of our minimal design for this process, but will get us a little closer.

So, leaving the design there, for now, we might expect the client to argue for a header that is less tall, perhaps using only their logo mark, or having the tall header minimize when you scroll down. The overall look so far maintains the simplicity of design but incorporates some of the key elements of the brand.

Creating a simple, minimal design requires balancing many elements:

  • Whitespace balancing in multiple browser sizes
  • Harmonizing with the brand
  • Typeface style and weight choices
  • Placement of elements
  • Ability to grow the content without making the structure of the site too confusing.

There are also SEO concerns to consider.

  • Word count should be high. (Google likes pages with 1000 words!)
  • Titles should be to the point and align with key search terms targeted by the company.
  • Content should not be overly optimized for SEO (Google can tell when you are kissing up too much)
  • Images should have good alt-tags and image names.
  • Subsections should have clear, hierarchical sub navigation for content clarity.

When you think of consumer products that feel simple, reflect on the amount of work it took to get it to feel that way. Often these items feel simple because they are intuitive and pleasing to use, not because their design process was quick or easy.

So the path to a simple website is a complex one. The bad news is that simple is never simple. The good news is that a great designer can help you by creating a website that feels simple, minimal and unique. That’s our passion.