June 2, 2015 10:25 am

An easy guide on creating Mobile Friendly Design

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.

An easy guide on creating mobile friendly design

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!

Books on Responsive Web Design

What sort of responsive web design are we creating in this tutorial?

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.

Read Also: 10 Amazing Techniques To Build Beautiful Responsive Web Design

Now, coming to the procedure of creating mobile friendly design

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:

<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:

<a href="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:

<link rel="stylesheet" type="text/css" href="css/style.css" media="screen, handheld" />
<link rel="stylesheet" type="text/css" href="css/responsive .css" media="screen  and (min-width: 40.5em)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" type="text/css" href="responsive.css" />
<![endif]-->

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:

/*Desktop screen styles first - Avoid*/
.sample-img {
  width: 70%;
  float: left;
border:1px solid;	
}
@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:

/*Default styles*/
.sample-products li {
  float: left;
  width: 50%;
}

/*Display 2 per row for medium displays (like mobile phones in landscape or smaller tablets)*/
@media screen and (min-width: 28.75em) {
  .sample-products li {
    width: 50%;
  }
}
/*Display 4 to a row for large displays (like medium tablets and up) */
@media screen and min-width: 40.5em) {
  .sample-products li {
    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:

/*Using CSS gradients instead of background images*/
header[role="banner"] {
  position: relative;
  background: #000; 
  background: +linear-gradient (top, #000 0%, #222 100%);
}

Step 9- Add Javascript enhancements for adding functionality to image gallery, navigation and auxiliary content

1. Image Gallery- Starting off with adding functionality to image gallery, here is the code snippet associated with the same:

<div id="sample-img" class="sample-img">
  <figure class="img-container" id="img-container">
    <img src="images/sample_img_1.jpg" alt="denim shirts" />
  </figure>
  <nav>
    <ul>
      <li><a href="images/sample_img_1.jpg"><img src="images/sample_img_1_thumbnail.jpg" alt="Denim Men's Shirt" /></a></li>
      <li><a href="images/sample_img_2.jpg"><img src="images/sample_img_2_thumbnail .jpg" alt=" Denim Women's Shirt" /></a></li>
      <li><a href="images/sample_img_3.png"><img src="images/sample_img_3_thumbnail .jpg" alt=" Denim Logo" /></a></li>
    </ul>
  </nav>
</div>

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

function createGallery() {
  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);
    var href = $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) {
    var pos = $(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:

<ul id="nav-link" class="nav-link">
  <li><a href="#navigation" id="menu-anchor">Menu</a></li>
  <li><a href="#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><a href="#">T-shirts</a></li>
    <li><a href="#">Hoodies</a></li>
    <li><a href="#">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:

<script>
$(window).resize(function(){ //Update dimensions on resize
  screenwidth = document.documentElement.clientWidth;
  screenheight = document.documentElement.clientHeight;
  checkMobile();
});
//Check if Mobile Size
function checkMobile() {
  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:

<div class="markup sample-products" id="sample-products">
  <header id="tab-related" class="header">	
    <a href="related.html">
      <h2>Sample shirts</h2>
    </a>
  </header>
</div>
<div class="markup reviews-page" id="reviews-page">
  <header id="tab-reviews">
    <a href="reviews-page.html">
      <h2>10 Reviews</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
  • when a screen has enough space for loading the auxiliary content

//Check if Mobile

<script>
function checkMobile() {
  if(screenwidth > breakpoint) {
    mobile = false;
  } else {
    mobile = true;
  }
  if (!mobile) { 
    loadAux(); 
  }
}

//Set up Markup content
function loadAux() {
  var $markup = $('.markup');
  $markup.each(function(index) {
    var $this = $(this);
    var markupLink = $this.find('a');
    var markupFragment = markupLink.attr('href');
    var markupContent = $this.find('[role=tabpanel]');
    if (markupContent.size()===0 && $this.hasClass('loader')===false) {
      loadContent(markupFragment,$this);
    }
  });
}
function loadContent(src,containerSec) { // Load Tab Content
  containerSec.addClass('loader');
  $('<section role="tabpanel" />').load(src +' #content > section',function() {
    $(this).appendTo(containerSec);
  });
}
</script>

Final Thoughts

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.

Author Samuel Dawson

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.


Tutorial Categories:

Leave a Reply

Your email address will not be published. Required fields are marked *