The Art of Building Better Websites

Original Source: https://inspiredm.com/art-building-better-websites/

Inspired Magazine
Inspired Magazine – creativity & inspiration daily

Creating websites has become almost a commonplace skill these days, and there’s such an overabundance of sites out there competing against yours that anything you can do to stand out from the crowd is going to be a huge help.

What can we do to get our sites noticed, admired, and paid attention to? It requires a certain adjustment of the way we think about site design. In this short article, we’ll take a look at some of the key things that are necessary to creating better websites.

Content must take priority

As designers we’re always going to be really keen to create amazing designs. Of course this doesn’t apply to those who merely call themselves designers, because they do not allow their very souls to weep onto the page, enshrining a moment of inspiration eternally in electronic glory.

What site owners want, of course, is for people to read their content, engage with it, and perhaps even buy something because of it. Pretty pictures are wonderful to have, but not if they’re getting in the way of the user being able to experience the content.

As this is the case, what we might regard as “stylistic enhancements” must certainly take a backseat to the main presentation. If you need to drop something, it should always be the stylistic element.

image courtesy of Studio–JQ

Responsive design is essential (except when it’s not)

Responsive design is so important these days because of the massive numbers of people using their phones for web browsing, and the fact that most phone browsers still do a lousy job of rendering web pages.

There are a few notable exceptions, but they are very rare. Such exceptions would be when something needs to be displayed on the page in order for the content to make sense, and where it needs to be of a set size. Some things simply wouldn’t work if scaled down too much.

Cases like this need to be handled carefully. How you would do it is to use a special responsive column that is displayed only when a screen size is detected which is too small to display the content, with a message instructing the user to view the content on a larger monitor.

This will generally be something you should avoid doing, but in exceptional circumstances it is acceptable as long as it is handled with tact.

illustration courtesy of sarika

Important content needs to be obvious

While it should be obvious, so frequently it doesn’t seem to be. Design should not make important things subtle. It must make what is important stand out and be seen by the viewer first, and yet so many designers try to be “creative” and subdue those important items.

Do not make this mistake. Users may not stay on the site for long, so getting the brand in front of their eyes is crucial. Even if they leave quickly, you’ve at least made an impression. Later when they encounter the brand, they’ll recognize it as familiar, and will be more likely to purchase from a familiar (i.e. “trusted”) brand.

What happens is a kind of cognitive self-trickery, where the conscious mind says “If I have heard of this, it must be good.” This is why companies are willing to spend millions of dollars just to get their logo on a sign at a sports event.

What else is important though? Well, the answer to that question depends on the kind of site you’re building. What you need to do is think about what you would be looking for if you were to visit this site. It’s usually very different to what a corporate honcho will say they want to show. The things people are going to be looking for are the important things to include and feature prominently.

Stylistic elements should blend in easily

Your design embellishments should make the viewer astonished in a good way. They should bring delight rather than annoyance. Quite often designers get carried away and add things to a page to generate the “wow factor” without making sure these things don’t have the potential to be annoying.

You also need to make sure that such embellishments degrade gracefully. When they can’t be displayed properly, they shouldn’t be displayed at all, and it should appear as though they never had been there.

gif courtesy of Tigran Manukyan

Layers to the rescue

You can add these embellishments through the use of layers. People creating responsive designs seem to have forgotten they have a 3D stack to work with, and as a result they’re missing the true potential of responsive design.

An example of how this works… Imagine you have a site where you have a layout with multiple breakpoints. The conventional way of thinking would have you putting everything on one layer, which will lead to crowding on smaller displays, forcing you to drop things, or (as is usually the case), exhibit a hideous design.

Those last two words should never go together when you’re talking about something you created. The good thing is that you actually can avoid the situation through the use of layers.

By stacking stylistic elements on a separate layer, you can hide or show them at your leisure, independently of the content layer, and both layers are fully responsive.

Suppose the user is viewing the site on a monitor with a resolution of 2560 x 1440. Our lower content layer spans the full width of the screen, but we can set margins on it that would place the content inside a decorative border that could be any size we want.

Placing that decorative border on the upper layer without margins, we can just set the width to be equal to the size of the margins on the lower layer.

As the user steps down through different screen breakpoints, the two layers can continue to work together like this, and the upper layer can even display entirely different borders for each breakpoint. Until on the final breakpoint we dismiss the upper layer entirely, just by setting it to be hidden.

The potential here is obvious. Do you have a large number of annoying link ads in the right column? You can hide them from users with small screens, and furthermore you can add them back on demand using jQuery.

Finally a way to properly separate content from design

This is the way web pages are supposed to work. By storing your “extras” on a completely separate layer, you get even greater separation of content from design, because that upper layer can be messed around with at any time without affecting the lower layer, and vice-versa.

Have fun experimenting with the freedom this opens up to you, so you can play around with all kinds of creative ideas while the content itself remains unaffected.

It is exactly the same concept as using virtual machines for sandboxing. No matter what you do, you can’t affect the page content because it is isolated from the decorative layer.

header image courtesy of Matt Carlson

This post The Art of Building Better Websites was written by Inspired Mag Team and first appearedon Inspired Magazine.