10 Powerful Examples of Responsive Web Design

Your website is the face of your business and the first glimpse of what your brand offers. When creating a website your priority is that it should be eye-catching and well-designed. But you also want your website to be successful right? Then it should not only look good but also accessible to all users. It should be a responsive website that works on any device.

A well designed responsive website should also look great across all devices. Whether it be a laptop, desktop, tablet or a mobile phone browser. In addition to visual appeal, it should be user friendly with strong calls to action that are clearly visible to the user. Truly great responsive websites avoid users having to resize or zoom in or out on a page, or spend more time than necessary searching for something in particular on a website. 

Here at Pivotal Agency, from our almost twenty years experience creating websites we know that it can be daunting for business owners to not only choose a website development company, but to also know where to begin researching to find great examples of well designed responsive websites. Below, we have provided some examples of great websites from a range of different business types to help you imagine what your website could look like.

Responsive website design examples

Pivotal Agency - We are human-centred digital agency who create websites that define your business. Pivotal Agency offers a variety of services in digital marketing and web & app development. The website display stays consistent across all devices but there are some changes when it is viewed in a mobile device. When opened in a mobile device, we hide the menu in the hamburger icon in the upper right corner of the page. While the “Find Out More” call-to-action button is transferred into the centre of the page.

Andersson/Wise - An online portfolio of architects and designers that represents skills, experience and clients of the company. Their page focused more on showing the quality designs of architectures they've made. The home page has a carousel that is flexible and compatible with any device. The page has a three-item menu that remains consistent in its place even when viewed in other devices such as desktop, mobile phones, tablets and laptop computers. Even though their page has a lot of images they are still able to maintain their page speed in 2.2 seconds on a 4G connection, which is very remarkable.

Big Gun Wholesale Meats - An online wholesale butcher that allows consumers to order in advance and pickup in store 7 days a week. Using an elegant user interface Calls To Action are clear and easily accessible allowing users to purchase items quickly. The hamburger menu item is visible when users visit the website from a tablet or mobile phone. At the top of the page users are able to choose between heading to the online store or signing up for exclusive member only specials. Directly below this are clean graphics that showcase the product range of this ecommerce website. Keeping in line with SEO best practice, the site maintains a load speed of under 2.5 seconds in a 4G connection which puts it on the front foot for an SEO campaign. 

Golden West Apprenticeships - Is a recruitment agency that focuses on apprenticeship roles. This responsive website uses highly visible Calls To Action through clear placement and bright contrasting colours to encourage users to take specific actions. The home page focuses on two main areas. One for jobseekers and the other for employers. Coupled with the responsive website design, the colour contrast and highly visible calls to action translate well across all devices. This design works well for businesses that have two core focuses. This website has an amazing speed of 856 milliseconds.

Canva - A graphic design platform that allows users to create social media graphics, presentations, posters, documents and other visual content. Users can choose from many professionally designed templates and edit the designs and upload their photos through a drag and drop interface. By using a desktop, the canva webpage has five (5) item menu from the upper area and has six (6) items on the left side area but when viewed through mobile phone all those items are in the hamburger button. The 'Create a design' button from a desktop view will be changed to a plus icon when viewed from a phone. The features don’t hinder the speed of the page, they maintain the 3.5 speed in a 4G connection which makes visitors experience a consistent flow while browsing through the site.

L’Oursin Seattle - A responsive website of a French restaurant and bar serving natural wine and aperitif cocktails. In their platform, they are showcasing a minimalist design which makes contents stand out and be the focal point in the page. When viewed on a mobile phone, they replaced the logo from the centre-top of the page with a text "L'OURSIN SEATTLE" making it more simple. While they hide the 7-item menu in a hamburger icon at the upper-left side of the page maintaining a modest atmosphere when using a mobile phone browser.  L'Oursin Seattle is a responsive website that attracts visitors with its simple, elegant and minimalistic design approach. Its page speed is 1.8 seconds on a 4G connection and it's speeding up  1.0 seconds faster this month. 

The Shrink Academy - Is a health care specialist organisation that provides a number of services across behavioral and disability services conveniently throughout various geographical locations. Using carefully constructed topic groupings in the menu, users are able to quickly identify the sections of the website that are likely to contain the information they are seeking. Calls To Action are clear and the website is responsive and visually appealing across all devices.  They have a speed of 2.2 seconds keeping it inline with best practice.

Paypal.com - An online financial service that allows you to pay for items using a secure internet account. It provides an easy and quick way to send and request money online. The website displays a four (4) dropdown tab and a ‘sign up’ button at the upper area which will be in a hamburger button when viewed from a mobile phone perspective but the dropdown feature remains as it is. The homepage has a carousel that shows their CTA that is flexible and adaptable when used to all kinds of devices such as desktop and mobile phone. It has a 3.5 secs speed in a 4G connection which made it an impressive site. 

LinkedIn - LinkedIn is the world's largest professional networking website. A social networking site designed specifically for the business community. It's a very useful career-management tool to help you with building and maintaining your network. LinkedIn is made with a multi-column layout website that is accessible in many devices, from a computer to mobile phones. Usually, good sites start to load in under 2.5 seconds, but LinkedIn is an incredibly responsive web design since their website loads exceptionally at 1.4 seconds on a 4G connection.  The page shows more text than images to get more traffic. At the top of the page, it has a website logo, search bar, a five-item menu with its glyphicons and a profile photo of account owner that has a dropdown to account customisation and a chatbot at the left bottom of the page when it's viewed in a computer desktop. But there's a lot of changes when opened in a mobile browser. It became a single column layout and most of the items are transferred at the bottom of the page, while search bar, message glyphicon and profile photo were left at the top. The thing is they remove the logo and chatbot for easier access in handheld devices. 

Netflix.com - An Over-The-Top Media Service, basically an online streaming service that allows you to watch popular films, streams, documentaries and many more. The website’s layout stays consistent when viewed to a mobile phone, desktop and other devices. They have a dropdown feature at the bottom area of the page that answers their frequently asked questions. It has a speed of 2.3 secs in a 4G connection and is classified as responsive web design for its impressive adaptable features.