“Beautiful webpages created with years of real programming expertise”
Web page design studio - Part one: User-friendly visuals, and responsive design
Welcome to part one of our design studio.
Here we'll start by looking at some fundamental layout concepts and principles of responsive design.
Look and feel... Not just look!
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.
Essentially, good UI design involves designing thoughtful interfaces, and making the user’s interaction with your site convenient rather than making it simple. Most users can cope with complexity where necessary, but frustration is almost guaranteed to drive them away.
Company logo links to the homepage
Being creative, and doing something original is great. If anything, we probably need to see more diversity away from the same boring designs, not less. But there are some long-standing aspects of web-based user interfaces have become so commonplace and entrenched that not following the convention automatically causes confusion.
Most of these are easily incorporated into any new design, such as the tendancy for a company name or logo at the top of each page to form a link back to the home page. This allows users who have become lost on a sub-page, or who have found what they were originally looking for, to start over and browse other material with ease.
Another design consideration that might not be quite so obvious anymore, is that underlined words rendered in blue within a longer piece of text have traditionally been associated with hyperlinks to other pages. Using other visual effects for links is absolutely fine, and in most cases infinitely preferable, but deliberately including blue underlined text which doesn’t actually form part of a link will still seem unusual to many users, especially those with many years of browsing experience.
A few less obvious conventions are also worth observing. Ensuring that off-page links and links to large downloadable files are clearly marked is not necessary as such, but it is courteous. Selectable elements such as buttons and menu items should become selected in a logical order when navigated from the keyboard, such as top to bottom or left to right, rather than jumping backwards and forwards randomly. Finally, pages benefit from being laid out in a hierarchical sense such that where possible, shortening an URL by removing one or more path elements takes the user to an index of similar content.
Any small benefits that could be gained from deliberately breaking these conventions are usually outweighed by unfamiliarity that leaves users confused.
Since blue text is commonly associated with hyperlinks, using it for plain body text can cause a somewhat jolting user experience.
However, avoiding blue altogether reduces our palette of primary colors for text to just red and green, which can quickly become limiting when we want contrasting backgrounds, (which will often have an element of blue), and other interesting effects.
One way to work around this limitation is to use blue as a shadow color, either as a box shadow for larger elements, or as a text shadow. Text with a blue drop-shadow looks much less like an old-style link.
Notice that in this example we've also included a one-pixel white shadow to increase the contrast with the black body text.
Consistent layout between desktop and mobile
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.
Many if not most repeat visitors of your website will see both the desktop and mobile versions, as well as anything in-between. At best, a site that jumps between two or more completely unrelated layouts might be annoying, at worst it can cause confusion, and make it difficult to re-find material that you saw previously.
Mobile interface considerations
A big mistake when designing a webpage layout for mobile devices is to place most or all of the links underneath a single so-called, “hamburger”, menu at the top of the screen. This style often goes hand-in-hand with having the site consist of a small number of pages that require a large amount of vertical scrolling to actually view all of the content.This design may have become somewhat popular because it resembles an interface common in mobile ‘apps’. However, a website is quite obviously not a self-contained mobile applicaton, and there is an important distinction to make here.Additionally, this sort of generic design by a lazy designer is extremely un-creative, un-inspiring, and frankly quite boring. At best, creating a website with a user-interface like this is a lost opportunity to do something better. At worst, it can lead to a cluttered display with content partially obscured by the menu itself, which in extreme cases can make the site literally impossible to navigate for some users.
Beware: Hamburger menus
Collecting everything together under one menu is unorganised, cluttered and makes it more difficult for users to find what they are looking for
When open, the menu typically obscures a large amount of on-screen content
Excessive content on a fewer long pages greatly increases the need for vertical scrolling
When poorly implemented, some content may be unreachable, especially on small screens
Now that we’ve seen some examples of the importance of user-friendliness in webpage design, lets move on to how we can implement it with responsive design.
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!
“Web content has no, ‘natural’, display size or shape, and it should never be designed in such a way that tries to force a fixed layout onto the user.”
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.
Most likely we’ll put our logo at the top, and leave some space for text underneath. A logo 5cm high, with a 1cm border all around should look reasonable, and we’ll also place our contact details in the bottom corner, perhaps with a coupon for the reader to cut out. This still gives us plenty of space for text.
Defining layouts with fixed sizes like this works fine when you are dealing with a specific final product, such as a magazine page. You can even scale the design up or down to fit other paper sizes that are the same shape.
So far, so good. All of these layouts look reasonable, although the huge coupon would begin to look out of place once we enlarged the design to the size of a wall poster.
However our simple approach hits a problem even sooner, the moment we need to cater for a completely different shape of paper:
Simply stretching the dimensions of our original design to a different shape of paper, just looks silly.
Both the space for the logo, and the coupon are now extremely long and thin, whilst the vertical space for text has been reduced.
Clearly, in a situation like this, it would make more sense to create a new design for the wide page.
And this is exactly what we want to do when designing a website that might be viewed on any one of many different devices: a desktop monitor, a mobile phone, a tablet, even a television, conference room projector, or the tiny screen of a smart watch!
“When designing layouts for the web, we have to consider all possible screen sizes and shapes in a continual spectrum of possible output constraints and not think of terms of specific discrete devices.”
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.
The way to do this is with what is known as responsive layout or responsive design, which is basically where your design incorporates hints to help the web browser create an appropriate visual layout for your content, based on and adapted to the capabilities of the device it’s displaying on.
The importance of responsive design
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.
If all this sounds daunting, don’t worry. Done correctly, it’s actually far easier than designing for specific devices, and almost always gives better results.
Bad alternatives to responsive design
Don't copy these!
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.
This is the classic view of a fixed-width page on a typical desktop monitor.
The wasted space at the sides of larger screens not only looks awful, but also creates a frustrating experience for the user. Regardless of how they resize the browser window, they can effectively only view the content in a small window. Repeatedly scrolling up and down to view the entire page, whilst having a lot of unused display area on either side.
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.
Now let’s visualise how it could look if the designer followed our advice to make the pages responsive:
I’m a responsive website example. Take your inspiration from me - I’m beautiful and user-friendly, your professional image for the web!.
I’m a responsive website example. Take your inspiration from me - I’m beautiful and user-friendly, your professional image for the web!.
I’m a responsive website example. Take your inspiration from me - I’m beautiful and user-friendly, your professional image for the web!.
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.
This is a very basic example of responsive webpage design, but there is a lot more we can do.
Designing for specific devices
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.
The correct way to produce responsive designs is to consider device capabilities, such as screen dimensions, pixel density, aspect-ratio, orientation, and font size. Whilst we might not be able to future-proof our webpages against every single new development, in this way we can at least reduce the burden of adding rules for new devices on a regular basis, and ensure that the pages have a high chance of automatically rendering acceptably on the majority of new devices.
Try to avoid
Designing for discrete classes of device
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.
Desired width for small displays
Discrete sizing using media queries
Continuous sizing using CSS min and max
Desired width for large displays
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.
Our own code now scales the font based on a fractional multiple of the viewport width, and constrains the value between 1em and 1.3em. Some other aspects of the site still rely on discrete sizing, such as the switch between one, two, four, and six items per row on the main menu page.
The current trend seems to be towards taking this whole concept a step further, and eschewing even the major device classes such as ‘screen’ and ‘printer’, in favour of more fine-grained device capabilities.
Until recently, it was fairly safe to assume that most visual output devices would fall into one of these two broad categories, where screens could have their content updated, produced their own light, and worked with additive color, whereas content printed in ink couldn't be updated, absorbed ambient light, and worked with subtractive color.
This is now no longer true, with display devices entering the market which mimick many of the visual properites of paper, (such as being readble in ambient light), whilst still being updatable like a screen.
Traditionally, these devices might have been best served by the ‘print’ version of a web page. However, to take just one example, unlike a page printed in ink, such displays can update to allow horizontal scrolling of long lines.
Exploring responsive design
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 menu on our home page has a number of options, and on most large wide screens it displays them in rows of four or six.
In the four items per row style, the image for each menu item takes on the same aspect ratio as the overall viewport.
Smaller, lower resolution displays such as netbooks, tablets, and large mobile phones in their landscape orientation, display the home page with two columns of icons.
Notice how the left and right hand edges of the background are cropped to fit the more square display. It’s cropped intelligently, keeping the large tree near the middle of the image, rather than just cropping each side equally.
Finally, a very small display gets a single column layout. This would typically a mobile phone but might also a small browser window, or some tablets in portrait orientation.
Note the larger links for easy use on a touch-screen, and the fact that the background picture has again re-sized sensibly for the now vertical display.
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.
Compared to a single layout, or - even worse - a fixed width layout, this responsive design definitely improves usability and user engagement.
Responsive design summary
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.
Click or focus the image of the homepage background to see how it adjusts automatically and continuously to different display dimensions.
Click for a demo!
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.
Never force an element that could be dynamically sized to a fixed height out of laziness to fix a design that otherwise breaks. Fixed height elements containing text often break when the text wraps to a second line.
“One of the keys to successful webpage design is to resist the temptation to think in terms of a definite, fixed layout.”
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.
Many of the common faults that lower the user experience of e-commerce are simple and easy to avoid.
Usernames and passwords
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 long in at least once before the password change is required.
Ensure that links or temporary passwords sent by e-mail expire after a sensible timelimit, neither too long, but critically not too short either. Short validity times can be a source of extreme frustration for users with slow e-mail services, or those who are accessing their e-mail on another device from that which they are using to browse the web. Not everybody uses one of the large commercial webmail services! An example might be a user trying to reset their password during a browsing session on a public computer, and be receiving their e-mail on a smartphone. They need sufficient time to copy or even manually re-type any urls that you send by e-mail. An even better approach is to enforce a minimum time before the password-change link even becomes active. We’ll cover this issue in more detail in part three of the design studio, when we look at server-side considerations.
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.
In any case, many users will simply cut and paste their email address from one field to the other, along with any errors they may have made. Breaking from pointless internet traditions like this will show your users that your business has common sense and a forward-thinking approach.
Treating your users as if they are stupid
This kind of verification just isn’t necessary anymore. It might seem harmless, but it’s not. It's tedious for users and brings little or no benefit to you.
Page loading graphics
Fix the problem, don't hide it!
Reduce page loading time instead
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.
Note that this advice absolutely does not extend to a generic call to reduce the quality of your website images in an attempt to chase ever smaller page loading times by reducing their file sizes! Over-compressing images, especially to the point where useful information is lost, leads to a terrible user experience. If your content is slow to load overall, there could be many other factors involved. Don't automatically assume that image weight is the most important issue, even if reducing it does speed things up.
“The use of animated graphics as, ‘throbbers’, indicating that activity is taking place is strongly discouraged unless the updating of the graphic is actually tied to a client or server side process.”
Exceptions to the rule
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.
It's ticking, but is anything actually happening on the server?
If a client-side animation is used to indicate activity of an on-going server-side process, it should be ensured that the graphic actively reflects the current status of the process on the server. Ideally, if the process stops on the server, the client-side animation should freeze. Alternatively, a non-animated indication that the task may take some time to complete might be more appropriate.
Web-exclusive design techniques
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.
Visual effects need not even be limited to just two dimensions. If you’re feeling really creative, try parallax scrolling and animations in 3D to give your users a real surprise!
Layers, transparency and scrolling
By placing text on semi-transparent layered backgrounds and using contrasting drop-shadows, we can maintain it’s readability with adequate color schemes yet introduce a visually interesting effect as the user scrolls through a long document.
Click or focus here for a demonstration
EXAMPLE TEXT OVER AN IMAGE
EXAMPLE TEXT OVER AN IMAGE
EXAMPLE TEXT OVER AN IMAGE
EXAMPLE TEXT OVER AN IMAGE
Keeping text readable with transparent backgrounds
Graduated color backgrounds also create a sense of movement and ‘disolving’ from one color to the next when scrolled.This can be seen to good effect on our “real programming” pages, where the background changes from light to dark as the user scrolls downwards, simulating a sunset.
Creating a sunset effect with color gradients and transparency
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.
Transitions such as these improve the overall visual appeal of your pages considerably - yet when they are implemented with CSS, (or S.M.I.L.), they add almost no overhead to page loading and rendering times, and have good cross-browser compatibility.
Hover over me and I light up
Hover over me and I light up smoothly
Hover over me and I light up even more attractively
Hover over me and I light up even more attractively still
Creative custom error pages
404 Page not found
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.
Importantly, though, your 404 not found error page is an opportunity to be creative in an area where users are least expecting to see creativity. In this way you can surprise them, hold their interest, and present an image of an organisation with their finger on the pulse of IT.
Alternative website themes
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.
As well as being an opportunity to show come artistic flair, a selection of themes helps to make your website more comfortable to read in different ambient lighting conditions, encouraging readers to spend more time browsing your content.
By using a CSS media query directed at print devices, we can include a watermark or a copyright notice on any printed pages. Such marks don't need to be visible as part of the normal on-screen view in a web browser.
In this way, if users print your content and circulate it to other people, everybody can see where it originated from.
Of course, a separate stylesheet optimised for output on paper is an even better option.
High quality images
Using high quality imaging on your website is important to maintain a perception of brand quality and professionalism.
Drawn content such as logos and diagrams, that consists of outlines and solid blocks of color, can and absolutely should be presented as vector graphics, allowing small file sizes, fast loading times, and high visual quality free from compression artifacts even when scaled to large sizes.
If you are not already familiar with Synchronised Multimedia Integration Language, (S.M.I.L.), you’re missing out on an excellent, well supported and yet massively underutilised way to manipulate vector graphics and other media on your webpages. Whether you want to add a metallic glint to a caption, simulate the sun reflecting off of the corner of an image, or move text along a pre-defined path, S.M.I.L. is your friend.
We’ve looked at and tested other methods of creating such effects, and never found anything that’s as capable, elegant, or all-encompassing as S.M.I.L.
S.M.I.L. has so far survived a small but significant effort to depreciate it a few years ago, so don’t be discouraged from using it by rumour that it’s going away anytime soon. Here at Exotic Silicon, we’re happily creating new S.M.I.L. content in 2022.
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.
Take care in creating your photographic content for the web, too. Using even a low-end, consumer DSLR camera will almost certainly provide image quality far beyond that of any cameraphone, no matter how good you think that your cameraphone is. Use a tripod, and take care to light your subject adequately.
Update or remove stale content
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 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.
Caring for older material in this way helps to ensure a better user experience across your entire website.
Design studio summary so far
In this first section of the design studio guide, we’ve looked at some webpage layout fundamentals, introduced the concept of responsive design, looked at user interface considerations, and explored some artistic techniques that work particularly well on-line. We’ve also seen some pitfalls to avoid. Taken together, all this allows us to make the web media experience more engaging, with visually attractive designs, and in this way hold our visitor’s attention.
When you’re ready, let’s move on to part two where we will uncover some common technical mistakes that could be lurking un-noticed in your webpages right now, just waiting to bite unexpecting users.