Responsive Web Designs: How to Create Mobile-Friendly Websites?

No Comments
Responsive Web Designs: How to create responsive web designs?

What are Responsive Web Designs?

Responsive web designing is an approach to provide the users with an optimal viewing experience, irrespective of the devices they are using. The idea is to provide a consistent and seamless experience for the users in terms of readability, site navigation, resizing the screens, scrolling, pan-to-zoom, etc.

We use advanced HTML, CSS, and Twitter Bootstrap to adjust a site’s content according to the varying sizes and resolutions of devices.

Responsive websites adjust their layouts and content achcording to the user’s environment using fluid proportion-based grids, responsive images, and CSS3 media queries.

While grids in adaptive designs are pixel based, fluid proportion-based grids are percentage based; which provides an edge to responsive websites over adaptive ones. In fluid grids, a maximum layout size is defined for the design, the layout is divided into 12 columns, and the dimensions of the individual elements are defined in percentages. Whenever a screen size or resolution gets altered, the elements adjust themselves according to the percentages.

Responsive images automatically adjust to adapt to the browser screen. While Media queries allow the web pages and the elements to render content, CSS helps to style it further,  according to the screen size.

 

How to Create Responsive Websites?

1. Set Meta Information

<meta> tag provides information about the web page like author’s name, page description, keywords and other metadata. Information parsed through meta tags does not get displayed on the web page, but is, rather used by the browser to know, how to display or render the content, search engines for keywords and other web utilities.

<meta name="viewport" content="width=device-width, initial-scale=1">

To make a web page responsive, set the meta tag name as “viewport”; viewport is the user’s visible area of the page and setting the tag name to the viewport, instructs the browser about how to control the dimension and scaling of the web page.

Set the value of the content attribute as “width=device-width, initial-scale=1.0”, this sets the width of the web page according to the size of the width and sets the page to initial zooming level, when the page is first loaded by the browser.

 

Web page viewports

Web Page Without Viewport versus Web Page With Viewport

 

2. Seamless User Experience

Elements or images larger than a viewport might cause the web page to scroll horizontally; try to adjust the content within the dimensions of the viewport, for, whatever be the device, be it desktops, laptops, tablets or mobile handsets, nobody likes horizontal scrollability.

Devices in a domain vary widely, so, do not set absolute values for element attributes by considering any particular viewport; for, what might appear good on one, may not appear the same on another.

Use CSS or Twitter Bootstrap media queries to style elements differently across devices. Media Queries are an extension of @media rule introduced in CSS2, that allows developers to apply different styling to different media types, and render element styling and content on the basis of device capabilities, like, height, and width of the device, height and width of the viewport, orientation, and resolution.

 

Responsive site navigation

Responsive Site Navigation

 

3. Define Breakpoints

Breakpoints are a kind of pauses in your web page, which allows the users to consume the content at hand, and re-align the web pages according to the device width, viewport, orientation, and resolution.

Do not add or define breakpoints on the basis of any specific device, brand, or operating system, for that will make the maintenance process tedious for you. Also, since there are a large number of devices with varying specifications, defining breakpoints by considering anyone, isn’t a wise decision.

Rather, consider defining according to content; adopt a mobile-first strategy, begin with the smallest viewport and design content for it, as you move towards the larger counterparts, you will notice points where the design begins to break and doesn’t look good any longer, that’s where you should add your first breakpoint.

In addition to adding major breakpoints when layout changes significantly, you can add minor breakpoints like changing margins or padding of elements or altering font types and sizes.

Where major breakpoint deals with simpler yet larger blocks of the layout, such as the shift of a sidebar, minor breakpoints includes styling of the components like fonts, padding etc.

For example, for smaller viewports, you can align elements vertically, as the viewer enlarges the browser window and the white spaces on the sides increases, you can add a minor breakpoint to align the elements horizontally.

 

breakpoints

Source

For instance, in the above example, there are two breakpoints, one between desktop and tablet and the second, between tablet and mobile phone. While elements are arranged quite spaciously in the desktop version, their size gets reduced significantly and vertically oriented in the tablet one, and gets completely vertically aligned for the mobile versions.

 

4. Use Responsive Images

Responsive images automatically adjust to fit in the browser sizes.

Set relative size for images, rather than absolute ones. For example, setting width attribute to 100% ensures that the image occupies the full available width of the device viewport and can be scaled up or down, but in some cases, it might overflow the container.

The solution is to set the max-width attribute to 100%, which will make sure that the image occupies the entire width of the viewport that can be scaled down if required, but never scales up more than the original picture.

Embed compressed images; do not alter the quality of the image, but drop the image size significantly, which results in faster rendering, and parsing of the web page content by the browser.

Use <picture> element for implementing art direction, that is, to specify different images for different device specifications, as in the image below.

Instead of having one image to scale up or down on the basis of viewport size or device specifications, you can use multiple images to fill in the browser viewport in different situations.

You must define images according to device orientation, viewport size, pixel density and image format.

Consider the syntax below:

<img src="default.png"

     srcset="wallpaper.png 1920w, landscape.png 1280w, medium.png 640w, small.png 320w"

     sizes="(min-width: 1920px) 100vw, (min-width: 768px) 50vw, 100vw" />

Compared to the old school way of making images responsive, picture tag provides much more flexibility.

<picture>

  <!-- The source will get chosen when the viewport is smaller than 767px.

       Large sources are still needed to cater for high dpi screens.

       No size means the browser considers the image to take the whole viewport. -->

  <source srcset="cropped-landscape.png 1280w, cropped-med.png 640w, cropped-small.png 320w" media ="(max-width: 767px)" />

  <img src="default.png"

       srcset="wallpaper.png 1920w, large.png 1280w, medium.png 640w, small.png 320w"

       sizes="(min-width: 1920px) 100vw, (min-width: 920px) 50vw, 100vw" />

</picture>

 

Responsive images

Source

5. Strategize Content

Desktops and laptops have larger viewports in comparison to tablets and mobile phones, implying space constraints.

With larger viewports, a significant amount of content can be added on the website without affecting the User Experience, but in case of tablets and phones only a limited space to reach out to the user is available.

According to a Nielsen Norman Group report, people do not read content on the web, rather, they scan it. They search for answers to their in-hand questions, instead of leaning back to go through the whole article to grasp the gist.

Therefore, it is imperative that you design multi-device content that changes its font and formatting according to device characteristics.

Users usually go through the web content in either the F or E shaped pattern. That is, scanning the first 1-2 lines of the first few paragraphs, and then checking out only the left side of the content.

While a desktop site can have multiple paragraphs that contain some information, mobile/tablet content could be adjusted to render the key points of the content, usually in the initial parts of the paragraphs.

Next, add content that directly addresses users’ problems, offers actions, and solutions, in simple, plain and well-structured language.

 

6. Testing

Testing a Responsive Web Design isn’t a cakewalk, for, you need to test on a wide range of devices.

Since it is practically impossible to test on every real device, you can use various mobile emulators and Chrome DevTools to test the readability and outlook of your design.

Test under all possible conditions, low bandwidth, slow internet speed, heavy traffic, multiprocessing and high latency and rule out all the possible loopholes.

Ask your friends and family to try out your site on their devices and give valuable feedback.

 

How to Check Whether your Site is Responsive or Not?

i. Resize Browser Window

Resizing browser window is the simplest way to check if your site is responsive or not.  a responsive site, regardless of the device adapts itself to the screen size,, as you enlarge or shrink the browser window, whereas an adaptive website detects the device and renders HTML and content accordingly.


Responsive vs adaptive

Source

For instance, resize WebMD website, you will find it adjusting its content according to browser window even on a desktop, but if you check with Amazon, it does not adjust its content, rather, it just resizes and provides horizontal scrolling.

 

ii. Source code

View page source of a web page you want to check by pressing Ctrl + U

or by appending “view-source” in front of the website URL in the address bar, like, “view-source:http://www.example.com”

Look for keywords like “responsive” and “@media”. If present, these indicate responsiveness of the website.

 

iii. Online Tools

You can also use some of these free/paid online tools to determine the responsiveness of your website:

 

Google mobile friendly test

Google Mobile-Friendly Test

 

Responsive website checker

Responsive Web Design Checker

 

Browserstack

BrowserStack

 

Some of the Best Responsive Websites Examples:

1. Starbucks

Founded in 1971, Starbucks, one of the world’s largest coffee purveyor, re-launched its website, a responsive one way back in April 2012, and became one of the first major brands to launch a responsive website.

The decision came after its stakeholders realized the potential of responsive web design in the retail environment, which helped them mark their presence across a large number of devices and increase customer participation, eliminating the need to maintain multiple codebases and helping garner SEO benefits.

Starbucks

2. World Wildlife Fund

World Wildlife Fund, one of the leading organizations working for wildlife and nature conservation launched its new WWF responsive website to extend its outreach to people from around the globe and accessing a wide range of devices.

The new responsive site has large images and longer pages illustrating WWF’s amazing work, sticky navigation bars to help users navigate seamlessly, newly added sections like, Habitats, emphasizing the importance of diverse ecosystems present around the world, clear visuals relating to present work and carousels with beautiful photographs illustrating WWF’s work and opportunities they offer.

World wildlife fund

3. More Hazards

More Hazards’ responsive website is a perfect blend of creativity, uniqueness, and minimality, offering one of its kind approaches. The site has everything you need for a mobile-friendly website, no redundant elements, simplified text and clutter-free, truly a user’s site.

More Hazard

4. Dropbox

Dropbox has done a remarkable job with its one-page responsive web design strategy and a minimalistic approach. Simplified text, no unnecessary elements, and images coming easily to the users. While there’s always a signup form in desktops and laptops, the same gets hidden in the form of a CTA button, as you move towards handheld devices.

In addition to this, desktop versions have a small arrow, directing users to scroll down to learn more about the utility, whereas, this element is removed from the mobile version, keeping in mind the touch capabilities of the handsets.

Dropbox

5. Shopify

Consumers have gone mobile and so have the merchants; Shopify, the Canadian e-commerce company allows users to run their businesses online, in-store, and on mobile. Founded in 2004, Shopify launched its responsive dot-com in late 2014 widening its reach among the users.

The company didn’t begin by distinguishing mobile-experience content and desktop-experience content, rather it focused, primarily on content relevance and the goals of its user.

Shopify

Summing Up

While it is quite impractical to be able to design websites for all the devices, a responsive web design is what the world looks forward to.

With a single codebase, your website can adjust automatically to any web environment, providing ample opportunities to attract new customers to your business.

Need more assistance? Contact Melbourne’s most trusted web designers.

Recent Posts