Living in an age where people are accessing the internet at home, at the office, on the bus, pretty much wherever they wish, it’s no surprise that the pressure is on to have a website that works across multiple devices.
As I write this, I’m wondering what you’re viewing this on. Is it your desktop computer, laptop, tablet or phone? Maybe this article is now six months old and you’re reading it on a device that wasn’t in existence at the time of writing? I wouldn’t be surprised! Hence the uprising and importance of responsive web design.
Responsive web design has become increasingly important since the popularity of tablets and smart phones took off. As designers and developers began experimenting with new methods and approaches, older websites were left behind, with frustrated visitors taking their interest and their business elsewhere.
At Clevercherry we see responsive design as a fundamental ingredient in creating the best site for our clients, as Awwwards firmly agree, claiming responsive design support to be the most important feature you can add to your website. Google added pressure recently by boosting search ratings for mobile friendly sites when searched for on a mobile device and penalising those that don’t.
For those of you who don’t know what responsive web design is, a responsive website has a layout that changes to suit the device it is being viewed on. Whether that’s taking a multi-column arrangement and reducing the amount of columns for smaller views, or increasing button sizes for easier use on smart phones, there are many factors involved. All are with the one aim of making the site look and function the best it can, whatever it is being accessed on. The more tech savvy amongst you might wish to look over Etham Marcotte’s well-received article written some years back, which delves a little deeper into the mechanics involved.
The development community has collectively invested hours upon hours experimenting with, testing, creating and enhancing tools to make web experiences better, such as grid layouts, responsive CSS platforms and countless other tools and guides. Many of these are open source and therefore available for all to use and contribute to, which helps deliver continual improvement for the responsive experience digital agencies can create.
In short, the basic goal of responsive web design is to deliver the right content in the right way for whatever device the visitor is using, it’s as simple as that really. But achieving that can often be a little more complex…
Planning, planning and more planning
The planning process needs to question the site visitor’s needs, combined with assessing the business objectives of the client and creating ways to marry these. Planning the layout dependent on a hierarchy of content importance is key to this, and often takes a lot of thought and research to determine how to best deliver the content to the visitor, regardless of how they are accessing the website. Previously we have even stripped this approach right back to using simple post-it notes for each element required for a page and organising these in order of importance to help determine layout rules and deliver the key content to the visitor of the site.
Layout and structure
It is crucial that thought and consideration is put into the layout of the site. Whether designing with a large desktop screen primarily in mind, or the opposite end of the spectrum being a smart phone, not every view will deliver the content in the same way.
Here at Clevercherry, we will often create wireframes, whether static or interactive, to structure the layout with various breakpoints determining how the layout will change. This helps us evaluate the structure as well as giving the client an insight into how their site will be arranged.
Delivering content
Content is key; that goes without saying. But not all content is right for all views of a site. Some content will be significant and add value to the visitor’s needs, but may also create unnecessary clutter and add page weight in certain smaller views. For example, integrating an interactive map could be great on a large screen desktop view, but may slow a site down or obstruct more valuable content on a smart phone.
Adding suitable functionality
It shouldn’t be presumed that smart phones have smaller views so should therefore always have less content. With around 42% of online use currently being on mobile or tablet devices, it is important to serve features to those visitors using smart phones, such as location detection for directions.
Thoughtful build
The build of the website is when all of the previous steps’ benefits come into play, as the logic behind each prior step brings together the design elements and planning stages. With our digital designers also being accomplished front-end developers, this ties in perfectly at Clevercherry, having a huge advantage using our knowledge of the build process when planning and designing sites. We then create fully functioning HTML builds, for the back-end developers to add CMS functionality, with these steps always having every member of the team working closely together to achieve our goals.
Testing is crucial
Once a project is in the development stage it becomes vitally important to test the site and its responsive behaviors. We will scrutinise the typography, making sure font sizes suit the device and fonts are rendering beautifully, ensuring links or buttons are always easily clickable even on the smallest of devices, checking images delivered are appropriate and fit the area they are contained within, along with a multitude of other checks, small and large.
At Clevercherry we will load up the site across many devices in the studio and ensure everything works flawlessly and achieves the desired experience. As new devices go to market so often, we need to future proof sites to a certain extent, so we do our very best to ensure content is delivered exactly as it should be, regardless of screen size, and not limited to specific devices or viewport sizes.
As you can see, responsive web design is a complex procedure and one that requires real thought and careful planning along with in-depth knowledge of how to create and develop these ideas to produce the best possible result. And luckily, us Cherries thrive on the challenge and pride ourselves on not only delivering the best for our clients, but also creating something beyond their expectations, creating the unexpected.
Return to blog
