Introduction:
Hey Guys! Last article was about "How to Install Ubuntu 15.04 Along With Windows 8 (Dual Boot)".
Unlike a conventional desktop oriented website, the one which has been created for the mobile screens is a lot more in demand. It is a responsive website which automatically adjusts itself to fit the screen of device that the site is being viewed on. All the content, whether it is the text, images or video get moderated to ensure best display on the screen under focus. Whether you're a publisher, a designer or a developer, taking care of your site's mobile responsive design is something that can render flawless experience to the targeted users. In this post, I'll be walking you through the vital steps that must be followed for building a fine quality mobile responsive design.
What kind of mobile responsive design are we going to create in this tutorial?
Here, I'll be creating a simple e-commerce product detail page for a t-shirt firm. So, while ensuring that the customers are able to make the purchases conveniently, we'll also be making the product review easy-to-access, followed by utilizing customer's location for enhancing the overall mobile shopping experience.
A look at the basic structure
It is essential to author a semantic HTML5 markup that will allow you to ensure completely manageable and fully accessible adaptive experiences. The reason for this being that semantic markup is fully portable and can be easily accessed on a variety of mobile devices, desktop browsers, tablets etc.
Coming to the individual steps for creating mobile responsive design
Step 1- Set the Viewport
While for a majority of non-mobile-optimized websites, most of the contemporary browsers set up a larger browser viewport, in case of designing a website using mobile responsive design, we'll be using viewport meta tag for setting the screen width to the device width as shown below:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Step 2- Adding the flexibility to load the website content conditionally
Here, we'll be creating two new HTML documents for the auxiliary content viz: reviews.html and related.html. Unlike the default way in which the content is accessible via links available on the page, we can use a little bit of javascript for loading the content as and when user requests for the same or when the screen's resolution reaches a specific breakpoint.
Step 3- Use HTML special characters
As an attempt to decrease the need for background images, it is recommended to use HTML special characters. In this tutorial, I've used $#9733 for creating a solid star (★) and ☆ for creating empty stars (☆) for the product ratings.
Step 4- Include a clickable link within footer
Here, we'll use the tel URI scheme for including a clickable link to customer service number, within the footer. Here's a look at the tel URI scheme:
<a href="tel:1234567891">123 456 7891</a>
Step 5- Add style enhancements
With a strong semantic markup in place, it's time to add some style enhancements as explained below:
Create separate style sheet for screens with larger displays
Here, we'll be creating two CSS files viz: style.css and enhanced.css for delivering basic styles for screens with dimension less than 967px. We'll be using media queries for serving the new styles for screens with dimension greater than 967px as shown below:
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style-967.css" type="text/css" media="screen and (min-width: 967px)" />
<!--[if (lt IE 9)&(!IEMobile)]>
<link rel="stylesheet" href="ie9.css" type="text/css" />
<![endif]-->
Adding Mobile-first styles
Next, we can start off with adding shared styles and advanced layout rules as shown below:
/* Avoid this style */
.customer-list img {
width: 30%;
float: left;
}
@media screen and (max-width: 967px) {
.customer-list img{
width: auto;
float: none;
}
}
The mobile-first approach will now look like this:
@media screen and (min-width: 967px) {
.customer-list img {
width: 30%;
float: left;
}
}
Next, we'll be applying media queries as shown in the below code snippet:
/*Display 2 per row for medium displays*/
@media screen and (min-width: 480px) {
. customer-list li {
width: 50%;
float: left;
}
}
/*Display 3 to a row for large displays*/
@media screen and min-width: 768px) {
. customer-list li {
width: 33.33%;
float: left;
}
}
Step 6- Use CSS for reducing HTTP requests
Have a look at the below CSS which will play a vital role in saving HTTP requests so as to improve the overall performance of your website. For instance, CSS gradients can replace background images for decreasing the count of image requests and rendering a greater control over the original design.
/*Using CSS gradients rather than background images*/
header {
background: #333;
background: +linear-gradient (top, # 333 0%, #555 100%);
}
Step 7- Add Javascript enhancements
To start off, we'll be adding functionality to the site's navigation. In the HTML5 Markup, we'll using a list #top-menu for toggling the visibility of navigation as well as the search bar on all small screens. Have a look at this:
<ul id="top-menu" class="top-menu">
<li><a href="#">Menu</a></li>
<li><a href="#">Search</a></li>
</ul>
<nav id="main-menu" class=" main-menu">
<ul role="main-menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
</ul>
</nav>
Additionally, we will include a resize listener which will find whether there's any possibility of displaying the search bar and navigation. Have a look at this:
var swidth, sheight ;
$(window).resize(function(){
swidth = document.documentElement.clientWidth;
sheight = document.documentElement.clientHeight;
setElements();
});
//Set elements according to differ screen size
function setElements() {
device = (swidth < breakpoint) ? true : false;
if (!device) {
$('#top-menu').show();
} else {
$('#top-menu').hide();
}
}
Adding functionality to the Image Gallery
To start off, we'll be adding functionality to the site's navigation. In the HTML5 Markup, we'll using a list #top-menu for toggling the visibility of navigation as well as the search bar on all small screens. Have a look at this:
Have a look at the below code snippet which will allow us to build an image carousel using the available thumbnail images:
function intslide() {
container.html('<div id="img-slider"><ul /></div>');
imgSlider = $('#img-slider');
$('nav a:first-child').addClass('active');
$('nav a').each(function() {
var href = $(this).attr('href');
imglist += '<li data-src="'+href+'"></li>';
});
imgSlider.find('ul').append(imglist);
$('nav a').on('click', function(e) {
var slidepos = $(this).parent().index();
e.preventDefault();
loadImg(slidepos);
if(swipeEnabled) {
mySwipe.slide(index, 500);
}
updateNav(slidepos);
});
}
Adding functionality for Related Content
A code snippet will allow us to pull in related content in case any one of the below two conditions are met:
When a mobile user clicks on related t-shirts or the product reviews links
When screen has enough space for loading the auxiliary content
The code snippet that I'm referring to is shown below:
function setElements() {
device = (swidth < breakpoint) ? true : false;
if (!device) {
loadContent();
}
}
//Set up content
function loadContent() {
var $content = $('.content');
$content.each(function(index) {
var $this = $(this);
var contentLink = $this.find('a');
var contentFragment = contentLink.attr('href');
var realContent = $this.find('.demo');
if (realContent .size()===0 && $this.hasClass('loaded')===false) {
getContent(contentFragment,$this);
}
});
}
function getContent(src,container) {
container.addClass('showcontent');
$('<div class=”demo” />').load(src +' #content > div',function() {
$(this).appendTo(container);
});
}
As an approach to keep the web pages lightweight, I recommend using Closure Compiler for chopping off all the unused bits of the jQuery library. Other impressive alternatives include popular micro-frameworks like Zepto.js etc. Finally, don't forget to pay special attention to ensuring seamless off line access to your website. This will serve as a brilliant surprise to mobile users who aren't connected to the Internet at times.
We're done!
Conclusion:
With that it's a wrap on this post which made you familiar with the basic steps of creating a mobile responsive design. Hope by having a responsive design, it will become convenient for you to adapt to all the future mobile devices and browsers quite conveniently and instantly.
Author Biography:
Samuel Dawson is a comprehensive expert in Designs2HTML Ltd involved in the process of to convert HTML to Wordpress in a top manner.
