The growing complexities in the web landscape have motivated web developers to deliver solid web experiences to users accessing the internet via desktops and smartphones/smart tablets etc. Fortunately, responsive web design has offered web creators a variety of tools that can be utilized for creating layouts that can respond to any screen size and resolution.

The easy use of flexible images, fluid grids and media queries has allowed web experts to design layouts that can fit every device’s screen dimensions. So, in today’s post, I’ll be walking you through the steps involved in creation of a mobile friendly design. Let’s get going!

In this tutorial, we’ll be looking into creation of an e-commerce product detail page for an anonymous t-shirt firm. The basic idea of creating a mobile friendly design(product detail page) is to make it utmost convenient for the smartphone owners to purchase a product.

Step 1- Author a lean, semantic HTML5 markup- While creating a mobile friendly design, it is imperative to use proper HTML5 input types for introducing virtual keyboard feature on a majority of touch devices. There’s no doubt on the fact that semantic markup is completely portable and can hence be accessed by a wide range of tablets, mobile devices, desktop browsers etc.

Step 2– Set the viewport

For websites which aren’t optimized for mobile screens, a majority of mobile browsers have set a larger browser viewport which entails better viewing of the websites on different mobile devices. Visitors of such websites can hence pinch-to-zoom in on the website content they want to view. So, use viewport meta tag for setting the screen width to device width as shown below:

1

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

Step 3- Create content fragments

Here, we’ll be creating two HTML documents viz: reviews.html and related.html for the auxiliary content. While by default the content can be accessed via page links, it is recommended to load the content in case the user requests the same or if the screen’s resolution reaches the specified break-point.

Step 4- Use HTML special characters

A simple way of eliminating the need for background images is to use HTML special characters. For instance, you can use &#9734 for creating empty stars(☆) for the ratings.

Step 5- Include a clickable link within the footer

Here, you can use tel URI scheme for including in the footer, a link to customer service number. The structure of tel URI scheme is shown below:

1

<ahref="tel:+18001230789">1-800-123-0789</a>

This would also facilitate the initiation of a phone call for finishing a transaction instead of going through the tedious checkout flow.

Step 6- Add style enhancements

With a semantic foundation in place, it’s time to add some style enhancements to the layout. Since screen sizes won’t remain the same forever, we’d be using the content for determining how the layout must adjust to its corresponding container.

Now, we’ll be creating two separate CSS files viz: style.css and responsive.css for delivering styles for screens with dimension less than 40.5em. These two CSS files use media queries for serving responsive styles for screens with dimensions larger than 40.5em. Code snippet associated with the same is shown below:

In the above code, I’ve used conditional code <!–[if (lt IE 9)&(!IEMobile)]> for serving enhanced.css to all non-mobile versions of IE lesser than version 9. This method adds an HTTP request for rendering greater flexibility over the styles. Another point to note is that px is being replaced by em unit for maintaining consistency with all the other relative units used for user settings.

Additionally, you can introduce advanced layout rules. Here’s an example to demonstrate the same:

1

2

3

4

5

6

7

8

9

10

11

12

13

/*Desktop screen styles first - Avoid*/

.sample-img{

width:70%;

float:left;

border:1pxsolid;

}

@media screen and(max-width:40.5em){

.sample-img{

width:auto;

float:none;

border:none;

}

}

Step 7- Apply media queries

By applying media queries, the related product list will increase to 3 in a single row each time the screen size is at least 28.75em wide, followed by getting increased to 6 to a row each time the screen size is at least 40.5em. Code snippet associated with the same is displayed below:

/*Display 4 to a row for large displays (like medium tablets and up) */

@media screen andmin-width:40.5em){

.sample-productsli{

width:25%;

}

}

Step 8- Use CSS for reducing HTTP requests

Multiple HTTP requests can easily ruin your mobile friendly design. Hence, it is recommended to use CSS techniques for saving the HTTP request. For instance, you can use CSS gradients for reducing the count of image requests, thereby rendering greater control over the web design. The code snippet for the same is shown below:

The code associated with creation of an image carousel from the available thumbnail images is shown below:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

functioncreateGallery(){

container.html('<div id="img-list"><ul /></div>');

imgList=$('#img-list');

nav.find('a:first').addClass('selected');

//For Each Navigation Link

nav.find('a').each(function(){

var$this=$(this);

varhref=$this.attr('href');

//Prepare list item with image source in data attribute

arr+='<li data-imgsrc="'+href+'"></li>';

});

//Append to #img-list

imgList.find('ul').append(arr);

//Nav Thumbnail Click

nav.on('click','a',function(e){

varpos=$(this).parent().index();

e.preventDefault();

loadImg(pos);

if(swipeEnabled){

mySwipe.slide(index,300);

}

updateNav(pos);

});

}

2. Navigation

Within the markup, we’ve created a list called #nav-link which will allow us to toggle the visibility of search bar and navigation for smaller screens. Code snippet for the same is shown below:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<ul id="nav-link"class="nav-link">

<li><ahref="#navigation"id="menu-anchor">Menu</a></li>

<li><ahref="#searchBox"id="search-anchor">Search</a></li>

</ul>

<form id="searchBox"action="#"method="post"class="search reveal">

<fieldset>

<legend>Search the Site</legend>

<input type="search"placeholder="Search Store"/>

<input type="submit"value="Search"/>

</fieldset>

</form>

<nav id="navigation"class="nav reveal">

<ul role="navigation">

<li><ahref="#">T-shirts</a></li>

<li><ahref="#">Hoodies</a></li>

<li><ahref="#">Pants</a></li>

</ul>

</nav>

In the above code snippet, we will now add a re-size listener which will determine whether there is sufficient space for displaying the search bar and navigation. Here is how it goes:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<script>

$(window).resize(function(){//Update dimensions on resize

screenwidth=document.documentElement.clientWidth;

screenheight=document.documentElement.clientHeight;

checkMobile();

});

//Check if Mobile Size

functioncheckMobile(){

mobilesize=(screenwidth>breakpoint)?false:true;

if(!mobilesize){//If Not Mobile Size

$('[role="tabpanel"],#navigation,#searchBox').show();//Show full navigation and search

}else{//Hide

if(!$('#nav-anchors a').hasClass('selected')){

$('#navigation,#searchBox').hide();//Hide full navigation and search

}

}

}

</script>

3. Related Content

As an attempt to keep the Initial page size down, we aren’t loading the auxiliary content viz: related t-shorts and product reviews. Instead, these contents exist by default as individual HTML pages which are being accessed via links. The code snippet associated with the same is shown below:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

<div class="markup sample-products"id="sample-products">

<header id="tab-related"class="header">

<ahref="related.html">

<h2>Sample shirts</h2>

</a>

</header>

</div>

<div class="markup reviews-page"id="reviews-page">

<header id="tab-reviews">

<ahref="reviews-page.html">

<h2>10Reviews</h2>

<ol class="stars">

<li class="on">&#9733;</li>

<li class="on">&#9733;</li>

<li class="on">&#9734;</li>

<li class="on">&#9734;</li>

<li>&#9734;</li>

</ol>

</a>

</header>

</div>

Next, there is another piece of code which when executed will pull in the related content when one of the below mentioned conditions are met:

when a small-screen user clicks on related shirts or product reviews links

Creating adaptive experiences allows you to take full advantage of unlimited possibilities that are available for reaching out to the targeted customer base. It is essential to design a website/app keeping the browser and device specifications in mind. I’m sure the above post would have allowed you to dig deeper into creation of a remarkable responsive design that fits every device with any screen size.

Samuel Dawson has written this content with great thoughts and efforts. He is a Sr. Front End Developer in Designs2HTML Ltd, an impeccable PSD to WordPress conversion service company. He is a lover of mobile design and he shares his knowledge regarding this.