Being a website owner, it becomes important for you to create a fully responsive website if you want to reach maximum potential customers across multiple platforms and devices.
By creating responsive web design, you can give enhanced experiences to your visitors by making your web page compatible with different devices, such as desktops, laptops, tablets, and smartphones.
With the use of HTML and CSS coding, you can resize, shrink, hide, enlarge or move your website’s content to make it look amazing on any screen.
In this blog post, we will learn the right technique for creating responsive web design by using HTML5.
Importance of creating Responsive, Mobile-First and Adaptive Experiences
If you want to stay high in the competitive web development market, then you need to deliver the rich experience to your potential customers. With the help of responsive web design, you can create layouts that can easily adjust to any screen size.
There lots of things that we need to consider when it comes to creating a mobile-ready web design.
Smartphones are all about touch experiences, and touch screen offers great opportunities to interact directly with content. And it is important to consider the mobile ergonomics while designing layout and functionality for mobile-friendly design.
If you want to create a mobile-ready website, you need to optimize your content so that it can look equally brilliant on the desktop version, a tablet version, and mobile version, and deliver rich experiences to the mobile readers.
Ways to structure HTML for an adaptive website
If you want to keep adaptive experiences manageable and usable, it is better to use semantic HTML5 markup. It also provides innovative opportunities to create enhanced experiences (for example: with the use of HTML5 input types, you can introduce a powerful virtual keyboard on any touch device).
The best thing about semantic markup is that it is very compact and can be accessed by desktop browsers, smartphone devices, tablets, and next-generation devices.
Setting up a Viewport
The viewport is the visitor’s visible area of a web page. As we know that the desktop-based website has a fixed web page size that will look too large to fit the mobile browser viewport.
Therefore, most of the advanced mobile browser set a larger browser viewport that provides better viewing experience for non-mobile optimized websites.
But here, in this blog post, we are optimizing the user experience for mobile browsers, so we will use the viewport meta tag that will fix the screen width to the device width:
<meta name="viewport" content="width=device-width, initial-scale=1" />
With this viewport element, you can give instructions to your browser to control the dimensions and scaling of a web page, so that it can offer a soothing experience to the mobile visitors.
Content Fragmentation
If you want to give a better user-experience and also boost the loading time of a website, then you need to create two additional HTML documents for your supplementary content – reviews.html and related.html.
It is done because auxiliary content is not required for the main purpose (it is an additional content on the website. By default the content is visible through links on the page, but if there is any JavaScript support, then you can load the content on the visitor’s request.
Use of HTML Special Characters
You can minimize the need for background images (by saving HTTP requests) by using HTML special characters for easy shape.
For an example: you can use ☆ to create empty stars for ratings, or you can use ★ to create a solid star for ratings.
Use of “The tel: URI Scheme”
With the help of the tel: URI scheme technique, you can add a clickable link to the customer service number. You can do this by using the following line of code:
<a href="tel:+18005550199">1-800-555-0199</a>
This is a great technique because people now access websites on their mobile devices that can make phone calls as well.
In fact, some desktop configurations can easily launch VoIP apps to make up a phone call.
With the help of this technique, a visitor can instantly make a call by clicking the link mentioned on the customer service number.
The Process of Writing CSS that defines shared styles first, and then creates styles for larger screen with media queries
Style
While creating CSS, it is important for you to keep everything simple and fluid. As we know, all these devices have different screen sizes, and also the next generation’s devices won’t have the same resolution as today’s.
Therefore, we need to use the content to find out how the layout should adjust to its container.
Break up style sheet for larger screens
You need to create two different CSS files, i.e, style.css and enhanced.css with an objective to deliver basic styles for screens that are lesser than 40.5em and using media queries to provide enhanced styles for screens that are larger than 40.5em.
<link rel="stylesheet" type="text/css" href="style.css" media="screen, handheld" /> <link rel="stylesheet" type="text/css" href="enhanced.css" media="screen and (min-width: 40.5em)" /> <!--[if (lt IE 9)&(!IEMobile)]> <link rel="stylesheet" type="text/css" href="enhanced.css" /> <![endif]-->
You can use the conditional code “<!–[if (lt IE 9)&(!IEMobile)]>” if you want to deliver enhanced.css to non-mobile versions of Internet Explorer less than version 9, as they don’t support media queries.
Mobile-first styling
This means the styles that are first applied to mobile devices, while advanced styles and other overrides are then included into the stylesheet through media queries for larger screens. So here is the coding for mobile-first styles:
@media screen and (min-width: 40.5em) {
.product-img {
width: 50%;
float: left;
}
A mobile-first styling is done because codes for larger screens are much more complicated than the codes written for smaller screens.
In fact, some of the mobile browsers such as Blackberry <OS 6.0, WP7 pre-Mango, etc don’t support media queries, thus delivering base styles by default reaches more devices and browsers.
How to Apply Media Queries?
Media queries are clean filters that can be applied to CSS styles. They make it simple to change styles based on the functionalities of a particular device that is rendering the content, including the display type, height, width, and resolution.
In fact, it is always better to apply media queries in a mobile-first style. Our related product list sets up 2 to a row, but expands to 3 in a row when the size of a screen is at least 28.75em wide (a screen size of a mobile phone) and then to 6 to a row when the screen size is minimum 40.5em (small desktop screens)
*Default styles*/
.related-products li {
float: left;
width: 50%;
}
/*Display 3 per row for medium displays (such as mobile phones or smaller tablets)*/
@media screen and (min-width: 28.75em) {
.related-products li {
width: 33.3333333%;
}
}
/*Display 6 to a row for large displays (such as medium tablets and desktops) */
@media screen and min-width: 40.5em) {
.related-products li {
width: 16.6666667%;
}
}
According to the professional web developers, the small screen by default enables us to support more platforms and also makes it simple to include more breakpoints, without even developing existing styles.
Use Relative Units
Use percentages and em units with an objective to keep things flexible and scalable. Relative units are more compatible with an enormous deviation brought on any screen size, zoom level, and pixel density. Let us overview the formula for converting font sizes and dimensions from pixel-based to relative units:
target ÷ context = result
Use CSS to Reduce HTTP Requests
Getting a lot more HTTP requests can slow down the speed of a website, especially on mobile devices. To fix this issue, you can use some CSS techniques to limit HTTP requests as it will enhance the performance of a website.
Instead of using background images, you can incorporate CSS gradients in order to limit the amount of image requests.
/*Using CSS gradients instead of background images*/
header[role="banner"] {
position: relative;
background: #111;
background: +linear-gradient (top, #111 0%, #222 100%);
}
In fact, you can also use data URIs instead of background images for several smaller icons such as social features, location and search.
Behavior
After structuring and styling the responsive design of a website, you need to add JavaScript enhancements to add extra functionality to the image gallery, navigation and location.
Image Gallery
The image gallery, by default, is a large image with thumbnail images that click-through to their counterparts. It simply means that image gallery is compatible with browsers and devices with bad or no JS support.
<div id="product-img" class="product-img">
<figure class="img-container" id="img-container">
<img src="images/product_img_1.jpg" alt="XYZ" />
</figure>
<nav>
<ul>
<li><a href="images/product_img_1.jpg"><img src="images/product_img_1_thumb.jpg" alt="XYZ" /></a></li>
<li><a href="images/product_img_2.jpg"><img src="images/product_img_2_thumb.jpg" alt="XYZ" /></a></li>
<li><a href="images/product_img_3.png"><img src="images/product_img_3_thumb.jpg" alt="XYZ Logo" /></a></li>
</ul>
</nav>
</div>
Well, you can create an image carousel by using the available thumbnail images by following these lines code:
function buildGallery() {
container.html('<div id="img-list"><ul /></div>');
imgList = $('#img-list');
nav.find('a:first').addClass('active');
//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);
});
}
In order to give a rich experience, you can use Modernizer to discover the presence of touch events and CSS transitions. You can load in a library called SwipeJS to make a touch-oriented image carousel.
Modernizr.load({
test: Modernizr.touch && Modernizr.csstransitions,
yep: 'js/swipe.js',
complete: function() {
if (Modernizr.touch && Modernizr.csstransitions) {
swipeEnabled = true;
buildSwipe();
}
}
});
//Build Swipe Carousel
function buildSwipe() {
//Initialize Swipe.js
w.mySwipe = new Swipe(document.getElementById('img-list'), {
callback: function(event, index, elem) {
updateNav(index);
loadImg(index + 1);
}
});
}
Navigation
Navigation can be difficult for adaptive experiences. You can build robust navigation for desktop version of websites, but robust navigation can submerge the main content on small screens.
In order to provide the enhanced experience to your mobile user, you need to create a list called #nav-anchors that can be utilized to switch the visibility of the navigation and search bar on mobile devices.
<ul id="nav-anchors" class="nav-anchors">
<li><a href="#nav" id="menu-anchor">Menu</a></li>
<li><a href="#search" id="search-anchor">Search</a></li>
</ul>
<form id="search" 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="nav" 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>
However, you can integrate a resize listener that will help you detect whether there is enough space to display the navigation and search bar or not.
$(w).resize(function(){ //Update dimensions on resize
sw = document.documentElement.clientWidth;
sh = document.documentElement.clientHeight;
checkMobile();
});
//Check if Mobile
function checkMobile() {
mobile = (sw > breakpoint) ? false : true;
if (!mobile) { //If Not Mobile
$('[role="tabpanel"],#nav,#search').show(); //Show full navigation and search
} else { //Hide
if(!$('#nav-anchors a').hasClass('active')) {
$('#nav,#search').hide(); //Hide full navigation and search
}
}
}
Geolocation
In the mobile development sector, it is important to influence user location if you want to deliver a rich user experience.
Geolocation is one of the powerful features supported by all mobile browsers and most of the popular desktop browsers.
The fallback functionality can be easy to form where the user only needs to add their ZIO code to find store near them.
Conclusion
In this blog post, we have explored the complete process of designing a responsive website for different platforms and screen sizes. By following these steps, you can make a mobile-oriented and fully responsive websites.
About the Author: Maggie Sawyer is a professional web developer at MarkupHQ Ltd. She provides Photoshop to HTML conversion service in the web development field and socializes same through social media platforms. She is a passionate blogger and loves to share technical tutorials especially on html.