Web Solutions Blog: The Anatomy of a Perfectly Optimized Website

Code, Mark-up & Load times

Using up to date mark-up

It’s one thing to make a website look beautiful, but underneath, the code needs to be beautiful too, therefore it is important to use up to date markup (HTML5 & CSS5) in order to adhere to W3C standards. A correct use of hierarchy & indentation is also.

Good code is usually indented, to clearly display hierarchy and intended relationships between parent-child elements. However, sometimes third-party plugins and bad developers produce messy code, for example:

Code arranged in this way is not only a nightmare for developers to read, it doesn’t clearly display hierarchies for quick and simple editing. Thankfully, there are a few programs on the web that address this issue and can transcribe your messy markup into clean code, like so:

Utilizing image compression

Page load speed is somewhat a big deal in the web-dev & SEO world – primarily for the fact that a slow loading website is arduous to the user experience; putting people off visiting & sharing your site, eventually impacting conversions.

Some sites have a lot of products or extremely high-resolution images that are very much required, but nonetheless are contributing to a slower page-load speed. Taking the necessary steps to employ image compression can help to combat slow page load.

Minifying code

Minifying code is another way to reduce page load times and improve the user experience. Some sites employ a lot of javascript and jquery to load and display elements on the page, however this increases the amount of data that must be sent and received. Minifying your code with a tool such as JSCompress is therefore recommended.

You can test your page load speed with Google’s helpful page speed insight tool.

Design & Content

Using a suitable layout

In a world where aesthetics rule the roost, a great layout is the bread and butter of any website. The arrangement of elements on the page is what (functionally) draws people in and generates sales, and (aesthetically) communicates the brand’s ethos and character through a visual medium.

Websites can take on a variety of layouts depending on their purpose or the device they’re being viewed on; from single-screen portfolio designs to modular & grid-based layouts and from liquid to responsive page elements. Let’s look at some examples in further detail:

Static

A static page layout responds to resizing exactly as you’d expect: by staying still. Static web pages are becoming increasingly less common now as designers move to build websites suitable for a variety of devices, but can still be useful. One might use a static website if building a desktop-specific website, keeping a separate website exclusively for mobile devices.

Adaptive

The adaptive layout utilises CSS media queries to detect the size of the browser window and adapt the page layout accordingly. However, since this method does not consider relative units, the code only changes the layout when a breakpoint is met and does not resize elements pixel by pixel.

Liquid

A liquid layout (also referred to as fluid or fluid width layout) uses relative units to resize the elements on the page, depending on the width of the browser. That is to say, the smaller the browser window gets, the page elements reduce their width accordingly.

Responsive

Responsive website layouts are fast becoming the most popular way for designers to tailor websites to a number of devices. By using a combination of relevant units and defining breakpoints using CSS media queries, the website will rearrange its elements in both an adaptive and liquid way – reducing width of elements pixel by pixel until it reaches a breakpoint, whereupon the elements will get rearranged to suit the display.

For a visual representation of these types of layout, check out these examples.

Well-defined navigation

Page hierarchy and navigation is one of the most essential components of a website – both in terms of user experience and good design. Many sites (including large e-commerce retailers and directories) may make use of multiple navigation menus – making the size, layout, position, and pages featured in the menu all contribute to the design and usability.

[This navigation bar from Expats.org.uk is definitely in need of some CSS love and currently isn’t contributing much to the user experience with the stock blue background on hover]

A well designed, well optimized website will ideally feature one main navigation bar underneath the header image, as well as a smaller navigation bar running across the very top of the page and/or a bar in the footer.

In the spirit of web design’s best practices, the main navigation will likely contain the site’s most important pages, including the blog, about & contact pages, while the top and footer navigation will contain the secondary navigational elements such as account features, search functions & social media links.

[The navigation on organic produce retailer Abelandcole.co.uk is designed with the user in mind – featuring a full-page drop down menu, contrasting colours and a second, smaller navigation menu at the top of the page for users to visit their account]

Carefully developed user experience

The user experience is of upmost importance to web developers and is usually fleshed out in context before the development starts. The ultimate end is to produce a product that users find easy to navigate, enjoy to use, and something that guides the user gently to a desired outcome (i.e. buying a product, signing up to a newsletter or sharing a blog post).

The task of developing and refining the user experience falls primarily to the UX designer and the UI designer. Both must work in tandem with the rest of the web development team to make the website as user-friendly as possible.

Engaging use of media

Rich media is an excellent communicator of information and can offer more of a context than a simple static image. The latest craze being to feature a full-screen background video across the homepage – perfect for giving clients an insight into your office culture or offering customers a behind the scenes glimpse into the inner workings of your company – before they’ve even scrolled or changed pages. Check out State Interactive & National Parks homepages – both great examples of video montage as a homepage background!

Provocative typography

Font and typography are essential features of a website and can go as far as to make or break a design. Great design aims to bring all elements together into one visually coherent and beautifully functional piece of web content – typography and all!

Take this web page, designed for legendary TV explorer Ed Stafford. The typography is bold and all caps promoting masculinity, complete with a scuffed texture to communicate the wildness of the content. The paragraph text is written in a typewriter-style font, likely imitating a journal entry style reminiscent of past explorers.

A perfectly optimised website not only takes the type of font into account, but also the colour, the size of each piece of text and the how much larger/smaller they get when the page is resized.

Call to Actions

Optimized landing page

Depending on the function of the website, a custom landing page may or may not be appropriate. Nonetheless, the homepage can be considered a landing page as it is the first page your user will land on when visiting the site and ultimately needs to be optimised for directing your users to a certain action.

The key to a perfect landing page is to keep it succinct. Landing pages exist to persuade users to complete 1 specific action, therefore it is essential to maintain your user’s attention with minimal content. Just check out Quicksprout’s homepage. Apart from a logo and some minimal navigation, the entire page is dedicated to funnelling users to sign up, whereby he can send marketing offers straight into their inbox.

Many designers go as far as to remove main-site navigation from the landing page, since giving the user as few choices as possible increases the chance of them converting. Think about it, you’ve likely spent lots of money directing users to your page through google ads, it’d be a shame for them to navigate away.

For loads of tips on landing page optimisation, check out this extensive post from Unbounce.

CTA design

Call to action buttons are a staple of the modern website – the essential step where users become customers and readers become email subscribers. Every one of these eventualities starts with the click of a button.

Naturally, the size, colour and shape of a button play a big part in how many times it gets clicked. Therefore, designers spend countless hours running split tests to ascertain which sizes, positions and colours are the best performing.

Size

The size of a CTA button is usually defined by where it sits on the page. For example, a sidebar button would likely be smaller than a centrally-located landing page button. Generally, though, designers make CTA buttons as large as possible without being overbearing.

Shape

The shape of a CTA button is often inherited from the other clickable elements on the page, In order to preserve continuity and offer the user a seamless experience. If, for instance the images on the page employ a round edged square shape, it’s prudent for the button to match the other elements on the page.

Similarly, if other buttons around the site perform a CSS animation, such as changing colour or performing an action on-hover, your CTA should follow suit to maintain continuity.

Colour

In terms of colour, you’ll want your button to stand out from the rest of your page – not blend in. This means using a colour generator (such as Adobe’s colour wheel) to find complimentary & compound colours that work well with your websites existing colour scheme.

Related: How to Use Color In Web Design

According to Quicksprout, Google tested over 50 colours to find the shade that converted the most visitors. While testing 50 colours of button is not practical for the layman, it shows the influence CTA colours have over conversions.

This post was written by Alex at Mob Is It – A platform enabling you to build and sell dedicated mobile websites & native apps, no coding knowledge required!

The post The Anatomy of a Perfectly Optimized Website appeared first on SpyreStudios.