The Evolution of Responsive Design
The fact that I grew up during the beginning stages of the web makes me feel a little dated. I remember, way back in the day, when websites were designed exclusively for desktops only. Yet, seeing how far the industry has come in a relatively short amount of time makes my work in the web development industry today that much better.
As a designer, I find the evolution of websites and how industry practices are constantly changing and improving very intriguing.
THE CREATION OF M.DOT
Smartphones and tablets have revolutionized not only the way users interact with websites, but how they are designed. Once smartphones became more popular the m.dot site was created.
A m.dot site is a dedicated subdomain of a desktop website that is formatted specifically for mobile viewing. These subdomains grew in popularity and became an industry standard especially for large companies with an online presence.
DOWNFALLS OF M.DOT SITES
Although m.dot sites addressed certain issues with a mobile experience, they did not address all of the issues that came with smaller screen resolutions. Some of the downfalls that come with m.dot sites:
- Redirects the viewer to a different URL. M.dot sites are a separate entity from the desktop version.
- Slower initial load times.Due to being redirected to a completely different URL it can take longer to load a new set of assets.
- SEO compliance issues. Google does not like redirects plain and simple.
- Social sharing can become complicated. If you share a m.dot URL and someone opens it on a desktop they will still be directed to the mobile site.
A BETTER WAY
As of 2017, the average US person spends 87 hours per month navigating the internet on their smartphones. Users aren’t just browsing websites anymore either. Shopping online with smaller devices makes up over 50% of people buying products on eCommerce sites. I know that I have fallen victim too many times to buying items on my iPhone from Amazon while “just looking.”
With these numbers rising it is imperative to present websites that are not only beautiful, but also intuitive. Websites needed to be completely reimagined.
This is where we introduce responsive design.
Designing for the Best Experience
THE IMPORTANCE OF RESPONSIVE DESIGN
It is essential to always design for UX (user experience) first and then consider the aesthetics. If someone reaches a site that is complicated and difficult to navigate, regardless of the screen size, they will most likely become frustrated and leave. A website that loses traffic will also lose leads and profit.
Change can be scary, but it is necessary when dealing with the internet. Responsive web design is the most effective way to ensure that your site is user-friendly and modern.
DESIGN FOR USABILITY AND CONVERSION RATES
Responsive design should maintain functionality and ease of use from the largest desktop down to the smallest screen size. With the majority of people using their smartphones to pay bills, shop, and schedule their lives, the functionality needs to be carried through on a handheld device.
All buttons and calls-to-action throughout the website need to be clear and be just as clickable with a thumb as it is with a mouse. Once clicked the user needs to be reassured that their action has been acknowledged and the page is responding.
Suggested Read: How To Make Your Buttons Convert: Types & Best Practices
DESIGN FOR STACKABILITY AND FLOW
One of the main elements in responsive design is stackability. Stackability literally means that all content needs to stack on top of each other as the screen resolution shrinks.
When working with smaller devices content will need to be rearranged. Maintaining a simplistic flow is extremely important so that all viewers are clear how to navigate to the information that they are interested in.
KEEP IT FLEXIBLE
It is vital that hierarchy stays intact, the website is easy to follow, and it maintains simplicity. It’s important to pay attention to these four things when scaling appropriately according to the user’s screen:
Font & Headings
Headings are especially important to be aware of since they are usually quite large to draw attention, but most likely will not fit on a phone as expected. This can create confusion when words are broken up in a hard-to-read format.
Images & Video
Images and videos should always be saved out at the largest possible size (without affecting load time) to ensure that they have the best possible resolution. Pixilation, or blurriness, will occur if the website is attempting to stretch them larger than their original file size.
When working with less screen space to design it can get tricky on how to incorporate all elements that fit on a desktop resolution. Sometimes the best solution is it hide images and/or less important information at certain breaking points of the website. By making strictly visual elements hidden it will create more room for the main content and calls-to-actions.
Leave me a comment!
I’d love to hear your responsive design experiences and tips. Or, if you have a question, I’ll be happy to answer them in the comments below! – Laura Fuson, Lead Designer