Many people start out by thinking of webpage design as an extension of printed media. That’s a good way to begin, since many of the rules of thumb that apply to print layouts also apply to publishing on the web. But webpages also involve an interactive element, as users explore around your site in their own way, accessing material in an order that suits them. To get and hold somebody’s attention with print media, it needs to be visually appealing. Web content should also be visually appealing for maximum impact, but it also needs to be convenient and comfortable to browse. In many cases, a tedious website that is slow, hard to navigate, or just plain irritating, will have your users clicking away somewhere else in no time, even if it looks nice, and the material is otherwise good.

Modern web standards place a lot of power into the hands of the designer. We can do just about anything, including creating dazzling layouts that flex and re-arrange themselves, even change color or switch to three dimensions all because the user resized their browser window or turned their phone from a vertical orientation to a horizontal one.

However, with all of this power at our disposal, it’s important to maintain a degree of consistency between the styles you create for different devices, and not to leave the user confused and frustrated by completely changing the website experience at every opportunity.

There is one huge difference between designing content to publish on-line as a webpage, and just about every other medium, including other multimedia formats. Web page content should not be designed to fit to any particular size, shape, or quality of display, rather it should be designed so that the web browser displaying it can lay the content out in such a way as to make best use of the display it is connected to.

This is an absolutely fundamental aspect to webpage design. With this concept in mind, design becomes so much easier. Yet amazingly many developers insist on fighting against it, and trying to shoe-horn material into a fixed design. Don’t fall into this trap!

Lets look at an example. If we were designing an advertisement for a newspaper or magazine, we might use the shape and dimensions of a sheet of A4 paper. We can decide exactly how big we want each part of the advert to be, and where to place them, just by measuring distances across from the edges of the paper.

Simply stretching the dimensions of our original design to a different shape of paper, just looks silly.

With printed material, you might have to consider two or maybe three layouts, such as a single page, a two-page spread, and so on. With a website, you need to consider that screens come in all sorts of shapes, sizes, and resolutions, and furthermore that viewing distances and angles also vary depending on the environment of the user. In other words, you need to consider a continual spectrum of possible output constraints, and not think of terms of specific discrete devices.

When mobile web browsing first became a thing, many websites were designed in two distinct versions, desktop and mobile.

But it’s not practical or efficient to expand this concept and design separate versions of a website for the multitude of devices that exist today.

Webpages can now be viewed on devices ranging from tiny smart watches, right through to large projection systems for business conferences. You simply can’t tell who might be interested in visiting your pages, for what reason, or on what device.

Yes, that does mean that you potentially need to design for smart watches, phones, tablets, laptops, desktops, televisions, and projectors. Some of these displays might not even be rectangular, but round or in fact any other shape imaginable. Don’t forget that many web users are using assistive technology, too, including screen-readers that read your text out aloud. And of course, somebody might decide to print out one or more of your pages too, so there we have yet another format to consider. Oh, and did we mention E-readers?

If you choose to ignore one or more of these segments, you’re just excluding part of your potential audience.

The key take-away here is that browsing the web isn’t limited to desktop and mobile anymore. Many other devices exist, and need to be considered. In fact the boundaries are increasing on a daily basis. We’re not designing web content for three-dimensional holographic headsets quite yet, but just remember that as little as ten years ago, browsing the web on your watch was seen as futuristic and something limited to enthusiasts with money to throw away. Nowadays, it’s accessible to just about anyone.

The upshot of all this is that you really can’t expect any success with designing interoperable pages, unless you do embrace responsive design.

Creating responsive webpages allows the web browser to do much of the work for us. We can define a kind of continuous flow from small screens to large screens, and then leave the browser to pick the exact rendering details based not only on the user’s device, but also how it’s configured with the user’s own settings and preferences. A user might want large text on a desktop screen, but might equally not want the ‘mobile’ page navigation.

Before the CSS standards that allowed responsive design to became a possibility were sufficiently deployed, a hideous and most un-user-friendly way to make a website somewhat usable on a variety of displays enjoyed a lot of popularity. This technique is to force the layout into the same fixed width on every device, and it is so awful that it’s difficult to say anything good about it at all. It has sadly persisted for many years after better alternatives became available, and still doesn’t show any signs of going away.

This is a cheap and not-so-cheerful, bodged-up mess of a way to ensure that the layout remains under the strict control of the webpage developer when viewed on a different display to the one they used to design it in the first place. Don’t do this. Please, just don’t design a new website like this.

It does, in most cases, avoid the complete breakage of the site when viewed on a variety of displays, but it does this at a huge cost to user-friendliness, and leaves a lot of users frustrated with un-necessary scrolling, hurting interaction and potentially reducing customer interest and attention span. Fixed width designs allow you to present a common image across various viewing platforms, but rather than being a strength, this is actually it’s key weakness, as you’re usually not making use of anywhere near the full area display the user has available.

Attempts to cover up the empty space at the sides, with a picture, pattern, or color gradient are common, but completely fruitless. It’s still wasted space, that isn’t being used to display the main website content. It’s just used to display a superfluous background.

What an improvement! There is no wasted space!

The logo stays in the top-left corner of the screen with a constant size, but the text and other website content re-flows to fit the width of the browser window, and when it’s enlarged, the font size is increased. Even if you thought that the fixed-width column example above was passable and, “not that bad”, it’s easy to see how even a simple responsive design gives users a better experience. It also just looks more professional.

Observant readers will also notice that the margins for the body text have increased slightly in the larger window layouts. Space around elements helps to avoid a confusing jumble, but on smaller screen sizes space is at a premium and we can’t afford this luxury. For this reason, this aspect of our layout is designed to adjust accordingly. In other words, it’s responsive. But the margin remains small overall, whatever the size of the display.

Whereas the fixed-width style we've just looked at is quite possibly the oldest and most classic example of bad webpage design, designing for specific devices is a relatively more recent issue. It's made worse by the fact that these pages often look reasonable on first use, and they use the same CSS features as properly designed and genuinely responsive pages. Unfortunately, they use these features in a very mis-guided way, that is liable to break on new or unusual devices, and can easily create an additional maintenance burden.

What we're usually talking about here, is designers trying to create a set of media-queries that will each match a specific device - brand and model of mobile phone, or a specific desktop browser configuration - and then using those to ensure that the page layout looks exactly as desired on those specific devices.

Whilst this might seem like a reasonable approach, or even desireable if your target audience is known to be using one of a few specific devices, there are several problems with this way of using CSS.

The main issue is probably going to be that any device that wasn't explicitly considered during the development of the site will either match none of the profiles or one that wasn't designed for it. Realising that a simple browser or firmware upgrade can change the characteristics of a device, we can see that even devices that were considered during development might change at a later date. So here we have immediately created an administrative burden keeping the site up to date.

In the early days of responsive design, it was common to use CSS media-queries to create an alternative style for screens below a certain width measured in pixels, which usually targeted mobile devices in a portrait orientation. This worked surprisingly well, and more adventurous projects might have catered for a variety of screen sizes, perhaps with an intermediate style for tablets and phones in landscape orientation.

This isn't exactly bad design, so admittedly we're getting a bit picky here. However, CSS has evolved, and there is now good browser support for more advanced features that in some cases allow us to create better alternatives to the 'discrete classes of device' approach, at least in some aspects of the pages.

The concept is best explained by example. Consider the case where we want some content to be displayed in a boxout that is 60% of the containing element, for emphasis. This looks good on larger displays such as desktop monitors, but causes the text to be rendered in a thin column on narrower displays such as a small-screen mobile browser in portrait orientation. On these smaller displays, we might previously have used a media query to set the width to 80% when the display width is less than about 600 pixels.

This works, and achieves the desired effect on any specific display size. However, it causes an unsightly 'jump' from 60% to 80% when a user interactively re-sizes a desktop browser window. What would be better would be if the element resized smoothly between a width of 60% and 80%.

The following example demonstrates this concept visually. Resize your browser window to see it in action, and watch for the third bar taking on an intermediate width between the two markers, whereas the second bar is always exactly equal to one of them.

To take a real-world example, for a long time we had a media-query in our own CSS enlarging the base font size from 1em to 1.3em on displays wider than 1200 pixels. This worked well, and the visual effect at each size looked fine on all of the browsers and devices tht we've ever tested the site against.

However, it did mean that resizing a browser window by just one pixel, from 1199 pixels to 1200 pixels wide, would result in almost all of the page elements moving considerably, and the new layout 'snapping' into place. Clearly, what would be better would be to have the base font size transition from 1em to 1.3em over a small band of screen sizes. So perhaps we might have a continuous scale between 1em and 1.3em between display widths of 1000 and 1200 pixels, in other words at 1100 pixels wide, the base font size would be 1.15em.

This is a fairly small detail, and in many cases it doesn't really matter. No great site design is likely to be ruined by ignoring this point. And in fact good browser support for the CSS that we need to do this well didn't really arrive until about 2020 anyway. Nevertheless, new designs can certainly benefit from it.

To get an idea of what is possible with responsive design, let’s look at the home page of Exotic Silicon's research department, which is of course fully responsive.

The alternative layouts for different screen sizes and resolutions make the site comfortable to use on just about any display. The overall appearance of the page doesn’t change very much, so users are not left confused, and a consistent style and branding is evident. Usage of available screen space is maximized, and scrolling is minimised for most users, whilst at the same time providing large, accessible links for those using touch-screen mobile devices.

By creating responsive layouts, we are able to maximise user interest and engagement with the site by tailoring the experience to be as immersing as possible for the individual, based on their browsing environment. We can do all of this automatically, in a way that is transparent to the user, and yet still keep the look and feel of the website consistent across desktop, tablet and mobile platforms.

One of the keys to successful webpage design is to resist the temptation to think in terms of a definite, fixed layout. Webpages are primarily intended to define a document in terms of it’s structure, such as paragraphs, inline graphics, tables and so on. Only once the structure of the document has been defined like this should we add style to it in a way that is then flexible to the user’s environment.

If you're new to webpage design, a good way to start thinking in this way is to assume that the user will be comfortable reading text at their web browser’s configured font size, and scale images relative to this. Alternatively, base layouts on proportions of the screen size - for example a menu that is three quarters of the screen width for large displays, but covers 90% of the display on a tablet or phone screen.

Designing whole layouts in terms of absolute pixel sizes in the way you might do for a multimedia presentation, just doesn’t work well for web content, because few users will be looking at it on a display that bares any resemblance to the one that was used to design it.

In a very few limited situations, pixel-level control can be genuinely advantageous. One common example of this is overlaying text on an image, where the text needs to line up with particular graphical elements. In the vast majority of these cases, scalable vector graphics, or SVG, can be used to gain the required control over relative element positioning whilst still allowing a good degree of responsive design.

In general, the use of pixel measurements for elements should be avoided in good design. The common exceptions to this are one and two pixel wide borders, single pixel offsets in text shadows, and other similar cases where an infinitessimally small mesaurement is desired. Pixel mesaurements also have their use in media queries, but be aware that real-world measurements in millimetres and centimetres can also be specified, and will be supported by the majority of modern devices that are aware of the physical pixel density of their displays.

Business websites often include an element of E-commerce, selling products and services directly on-line.

This is an excellent opportunity to present a professional image of your company, by making the on-line shopping experience so easy and convenient to use that customers actually prefer to order on-line rather than through traditional channels. Unfortunately, this opportunity is often completely missed by badly designed E-commerce sites that simply ignore the importance of user experience and make ordering on-line cumbersome.

First time visitors to any e-commerce site have every reason to be dubious. If they are frequent internet shoppers, it’s quite likely that they have experienced failed orders, incorrect charges, and poor support previously elsewhere. By making every part of the on-line process, from the initial product selection through to the checkout, logical and convenient to use, you can minimise the concerns that enter into the minds of new customers.

Information about shipping costs, delivery times and acceptable payment methods should be available up front, before users even start the actual ordering process. If you can’t give full information about shipping without knowing the details of the order, at least provide some guidelines.

Every step up until the final checkout should be possible without the need to create an account first. Creating an account on your website almost always involves providing personal information, even if it’s just an e-mail address. It’s somewhat uncourteous, even downright obnoxious, to oblige users to give personal information before they’ve even decided to place a final order with you.

Where possible, an on-line shopping cart should allow users to see the shipping costs and options change in real time as they add and remove items, without the need to start the checkout process. This makes it easy to check, for example, if an extra small item can be included in a larger order without adding additional shipping costs.

Presenting new information to the user at the final checkout stage should also be avoided. This includes advising users of non-acceptance of certain credit and debit cards, special delivery concerns, additional fees and taxes, as well as available discounts and loyalty schemes, just before they complete their purchase. Once presented with this information they might want or need to go back and change their order at the last minute, and this creates inconvenience.

Make users aware of all of the information they will need to hand in order to complete an order from the start of their browsing session. If they will need to create an account with you for the final checkout, or provide ID documents, let them know this right at the outset.

In the event of an error occurring after payment details have been entered, be sure to provide the user with a direct and immediate means of contact such as a phone number, so that they can find out what went wrong without delay. Never limit their contact options to just third-party social networking sites. Not everybody uses them, and trying to obligate them to do so is downright obnoxious.

Allow users to choose usernames and passwords fairly freely, and do not enforce overly cumbersome restrictions on the specific characters that users can or must enter. Do allow the use of upper and lower case characters, numbers and special characters, including foreign characters with accents.

Advising users on the strength of their chosen password is more user friendly than enforcing strict requirements. Placing excessive specific requirements on users’ chosen passwords such as a particular combination of upper and lower case characters, numbers, and special characters can be counter-productive. Some users, out of frustration, will just choose the shortest and simplest password that passes your strict guidelines when they could have used a much longer and more secure passphrase consisting of just letters. Other users, especially those who are infrequent visitors to your site, effectively won’t memorise their passwords at all. Instead they will rely on using the forgotten password function each and every time they login. That’s not particularly efficient, and whether you opt to actually send them a new password via e-mail or just a website link to reset it to one of their choosing, neither way is entirely secure as their e-mail is likely stored and accessible in plaintext at a third party ISP.

Requiring a password of a minimum length, and rejecting repeated characters or sequences such as 1111 or 1234 is obviously good practice, though.

If you have a policy that requires users to change their passwords at regular timed intervals, be sure to advise them in advance, or provide a grace time so that they can log in at least once before the password change is required.

Unless there is a very specific reason to do so, avoid asking users to enter details repeatedly for confirmation purposes. This is still a common practice in website forms requesting e-mail addresses, but it is a vestigial remnant of the early days of the web that should have disappeared many years ago. At that time, users may genuinely have been unfamiliar with typing e-mail addresses that contained various non-alphabetic characters, but this unfamiliarity doesn’t really exist anymore. Certainly, most internet users are going to be familiar enough with their own e-mail address that they are no more likely to mis-type it than they are any other piece of information. It makes no sense to insist on an e-mail address being typed twice any more than it does requiring a phone number to be entered twice.

The use of animated graphics in an attempt lessen the burden of excessive page loading time is bad design practice. If your internet-hosted content is taking long enough to load that a throbber seems like a good idea, then you almost certainly have performance issues elsewhere that could be corrected to make your pages load faster and remove the root cause of the problem.

With the deployment of ever faster internet connections comes the expectation that webpages will load more quickly. Unfortunately, increasing demands on the complexity of content, along with other technical factors such as connection latency, as well as bloated content caused by bad design, have all ensured that page loading time remains an issue to be considered.

We’ll cover the technical aspects of page loading times shortly, in the third section of this design studio. However, on a fast internet connection such as a good home or office broadband line, initial page loading times of under two seconds should usually be achievable. After the initial DNS lookups, and any essential re-directs such as from an http request to a secure one over https, it's completely realistic to be aiming for one-second page loading times. With the correct infrastructure and configuration, this is possible even on mobile clients and from locations that are geographically distant from your origin server. For applications running on private LAN based intranets, response times should be measured in fractions of a second.

If your pages are loading within this timeframe, a generic page loading graphic is superfluous and should be avoided. If it’s displayed long enough to be noticed, you’ve got problems with content delivery elsewhere that need to be fixed and not just covered up. Virtually all web browsers provide their own indication that content is being loaded, anyway, so at best you are just duplicating information that is already available.

The situation is slightly different when dealing with a page which performs a server-side action that is expected to take an unusually long time to complete. If there is a genuine risk that users might believe that the process has stalled, and be tempted to start it again by re-loading the page, then providing some active feedback to them during the waiting time may be useful.

However, in this case, it’s vital to avoid simply using a client-side animation, (typically an animated GIF), displayed at the beginning of the process, and then replaced when the task completes. This is extremely bad design practice that we strongly discourage. Many users will be led to believe that the animation of the graphic implies that the process is still actively on-going on the server, and progressing towards completion. In fact, in the case of a network or server-side error, it will typically continue animating on the user’s screen forever.

Spinners, throbbers or other hideous animations might seem harmless, but they carry a strong implication that a process is on-going at the remote end of the connection.

Webpages are one of the most interactive types of media in use today. By using techniques that build on this potential for interaction, and letting your users access with your content in new and interesting ways, you can create a more immersive experience. Your pages will be more interesting and more fun to use, and this encourges users to explore further, discovering new content.

Using artistic design techniques that don’t exist in other media is key to holding user interest in your website.

Browsing through content on a website is somewhat different to turning pages in a magazine, reading a book, or even selecting chapters of a DVD. In those cases the media is divided into pre-defined segments. The content as a whole has a specific intended order, and the visual presentation of each part of it is basically fixed.

In contrast to this, the content of a webpage can be scrolled one line at a time across a fixed background, elements of the page can move, change color, or disappear entirely when clicked, or tapped. You can even potentially implement an entire game to be played or environment to be experienced through a web-browser.

Don’t confuse this with response design that we covered earlier. With responsive design, we were more concerned with adapting our content to fit the technical characteristics of the user’s device, for example how text might be best re-flowed when the browser window is re-sized.

Here we are exploring how to make artistic use of the the user’s interactions with page elements.

Make full use of visual effects that are easy to implement on-line but difficult or costly in print media. Solid backgrounds can be replaced with gentle and subtle gradients, corners can be rounded, text can have outlines and drop-shadows. These techniques are not exclusive to the web media, but they are very easily implemented on-line, whereas in print media the costs might begin to get prohibitive for smaller businesses on a limited budget.

Subtle and non-intrusive animations are another nice touch to add to webpages. If you have an image with stars, make them twinkle! A whole multimedia markup language known as S.M.I.L. exists to create beautiful animations like these. It enjoys widespread support in modern browsers, and yet is massively underused on the web today.

Page elements that can be selected, such as links to be followed, usually indicate this is some way when the mouse pointer is hovered over them.

This visual effect can be softened and made to look more modern with a short animated transition, and we can even add a comic element to the transition by having the text color snap into place quickly, after a short delay.

From time to time, users will inevitably try to access pages that don’t exist. Even if you avoid moving content and creating broken links, it’s still possible for somebody to type an URL incorrectly, or for another website linking to you to place a link containing a typo.

Very often, websites retain the default “page not found” message displayed by the webserver, which is typically plain, boring, and lacks any of your company's branding.

In fact, error pages can be completely customised just like any other page of your website. At a minimum, a custom error page can include your company name and logo, and it can match the style of your other pages to appear more professional than the generic message from the webserver. Beyond this your custom error pages can also contain links to your home page, links to other relevant pages, a contact form, or anything else that might direct the user to useful content.

Accesses to the error page can be logged separately, or trigger e-mails to a website administrator in order to alert them to possible broken links.

We mentioned earlier, in the introduction to responsive design, that content shouldn’t be designed around a single fixed visual layout. Rather, it should be organised into logical units such as paragraphs of text, which are then mapped onto a presentation style based on the capabilities of the user’s device.

One of the big benefits of doing this from a creative point of view, is that it then becomes trivially easy to provide a choice of different layouts or ‘themes’, for users to choose from. You could even give your users the chance to view your entire website as if they are looking through the windows of a futuristic spaceship, and navigate your content by pressing buttons on the flight deck.

The Exotic Silicon website is currently available in ten themes, including light options, dark options, monochrome options and more.

Using high quality imaging on your website is important to maintain a perception of brand quality and professionalism.

However, most imagery on the web is more photographic in nature, and this is typically delivered with lossy image compression.

The trade-off between image quality and file size obviously directly impacts page loading times. Reducing the quality of the images obviously allows the content to load more quickly. As long as the difference in visual quality is not noticeable, user experience isn’t negatively affected, but as soon as too much compression is applied and the images even begin to appear ugly and distorted, problems quickly arise. Not only does this severely reduce the visual appeal of your website, but in some cases such as product photographs, you risk losing information altogether and preventing the user from seeing the details of the product that they are searching for. In a misguided attempt to shave a few milliseconds off of your page loading time, you might make it impossible for a user to find an answer to their question at via your website.

It’s critical to spend sufficient time finding the best balance or trade-off between quality and speed. This can be difficult and will often involve a degree of compromise. Many readers will be familiar with adjusting a single, “quality setting”, at the moment of saving images in jpeg format for the web, but may not be aware that there also exist a number of techniques beyond this to improve the trade-off, resulting in better visual quality for the same or even smaller file size.

When we create new graphic content for the Exotic Silicon website, we draw on years of experience gained from working in cases where extreme optimisation was necessary, (which was typically when the target audience was known to be using slow mobile connections). We use various advanced techniques such as manually optimising chroma sub-sampling and the parameters for progressive encoding depending on the exact nature of individual images. The difference is often very small, but can still give a worthwhile edge to the balance of quality and page loading time, improving overall user perception of the site.

Of course, these advanced techniques require knowledge and ability that not everybody has, however one very simple and frequently overlooked way to improve visual quality without increasing filesize is simply to ensure that you begin with the best quality images available. Lossy compression often performs better on higher quality source images than it does on low quality images. In simple terms, by starting with a high quality image, you can afford to throw away a lot of detail before the difference becomes noticeable, whereas with a low quality image it becomes necessary to compress as little as possible in order to retain the small amount of detail that still exists in it.

In almost all cases, if you ever want or need to re-compress graphical content that you are already using on your webpages, better quality for the same or smaller file size can be had simply by always ensuring that the new graphics are re-created from the original files.

One of the great advantages of publishing content on-line is the ability to update it and keep it fresh, frequently and on a regular basis. Not only are the costs involved usually minimal compared to publishing in any other medium, but it’s also usually faster and more convenient. In many cases, a website refresh can be done entirely in-house, entirely under your control, and entirely on your timescale. Users who see new and up to the minute content each time they visit are likely to visit more often, especially if they can only get that content from you.

However, just as important is the prompt removal of stale content. Content with less intrinsic value lowers the overall average quality of your website. This is easy to see if you simply rate your material on scale of zero to ten. Imagine that you have fifteen pages, ten of which are current and up to date, and worth a score of nine on the scale. The other five pages are now outdated, and perhaps only score six. The mean average score of any particular page on your website could be calculated as ((10 × 9) + (5 × 6)) ⁄ 15 = 8. So a website visitor looking at a random selection of your pages will, on average, be looking at material that you would rate as eight out of ten. Now imagine that you simply remove the five outdated pages. The average quality score of your ten remaining pages jumps to a simple 10 × 9 ⁄ 10 = 9. So now the same visitor will be looking at material with an average score of nine out of ten. Just by deleting garbage, you’ve improved the overall average quality of the remaining material.

Of course, this is an overly simplistic model of what is going on. We don’t take into account the fact that somebody searching for a particular piece of information about an old product, for example, would likely value a page containing the answer as ten, even if you consider it to be obsolete.

However, such concerns are absolutely not a good reason to simply keep old material hanging around for ever, ‘as-is’, unmaintained, and in it’s original form, just as it was first published. If think that your old material still has value, keep the factual content, but bring the presentation up to date. Make the material more accessible and easier to search, rather than letting it rot. If your old webpages include old, poorly scanned, or low-resolution images, especially any that have been over-compressed to boot, then check if you still have the original source materials. If you do, then re-create the web graphics at a higher quality. Wherever possible, re-create diagrams in vector graphics format rather than as bitmaps. Use modern HTML presentation techniques, and cross-link to more modern material that didn’t exist at the time of the original content, has either replaced or superceeded it, or might otherwise be of interest.