The key elements of website design - #1 responsive & mobile friendly websites
As we mentioned in this article, all website design should start with the two key principles – a very clear purpose and a visitor-centric focus. These principles should be kept in mind throughout the design process.
The next thing to consider are the actual elements of the website itself and how to ensure that they fit together to give a great user experience. Website design is ever-evolving but some elements remain constant and are worth considering for the vast majority of projects. In these next series of articles, we will explore the 10 key elements of website design in turn starting with ensuring that your site works across a range of platforms.
#1: Responsive & mobile friendly design
Someone approaching their first design project may forget, or be unaware, that the website they are working hard to develop will be viewed on a range of devices (e.g. mobile phones, tablets, pc's). Each of these devices will have a different browser window screen size available to display the site and therefore the site design will need to change dynamically to be effective – this is what is meant by responsive design website design.
How is this achieved?
In very simplistic terms - websites use a file of code (called a Cascading Style Sheet or CSS) to control how content on a range of website pages is displayed (e.g. the CSS might specify how big the text should be for each paragraph included in a website). The CSS can also be used to control how the website should look on different screen sizes or viewports. Therefore as your width of your browser window changes, the CSS will automatically change/move the website elements to make them work more effectively on the new screen size. Using our example above, the CSS can use one text size for a paragraph viewed on a large browser screen width and a different text size when viewed on smaller screen width.
What should I focus on?
- If you are using a developer/development service (e.g. Online Practice Solutions) to build your site, ensure that the website they produce will be responsive. Ask up front about how the site will work on different browser screen sizes. They should be very comfortable discussing this with you and explaining how the design will change to accommodate the different viewports.
- It is highly likely that a significant proportion of your traffic will come from visitors using mobile phones, therefore you should consider how mobile visitors in particular will view your site.
- Test your website over a range of screen sizes and browsers (practically you should the test the most popular combinations of these) to ensure that it works for the vast majority of visitors.
-
Previous
-
Next
