Website Design for Screens – How to Do It Effectively
1. Platform differences.
The most important aspect of website design to consider is the platform in which the web page will be accessed and displayed. Not so long ago, the term platform used to refer to the type of computer used. Nowadays it has expanded to include any device used to access a web page. For the purpose of our discussion, let's group the platforms into three basic categories:
· Computers;
· Tablets;
· Mobile phones.
Each of these categories has certain distinctions that must be taken into consideration. Most of them are related to the screen size.
Screen size
Identifying the target page size is one of the first tasks in website design. In the age of such varying platforms – from PC's and laptops to tablets and smart phones – you will likely need to design multiple page sizes. Most websites at the moment offer two main page sizes – traditional web and mobile. Different screen sizes can change the viewing of a single web page. The same website appears on three different platforms – computer, tablet and mobile phone, even if the same browser is used to display the content of the website in all devices.
When accessing a website on mobile phone, there is much less space to be used to display the content. It is much easier to read and navigate on mobile, however the content is not as immediately accessible. This is the compromise of making sites available to mobile users, the number of which is increasing rapidly. When doing so, the tiny available content area means that web designer must consider and decide what content mobile users will most likely wish to see. The other aspects of the site are still available to mobile users; they are just not the primary focus of the mobile site and are not immediately displayed on the screen.
In order to fully understand the differences between the screen sizes we need to mention how the viewport of each device works.
As we all know, on traditional PC the size of the browser window is independent of the screen size, which means you can shrink and expand the window as needed. However, it is impossible to increase the size of the window beyond the width of the monitor.
On many mobile devices, the viewport allows to view the section of the window at any given time. For example, if you're viewing website on your mobile device with the zooming enabled, you can zoom in to view a particular portion of the page. In such cases the browsers window is not restricted by the size of the viewable area.
There is a wide array of possible screen sizes. Consider the many common screen size available on the market today. Since the market is changing fast, the number of possible screen sizes is going to increase continuously.
How do web designers deal with the issue?
First of all, it is impossible for a web page to look perfect on every platform. The goal is to come up with the best way to ensure all the content is accessible to the widest audience of multi-media users. There are three main paths to follow:
1. Focus on one size and ignore the rest – of course we would advise against that. Unfortunately, there are some web developers that fall into this trap simply by not viewing their page on different platforms. You absolutely can not ignore that and you must consider a variety of platforms in your web design. This means testing your page on all devices. There are a lot of testing tools available online to help with the task.
2. Create multiple designs for the most common sizes – when designers aim to adapt their design to as many users as possible, one method commonly employed is to create multiple style sheets for each group of platforms.
3. Create flexible design that changes according to the screen size – This is the other common method of accommodating as many users as possible. The design shrinks and expends according to the size of viewing area. This type of design is often referred to as elastic or responsive. The flexibility is achieved by percentages for content area dimensions.
Navigation method
Navigation is another aspect that web designers must consider. The users of traditional systems usually work with mouse or / and keyboard. Therefore, most of the modern navigation systems are customized for this type of devices. As we know, there are also tablets and mobile phones with touch screen navigation. Users in each category navigate the web page by finger swifts and taps. This present another challenge for web designer as the navigation method must be easily accessible for human fingers working on small screens.
2. Browser differences
The second most obvious difference that must be considered is the browser. There are dozens of them available, all with their advantages and disadvantages. The best solution here, rather than pleasing everyone, is to design for the HTML specifications.
It is critical at the start of your design project to figure out which browsers most of your audience is using. It's important to do a bit of research and planning first. There are plenty of internet resources providing details which aspects of HTML5 and CSS3 are supported by each browser.
How to create accessible website?
Ensuring website accessibility to the widest possible group of users requires accommodating not only different platforms and browsers, but also people with disabilities. According to W3C web accessibility means that people with disabilities can perceive, understand, navigate, and interact with the web, and that they can contribute to the web. It would be very difficult to prepare the design for every possible scenario in which disabled person may access your website, certain steps can be taken in order to minimize any barriers preventing those users from accessing the content.
The Web Content Accessibility Guidelines:
Principle 1: Perceivable – Information and user interface components must be presentable to users in ways they can perceive.
1.1 Text alternative: Provide text alternatives for any non-text content so that it can be changed into large print, Braille, speech, symbols or simpler language.
1.2 Time-based media: Provide alternatives for time-based media.
1.3 Adaptable: Create content that can be presented in different ways without losing information or structure.
1.3 Distinguishable: make it easier for users to see and hear content including separating foreground from background.
Principle 2: Operable – User interface components and navigation must be operable.
2.1 Keyboard accessible: make all functionality available from keyboard.
2.2 Enough Time: Provide users enough time to read and use content.
2.3 Seizures: Do not design content a way that is known to cause seizures.
2.4 Navigable: Provide ways to help users navigate, find content, and determine where they are.
Principle 3: Understandable – Information and the operation of user interface may be understood.
3.1 Readable: Make text content readable and understandable.
3.2 Predictable: Make web pages appear and operate in predictable ways.
3.3 Input Assistance: Help users avoid and correct mistakes.
Principle 4: Robust – Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
4.1 Compatible: Maximize compatibility with current and future user agents, including assistive technologies.
There are some tools which help with the process:
– The W3C has set up a Web Accessibility Initiative to further this process;
– HTML5 Accessibility presents information about which HTML5 accessibility options are supported in modern browsers;
– WAVE is a web accessibility evaluation designed to help developers to determine possible barriers to accessibility in their sites. The tool is available for free and also as a Dreamweaver extension and a Firefox add-on.
– Total Validator is another tool that can be used test your site against the various W3C specification. It can be installed on your computer, or run through a Firefox add-on.
To sum up, try to follow the following practices when designing access to wide audience:
1. Use standard code, approved by the W3C.
2. Provide text-alternatives for images and multimedia conveying meaning.
3. Select styles that enhance your content but do not distract from it.
4. Choose a color palette is appropriate to your content, with enough contrast to be readable.
5. Use consistent navigation and branding.
6. Use descriptive, well-placed, and easily readable links.
7. Enable your content to be printed quickly and efficiently.
