There are now many designers offering Responsive Web Design Services such as myself, but if you are not a web designer or you are not involved in advancements in current web technologies, the concept of a website being responsive can be a little vague. For example, you could have a website designed with a ‘liquid layout’ but this is not necessarily a fully responsive website. Liquid layouts do adjust to different browser window sizes but they do not always adapt to different mobile devices such as providing alternative layouts for smartphones and tablets.
In my opinion (which is not a fact or without the possibility to change in the near future) a responsive website needs to include a number of things in order to be a truly responsive design.
These things include a website that:
Some designers now choose to design responsive websites using a ‘mobile first’ approach, so for these designers the alternative layouts mentioned above would be the desktop versions but I personally still prefer the desktop down to mobile approach. The most important thing is that on any of the devices a visitor is not getting a ‘lesser’ experience because of their chosen internet browsing device. That said, a larger display is usually going to provide a slightly better experience often caused not by screen size but by download considerations which need to be made for mobile layouts as high speed internet connections on mobile devices are not always available. For example a full screen image may be removed on a smartphone layout to ensure that the website is quickly accessible on mobile devices (a lower resolution image could be served to the mobile users instead but in some cases removing the image altogether can help to provide the best user experience).
My approach begins with a pen and paper so that I can quickly sketch out layouts to visually see how the page elements can be adapted for various screen sizes. In my opinion the best sites that I have designed are the ones where I have spent more time with a pen and sketch book than I have actually coding the layouts.
A site that is well designed on paper is also very easy to code as you are not changing your mind as you build the website.
When creating the CSS styles for your website, considerations do still need to be made though. For example it is important to remember that you will need to use percentages for widths rather than pixels so that your website will work as a fluid layout. I did find the idea of not using pixels so much quite uncomfortable at first as pixel values do allow for a very precise control over elements but with a responsive layout this control is far too rigid. Setting the widths of elements using percentages will provide a natural adjustment of your website to various screen sizes and will save a lot of time when compared to trying to adapt layouts that are held together with precise pixel based values.
There does come a point though on smaller screens where your percentage based layout begins to fail and will need adapting. These points are known as ‘breakpoints’. To resolve these issues CSS ‘Media Queries‘ are used to adapt or change the layout of a website for smaller screen sizes. Using media queries you can target different screen sizes in a number of ways as you can state both the minimum and maximum widths of a particular media query. This provides a very precise way to target the screen sizes that you wish to adjust the layout of your website for.
Another consideration that needs to be made is the navigation of a responsive website. For visitors using a desktop or laptop computer there is usually plenty of room for a website’s navigation menu but on mobile devices that use smaller screens an alternative navigation menu is often required. The navigation of a website is often one of the first considerations I make when sketching layouts as it is a foundational element to your website’s design.
So to summarise the main points in my view of what makes a website responsive is a well thought out website that is versatile and adapts to different screen sizes and devices. The website should also not only ‘work’ on mobile devices but also provide the user with an experience that is not perceived to be a ‘lesser’ experience.
© Copyright 2024 DigitalPod. All Rights Reserved. Terms | Privacy Policy