Connect with us

Page Speed

5 Web Design Tips To Follow When Setting Up Your Site

Siobhan Lewis

Published

on

Responsive Design Layout Software Concept

When considering your site design, remember that content is king. Web design needs to be simple yet effective and should not distract from the content.

 

First impressions

Your visitors subconsciously form an impression of your website in just 50 milliseconds. Of these first impressions, 94% are design-related. It’s, therefore, the design that reels in your visitors (and good content that makes them stay).

You have just 50 milliseconds to impress your website visitors. Make the most of it. 

Think about what you want those first impressions to be. When a visitor snatches that first glimpse of your site, what do you want them to feel?

  • trust
  • impressed (by the site, by your work)
  • curiosity about you and your work
  • relaxed/excited/scared (whatever best suits your genre!)
  • all of the above

Once you know what impression you’d like to give via your web design (remember, we’re talking about that very first impression in those first 50 milliseconds), think about the colours and layout that may give rise to that.

You can then mock up some test pages (homepage or other) and run a user-testing session to see which is more successful or which users like the most. They may not even know why they like it. It can be enough to know that it’s the most subconsciously appealing to your target audience. This type of user testing could be done remotely using a mailing list if you have one.

 

Keep web design simple

Simple Web Design FormatAs already mentioned, it takes your visitors just 50 milliseconds to form an impression of your site. It, therefore, stands to reason that the simpler the design is, the easier it will be for your visitors to absorb it.

A quick online search for ‘award-winning websites’ will further highlight the fact that simplicity wins.

To keep your design simple, try these tips:

  • Use white/negative space. As mentioned earlier, this will keep your site looking ‘clean’ and give users the space to find what they’re looking for or to see what you’d like to highlight.
  • Remove redundant elements. You can pinpoint these in several ways, including the following:
  1. Try to look at your site through your visitors’ eyes. Which buttons, images, boxes, links are not of use or interest to them? If anything appears twice, remove one instance of it.
  2. Use a heat mapping tool, or a click tracker, to see where your users’ attention is drawn the least. Then decide if this is because the item is in the wrong place or if it can simply be removed.
  • Don’t include unnecessary, fancy elements, just because you can. A spinning image of your latest book may be the latest technological advance, but users will not thank you for it. These types f gimmicks can be distracting and annoying. They also add complexity to your site that gives it a higher chance of breaking. Avoid Flash elements, which won’t work on some devices, causing you to lose those visitors.

 

Similar…but different

The social psychologist, Robert Zajonc, once said, “The more familiar we are with something, the more we like it.” Ignoring that the opposite can also be true in other situations (“Familiarity breeds contempt”), let’s stick with Zajonc’s view for our web design purposes.

While there is a place for crazy innovation and radical colour schemes, this is a risky strategy when applied to most websites. In the past, all manner of backgrounds, fonts and layouts were available, but the web playground has since settled down to a more mature approach (in most professional arenas, at least).

If you want your visitors to feel at home on your site and to quickly find what they need, it is not a good idea to swim too hard against the tide when it comes to web design.

This doesn’t mean your site is doomed to be boring or look like every other author’s site, but it does mean certain conventions that your users will expect you to follow.

 

Use white space

White space doesn’t literally mean that the colour of the space on your page must be white. It refers to parts of your page where the background colour or background image show through.

White space = empty space, and it’s a good thing in web design circles.

Before the widespread use of mobiles and tablets, it was best practice to keep webpages short and to put crucial information above the fold (the point at which a user will have to start scrolling). This often led to cramped, busy designs, where a lot was going on in a small space.

Since the explosion of tablet and mobile web browsing, and the wider variety of screen sizes that came with it, people are far more used to vertical scrolling (although horizontal scrolling is still a massive no-no).

This trend towards scrolling gives you the freedom to use white space and to allow your content to breathe. If your visitors are faced with a page crammed with content vying for attention, they will be overwhelmed and not know what to choose.

 

Make it responsive

Responsive design is about making sure your site functions well and looks good across as many browsers, platforms and devices as possible.

This is increasingly a bigger and bigger deal. Google now favours sites that work on mobile over those that don’t. Responsive design spans other areas of the web, too, such as SEO. I know we could argue that many SEO elements are there to make sites accessible. All this stuff goes hand in glove!

Responsive Design And Web Devices

Responsive design and web devices

A quick reminder of terminology before we go any further:

  • Browser – the application you use to look at web pages, e.g. Google Chrome, Apple Safari, Mozilla Firefox, Microsoft Internet Explorer
  • Platform – this has a broad definition. For this article, it refers to the operating system used to access the internet, e.g. Linux, Microsoft Windows, macOS / iOS (Apple), Android
  • Device – the physical equipment used to access webpages, e.g. desktop/laptop, tablet, mobile

 

Mobile-first

This probably is the most important point: ensure your site works correctly on mobileWhy? Here are two massive reasons, amongst lots of little ones:

  • Mobile devices have the largest share of global web traffic (52%). This increases at a rate of 4% per year (probably even faster as the years pass).
  • Google uses any mobile version of a site as the primary version. Your desktop version will not get a look-in. Far better to ditch the separate mobile version and have one fully responsive version.

Enter your URL on the Google mobile test page to check if your website is mobile-friendly. If it says, your site is mobile-friendly, congratulations! However, it isn’t the end of the road, as pages may still not be displaying 100% correctly.

Nothing beats basic user testing – check your site on your own mobile. If your friends have a different handset to you, ask them to check too.

 

Know what your audiences are using

If you are tracking your site traffic, e.g. using Google Analytics, it is easy to find out the main browsers, devices and platforms that your visitors are using. These are the ones you need to concentrate on and ensure your site works with.

To find them in Google Analytics:

  1. In the menu, go to Audience > Technology
  2. You will see a list of browsers like this:
  3. If you click on a browser, you can see the browser versions being used.
  4. Now go to Mobile > Overview in the Analytics menu to see a breakdown by device (desktop, laptop, mobile, tablet).
  5. In the menu, select Devices to see an analysis of mobile devices.

 

This is juicy information you can use to improve your site. Use it to narrow down which browsers and devices to concentrate your testing on.

There are online tools to check your site across different browsers and devices. Some of these are free. Others offer a free trial period, after which you pay. Search on “cross-browser testing” to find one you like. Visit this article to check out one of the top website design tools used worldwide.

Continue Reading
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Trending