Web design – It ain’t what it used to be

I think every web designer can recall with horror sitting in design briefings meetings were mention of the words ‘clean’, ‘dynamic’ and ‘wow factor’ were as certain as death and taxes. Are those days over? Should they be? Are the days of ‘aesthetic only’ design being replaced with ‘experience driven’ design? If so, what are new design factors that inform web design?

While there are no great, all-encompassing secrets to building the perfect website, there are some tricks of the trade that can help you construct a website that is functional and well organized.

Here at TERMINALFOUR, we’ve decided to put together a shortlist of what we consider to be among the most important best practice approaches to consider when building any website.

1. Modular Content – One size doesn’t fit all‌

When it comes to web design, it’s pretty obvious that a one-size-fits-all approach just won't cut the mustard anymore. In the old days, most content was happy to live in a single column of text save for the odd image here and there. However, this idea of a single template and a page that fits all content is quite outmoded today.

This approach limits the developer to just one layout and also forces them to think about layout too early in the process. Designers’ workload increases significantly as many unique templates need to be created and that’s not taking into consideration any alterations that need to be performed later on.

A good example of this is WordPress. If you have ever used it, you’ll know how simple it is to set up. In fact, you can probably have your whole website set up in minutes but if you want to move the location of a certain piece of content, that’s where you will find yourself incredibly limited.

Modular content allows you to present content in a different location, order, structure or combination.

2. Semantic mark-up

Semantics refer to the implied meaning of a subject but what’s that got to do with web development? Semantic mark-up refers to using the correct tag to accurately describe the type of content that brings meaning and structure to a web page.

In very basic terms, semantic mark-up is that little extra push your computer needs to help it decide what to do with the information you have created.

Using semantic tags such as <section> gives you more scope, flexibility and authority when styling your content. The mark-up indicates how the content should be interpreted whether the interpreter is a browser, search engine, accessibility tool, the person you pass the project onto or even yourself 12 months down the line.

Ensuring your mark-up has an accurate and actionable meaning can bring a wealth of benefits to your project.

3. Mobile first (not second)

We’re all familiar with the concept of designing a website primarily for desktop users. However, as the technical capabilities of mobile devices began increasing so too did the number of web users who began to abandon the desktop ship. Despite the increasing loyalty to mobile web use, mobile web design has been an afterthought or at best a side note. Developers are still paring down the desktop version to suit the needs of a mobile audience. This is slowly changing however and many are now considering flipping this around and beginning with a mobile design.

Think about it, there are over 2.1 billion global mobile web users (Courtesy of mobithinking.com). In the US 25% of mobile web users are mobile only. That means that 25% of US users will only ever see the mobile version of a website.

While none of this information is particularly jarring it does bring into sharper focus the true sway that a well designed mobile site can have. Sure, desktop is still a main focus but it should no longer be the only focus.

Why start with mobile?

If you’re not already sold on the idea of mobile first, you may be asking yourself, what’s the difference? Does it really matter which site I design first?

Try, thinking of it this way, by choosing mobile first you are choosing to only include the most vital information, anything else is just an added bonus. Instead of having to decide what to cut you can now decide what to add to make your site even more persuasive. Also, by designing your mobile site first you also have the added benefit of having smaller images and smaller page sizes that load faster and are easier to navigate. These are benefits that your mobile users will see first and foremost, but your desktop users will also enjoy the benefits of pages loading quickly and important content being placed exactly where the user needs it. Mobile first design forces you to make these decisions early in the process and ultimately creates a better experience for all your users.

4. Content choreography- Nobody puts great content in a corner‌

Now that you’ve composed yourself after that questionable Dirty Dancing reference, it’s time to learn the basic steps of content choreography.

Content choreography or source ordering refers to maintaining the hierarchy of elements on a page after the screen has been resized and reflowed. As a layout changes from a desktop to a tablet to a smartphone, the number of columns is reduced from three or four down to one.

While there are ways this can be avoided, such as using CSS flexible boxes (Flexbox), the simplest way to avoid your great content getting lost is simply to design your mobile site first. Front-end frameworks like Twitter bootstrap and Foundation are great tools to help you do this. It's a heck of a lot easier to pre-empt this problem than it is to solve it at a later date. Starting with mobile means that all the great content you want to give top billing to doesn't get constrained by how they're ordered in the source code of your desktop site.

This isn’t an exhaustive list but it should give you some food-for-thought about the latest best practice approaches that have largely been developed as a response to the mobile web market. Web development needs to go beyond desktop and developers need to begin to view building mobile sites as being the first step in every project as opposed to a bonus step at the end.