plus icon
message icon send icon close icon

Influential Specimens of Responsive Website Designs

Hiren Panchal
by Hiren Panchal  |  17th Feb, 2020 in Buzz

According to statistical insights by Ironpaper a growth agency 80% of users won’t use a website that doesn’t work. For the website to work well it has to have a quick reaction and response while accessed through any device. For any business it’s important to understand the makings of such a set up. Responsive design refers to the process of making websites adaptable to all devices and screen sizes in terms of both form and function. Let’s study a few website pages that will bring out little nuances of a good responsive website into forefront. Beginning with a major player –

Dropbox

Dropbox uses a fluid grid and images that are flexible designing an outstanding responsive website. The colour of font changes to suit the backdrop colour while changing from desktop to handheld devices and also the picture changes orientation.

Meaning, Dropbox offers a tailor-made experience across all the devices. For instance, in order to stop the users from bouncing, a tiny arrow guides the desktop users to scroll down and view more content. That arrow is not present in handheld devices, keeping in mind the fact that users usually scroll on a device with touchscreen ability. Likewise, their signup form can be seen on all desktop devices but on mobiles and tablets where the is less space the form hides behind a call-to-action button.

Dribbble

The website of Dribbble contains one of the trademarks regarded for a responsive web design. A versatile grid that shortens from five columns on the desktop and laptop computers to two columns on smaller tablets and mobile phones. Reducing the clutter on mobile devices, Dribbble has got rid of numerous items. Stating an example discussed by Jes Kirkwood – “Shots are no longer attributed to their maker and the view, comment, and like counts are no longer nested beneath each item” As referred in 11 powerful examples of responsive web design written for Inside Design by InVision a digital product design platform. A thoughtful and easy way that a good responsive website development company can learn from to make things user friendly.

Magic Leap

Magic Leap has created a non-complicated, mobile-first website with a parallax scroll which fuels life into their splendid illustrations. Acknowledging the figures by Statista – 2019, that attributes 56.74% of worldwide internet usage to mobile phones and tablets their approach is a logical move.

The user experience of Magic Leap is steady across all the devices, with just one exclusion: the microcopy which directs the users to scroll, it is included on desktop computers and tablets. However, it is omitted from mobile devices, where customers generally use the scroll. Even when the user is trying to open their website with a 3G connection, it loads only in seven seconds— below the global average of 22 seconds. Not too bad for a website containing responsive animation. The global average as pointed out in Find out how you stack up to new industry benchmarks for mobile page speed by Daniel An penned for Think with Google.

Shopify

The consumer experience of Shopify also displays consistency across all platforms. Only the call-to-action button and photographs are altered between desktop to mobile devices. On personal devices such as computers and tablets, the call-to-action button is to the right of the form field and for mobile devices, it’s underneath. In the same way, illustrations are to the right of the copy for personal computers and tablets, whereas they’re positioned beneath the copy on mobile devices. Like most other websites, Shopify’s menu is also replaced with a hamburger sign on handheld devices. In spite of using image carousels to impress their customers, Shopify has managed to keep their page load speed below five seconds, which is notably impressive.

Smashing Magazine

Smashing Magazine goes a notch higher of providing a tailored user experience across each and every device. Their website structures a layout with two columns, a complete menu and a combination mark on the desktop, that translates into a single column layout and a summarized menu with lettermark on mobiles and tablets.

The website of Smashing Magazine is also a brilliant example of inclusive design. Their menu seen by desktop users shows both labels and icons. And it’s remarkable how, in place of using a mediocre menu representation, they’ve chosen a call-to-action button with the word ‘menu’ on it and a search icon. Digital citizens have no issues steering websites from handheld devices, but generations other than that don’t essentially know what hamburger icons denote.

This website loads in just two seconds on devices with 3G internet facility. Which the association called the Global System for Mobile Communications articulates in their report – The Mobile Economy GSMA Intelligence. Saying it will cover up 70% of mobile connections over 2020. Keeping their bounce rate low and averts the users from getting irritated.

Slack

The brand Slack is recognized for being simplistically human. Not surprisingly their website adapts the same beliefs. Their workable grid effortlessly adjusts to viewports of all sizes and shapes. Illustratively stating, while customer logos are represented in a three-column layout on desktop and laptop computers, they’re shown in a one-column layout on handheld devices.

The website is also planned and formatted in a manner that it is easy to use. In case of their call-to-action buttons extend the entire column on tablets and mobile phones, which helps the users to avoid clicking the ‘Sign In’ hyperlink under.

Treehouse

Treehouse serves a unified experience across all podiums. The menu gets gradually smaller across devices—desktop and laptop computers include a four-item menu, tablets comprise a two-item menu and hamburger icon, and mobile phones give out a one-item menu and the icon. Their form fields go through an identical modification. Accessible in two columns on the desktop and laptop computers and single column on tablets and mobile phones.

“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can [make our] designs […] more adaptive to the media that renders them.” Earlier in 2010 the renowned web designer Ethan Marcotte advised web designers and web developers to use the Responsive Web Design – RWD. Ethan Marcotte – boon for a responsive website development company.

In today’s day and age RWD is an unavoidable function for any business website. The attributes listed above can be learnt, achieved and controlled with some assistance from a well-versed responsive website development company. Litmus Branding can be your companion to help you realize this goal.

Hiren Panchal

Director, Litmus Branding Pvt. Ltd.
Ahmedabad, India
Hiren Panchal co-founded Litmus with Kapil. Hiren owns an exhaustive character and sharpens his views with an analytical mindfulness. He observes every creative with a conscious magnifier. Just as his doer attitude wins over his believer attitude, his thought leadership aims at creating leaders and not followers on his team. His creative insights have created brands worldwide and he has been commanding in the industry for +20 years. Come to the point, he’s already there.