If you’re building a new website for your business, responsive web design should be top of your priority list.
Some websites now report over half of their traffic is from mobile devices. Building a website that is optimised for a variety of screens and input controls is required.
Responsive web design is the only single solution that is able to cater for the hundreds of different mobiles, tablets and desktop computers available.
When building your responsive website there are many things you should consider to ensure a successful project.
Content has always been the most important thing, responsive web design reinforces this. Before any design work is carried out there is a lot of planning required. Layouts and pages adapt to different screen sizes. Sometimes layouts will have 1 column and other times, 3 columns, depending on the space available.
Content hierarchy ensures that the content is always in the correct place. This process should not consider the design, purely the order and priority of the content.
There are hundreds of different devices and screen sizes. Breakpoints should not be set for specific devices such as iPhone and iPad because of the huge number of devices which fit in-between. Setting breakpoints to certain devices means that many devices will have a poor responsive experience.
Breakpoints should instead be set were you feel your website starts to break or look weird. Start at the smallest size and work your way up. If you feel the layout could be improved, it is a good indication that a breakpoint is required. This method will ensure your website works on as many devices as possible.
Text makes up the majority of a web page so choosing the correct font is key for a successful website design. Web-safe fonts are those that are pre-installed on the majority of devices and computers. Examples of these fonts are Arial, Helvetica and Georgia. Often to differentiate from other websites we will introduce custom fonts that are not installed on peoples computers.
When choosing fonts, make sure to select ones that are optimised for screen. This means that the spacing of the letters have been specially designed for best legibility on screens. There is also a new breed of font that has been specifically designed for web use. These fonts aren’t visually different from screen optimised ones but are smaller in file size.
Fonts can soon add up so keeping an eye on the weights and variations is key. Each weight or variation (such as italic) is a separate font size which adds to your pages overhead. If each font is 20kb and you have a regular, italic and bold that is a total of 60kb on fonts alone.
Using hosted font services such as Google Fonts is often a good approach to take. Many sites use Google Fonts as their provider. Once a user has been served a font it will be cached so any future visits don’t require the font to be downloaded again. This also applies for other websites using Google Fonts. It means if you choose a popular font it is likely it will already be cached on the users computer.
Responsive web design isn’t just visual but also how people interact with the page. Depending on the device, people will interact using different techniques such as keyboard, mouse, touch and even using games console controllers. When building a responsive website we need to consider how elements on the page react to cater for these things.
An example of this is on devices using a mouse. We are able to use hover effects to invoke tooltips and information. On touch this is harder to achieve because hover is unavailable. We would need to consider a different method to invoke the same content.
In the past we’ve been able to make the assumption that peoples internet connection has continuously been getting faster. From when people used dial-up internet through to superfast broadband.
With the introduction of mobile networks, internet speed has never been so varied. It could be an extremely poor connection that rivals the dial-up speeds of 1995 to an extremely fast fibre network.
In the past few years there has been a new generation of device with high pixel density screens. Apple coined and use the term Retina Display to refer to displays with a pixel density such that individual pixels can not be distinguished from a normal viewing distance. Retina and Retina-like displays can now be found on most modern mobile phones and tablet devices.
These devices provide a very crisp experience, great for mobile devices with small screens. It improves legibility of fonts and images. Unfortunately because these screens are so good they can be unforgiving. Providing highly compressed images will often look very pixelated. Ensuring you have considered these devices and serving a higher quality image is key for an optimised browsing experience on these devices.
Presuming your know why someone is visiting a website is one of the biggest mistakes web designers have made in the past. Not everyone who is consuming content on a mobile device is on the move and looking for your address. Many (including myself) will use their phone to shop while watching TV in the living room.
Make sure that regardless of the screen size, input control or device that you provide all the content and core functionality of your website. There is nothing worse than visiting an eCommerce website on your mobile and being unable to purchase something. Or visiting a news website and only receiving a shortened text version of an article.
Building a website isn’t a quick process. It takes a lot of time and effort from copywriters, designers, developers, project managers and clients. It is a team effort.
You have to factor in changes. Specifications may change during the project, new ideas may appear when wireframing begins, the clients direction may entirely change mid-project. Predicting and embracing an agile development process can help ensure these changes are not painful.
Working collaboratively with the client, having regular meetings and discussing as much as possible will make sure everyone remains in the loop so there will be no big shock changes.
Testing your responsive website on lots of different devices, screen sizes and internet speeds ensures all your visitors will have an enjoyable experience.
Testing should be carried out throughout the project, not just at the end. Continuously testing and refining your work will ensure the website is lean and reliable.
To discuss your next responsive Magento website contact us.
Get the latest eCommerce news, reviews and expert advice in your inbox.