We live in a day and age when users are becoming more and more mobile focused with a growing trend in users preferring mobile as opposed to desktop. As website owners, designers and developers, we need to be aware of this growing trend and cater to these needs. By not having a responsive website you are possible alienating your users which negatively impacts your business.
“Responsive Web Design” is essentially the good practice of making your website restructure and cater to every screen size and device. For example, your device would display nicely on mobile and give users a seamless experience, in which they are able to find the information and complete the action they are trying to do on the website. The same website would automatically change to a different layout and structure when displayed on a different device, such as tablet or desktop.
As the world is fighting for attention in an era of short form content, it is becoming more and more vital for brands to be legible on mobile devices. In this article I will explore ways in which we can cater to this need and the impact this has on your users and brand.
What is responsive web design?
When a website is designed properly, and developed well, a website will be presentable and usable across every device and browser. If attention to detail is important to you, catering to every pixel is also on the cards. Think of your website like an accordion, as in the instrument. If that website were to increase and decrease in width, would your text, images, decorations and other content move dynamically and cleanly without appearing broken? If yes, your website is responsive.
Responsive design takes the traditional approach to web design and throws it out the window – instead of designing seperate versions of a site for desktop, tablet mobile and beyond, we design a single website to automatically adapt to the screen size and orientation of any device.
Why responsive web design is important
At a fundamental level, the importance of responsive design comes down to brand image and business – you want your users to be impressed by your website, or more specifically, NOT annoyed. It has been proven that even a single negative experience on a website can drastically, negatively impact your brand image which results in less sales.
You want your website to provide a seamless and user friendly experience across all devices and ensuring your website is responsive will ensure that users are more likely to spend more time on the website, improving SEO and the chance of engaging with your brand or even making a sale.
Benefits of responsive websites
By preventing any hinderance and ensuring a seamless experience, you are more likely to retain users on a website, which will improve overall SEO. Google will look at this trend in retention and give you a big thumbs up, which will in turn list you higher on google and get you in front of more eyeballs to look at your website.
Another benefit comes down to time and cost effectiveness – if you were to take a more traditional approach and build individual websites for each device, you would have to maintain each of these websites individually – whereas when you build a responsive site, you only need to maintain one website.
Some other examples of benefits include faster load times, improved accessibility and improved user experience – get in touch if you want to go into more detail into these topics ^.^
Examples of responsive web design in action
I can’t think of a better place to start than our own case studies – take a look at our “Work” page where we show off some of our recent websites we have built and try to change the window width of the website – you will notice that the website will reformat and shuffle the content around to fit with the new window width.
How to implement responsive web design
There are many ways to implement a good responsive design strategy, but the most practical and best practice approach that we use is a mobile first strategy. We use set breakpoints going from mobile up to tell the website to reformat in different ways.
Every website should consist of what is known as a “HTML” markup – the skeleton of a website – and the “CSS” styling – the presentation. We use CSS to tell the HTML how to display and make it look great. In CSS we have these things called Media Queries which essentially say “At this pixel width and above (or below if you do desktop first) do this”. We can use this to our advantage to restructure the content of a page at different breakpoints (i.e. 340px, 400px, 640px, 768px, 1024px, 1280px, 1536px and above are our standard). For example we could say at 1024px wide, change from a vertical flexbox to a horizontal grid layout to structure text and images.
How we can help
At Mintyy we care about your brand and the way you present yourself. We are all perfectionists and strive for the highest level of detail, ensuring your website is catered to every device, browser and breakpoint so that users don’t get caught up fumbling over your website layout.
If you’re interested in chatting to learn more about us, our work or the topics covered in this article, don’t hesitate to reach out.
If you’re interested in starting a project with us please get in touch and we can help you take your website to the next level.
