Responsive Design

Responsive Design

We are going to take a look at how to develop an adaptive web experience that is designed mobile-first. This blog will go over the following:

  • Why we required developing mobile-first, adaptive, responsive experiences
  • How to structure HTML for a responsive website to optimize performance & prioritize flexibility?
  • How to write CSS that defines shared styles first, builds up styles for larger screens and uses relative units along with media queries
  • How to code good JavaScript to conditionally render in content fragments, take advantage of touch events and geolocation What we can do to further improve our responsive experience?

The Need for Adaptivity

The web landscape turns highly complex, it's becoming very crucial to provide solid web experience to an increasing number of contexts. The responsive web design(RWD) offers web professionals few tools for building layouts that respond to any screen size. We will use flexible images, fluid grids & media queries to attain the layout looking great irrespective of the size of the gadget's screen dimensions.

Even though, mobile context is much more than just screen size. Our mobile gadgets are with us wherever we go, unlocking complete new use cases. Because we constantly have our mobile gadgets with us, connectivity can be grown all over the board, extending from strong Wi-Fi signals on the couch to 3G or EDGE when out and about. Moreover, touch screens open new options to cooperate directly with content and mobile ergonomics lead to various considerations when designing functionality and layout.

For the purpose of developing a business website that is designed for mobile devices & not only for small screens, we need to make sure that we take on the many challenges of mobile development. The obligations of the mobile devices enable us to concentrate on what is important and how to present that content as soon as possible. Creating a quick loading, optimized web experiences mobile first has a filter down effect for desktop, laptop, tablet and other arising gadgets.

What We Are Making: The Humble Product Detail Web Page

The demo we are making is a simple E-commerce product detail web page for a fictional T-shirt company. Why choose this? The E-commerce websites can have many use cases across considerations. For instance, 70% of the smartphone users use their phones to enable in-store purchases. So when we will ensure that product purchasing as simple and easy, we will also try to enable the product reviews to use and access the visitor's location to improve the mobile experience.

Structure

Authoring lean, semantic HTML5 markup makes responsive experiences accessible and manageable and also offers possibilities for improved user experiences. The semantic code is exceptionally portable and accessible by Smartphones, tablets, PC web browsers and also future web-enabled gadgets, irrespective of capability or feature set.

The Viewport Setting

With the aim of accommodating for websites not optimized for small size screens, many latest mobile web browsers set a larger browser viewport, which enables for better display of non-mobile optimized websites. Audiences can then pinch to zoom in on the content they need. That is fine for non-mobile user experience, but as we are optimizing our experience for mobile web browsers we can make using the viewport meta tag to modify the screen width to the width of the gadget:

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

It is mandatory to note that we are not disabling the visitor's capability to zoom the web page, even though we are optimizing the web content for small size screens. It's advisable to make the user zooming enabled to allow things are accessible. Anyhow, there are use cases to disable user zooming like if you are adding fixed positioned elements.

Content fragments

To keep the user experience as lightweight and enhance the observed loading time we are building 2 added HTML documents for our auxiliary content, reviews.html, and related.html. As this content is not needed for the main use case like buying the product, payment and incorporates a number of pictures, we won't render it by default to make the initial web page size down. By default, the content is available through links on the web page but if a definite level of JavaScript support is given, when the user requests it, we will load conditionally the content or when the resolution reaches an absolute breakpoint.

HTML Special Characters

To reduce the need for background images the simple technique to use is HTML special characters for simple shapes. With respect to our rating stars, we are using ★ to get a solid start (★) and ☆ to obtain empty stars (☆) for our rating needs. And it is HTML and not an image, it stays fresh even on screens that have high resolution.

The tel: URI Scheme

Another efficient technique we are including in our footer is a link that is clickable to the user's service number. This is done by using the tel URI scheme, which looks like this:

 <a href="tel:+18005550199">1-800-555-0199</a> 

Sometimes we forget that mobile gadgets can make phone calls and some desktop or laptop configurations can launch VoIP apps to start a phone call. We are including an easy and simple way for audience to assist a phone call which in some cases makes sense that is a mobile audience who may choose to finish the transaction over the phone versus going via a checkout flow on their mobile gadgets.

Now, we have a robust, semantic foundation in place, let's move into adding style improvements.

Style

While crafting our CSS(Cascading Style Sheet), we will do all in our scope to make things fluid and lightweight as possible. We realize that all these gadgets have many various screen sizes and that future devices may not have the same resolutions. If the screen size is unknown, then we will use the content to define how the layout automatically changes to its container.

Mobile-First Styles

Beginning with baseline shared styles and commencing more advanced layouts when screen size allows to keep code smaller, simpler and more maintainable.

We need to avoid complexity as much as possible, so here's what a mobile-first method looks like:

 @media screen and (min-width: 40.5em) 
{
  .product-img 
   {
    width: 60%;
    float: left;
    }
} 

Rather than declaring large screen size rules first only to outweigh them for smaller screens, we will simply determine rules as more real estate becomes accessible. By default, the web is a fluid thing so we can do our best to work with it as contrasted with it. It is mandatory to note that few mobile web browsers like Blackberry

Applying Media Queries

We are continuing our mobile-first style while applying our media queries. Our product list starts with two rows, but increases it to 3 in a row when the screen size is at least 28.75em wide(mobile phones in landscape mode) and then to 6 in a row when the screen size is at least 40.5em (tablets or small desktop screens).

Presuming small screen by default enables us to assist more platforms and makes it simple and easy to add more breakpoints without changing the existing styles. Describing styles because they needed to keep the file size down, reduces complexity & enable the code more maintainable.

Relative Units

We are using em and percentage units in our design for the purpose of keeping things more flexible. The relative units are very compatible with the huge variance brought on by pixel density, zoom level, and screen size. When media queries are interactive web design, we need our fluid grids to do most of the job. Managing a complete slew of set-width styles across many media queries can become awkward, so it is important to ensure the style sheet's foundation is fully flexible.

target ÷ context = result

CSS to Reduce Requests

The huge number of HTTP requests can a killer for performance, particularly on mobile devices. We are integrating some CSS approaches to save HTTP requests which can enhance the business site's performance. By using CSS gradients rather than background images lessens the number of image requests and provide us more control over the web design. We are containing the appropriate vendor prefixes to make sure maximum compatibility and also there are tools available to achieve this and in future, these rules can become standardized to save us time.

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

We are also using data URIs rather than background images for some of the smaller icons such as GPS, search, social features. When data URIs might look a bit ugly and can increase up to the style sheet file size, the reduction of requests results in a faster-perceived download time.

Behavior

Now we have our style and structure in place, we will add JavaScript improvements to add features to the image gallery, navigation, and auxiliary content.

Navigation

Navigation can be especially tricky for responsive experiences. Top navigation is common for desktop websites, but top navigation can mob the device's screen and can push down the primary content on screens. We need to highlight the product or services and not the website navigation. We will make the navigation out of the way by using our markup, we have developed a list called #nav-anchors which can be used to toggle the display of the navigation and search bar for small size screen devices like smartphones.

Image Gallery

The image gallery by default is a huge image with thumbnail images that click via to their larger copies. Which means that they are accessible to devices and web browsers with less or no JavaScript support. To improve the experience furthermore, we are using Modernizr to find the presence of CSS transitions and touch events and if they are supported we will render in a library named as SwipeJS to enable a touch-friendly image carousel.

Now we can access the image gallery with added improvements for touch-friendly devices.

Related Content

To make the initial web page size down, we are not loading secondary content, for example, the related T-shirts and product reviews. Rather than they exist as their own HTML web pages, as a default behavior which is accessed by links. We will place the related web content when any one of the 2 conditions is satisfied: When a small size screen audience click the related T-shirts or product reviews, links or When the device's screen has enough space to display the extra content.

Geolocation

Influencing user location to provide the improved user experience(UX) is a crucial factor in mobile development. The geolocation is greatly supports features across mobile, web browsers and also desktop browsers. The fallback featured can be a simple form where the audience just inputs their ZIP code to find the store.

Next Steps

Adaptive Images

Our demo is not integrating many large images, but it is the best idea to load on mobile-optimized images by default then load in larger images only when required. There are lots of various techniques for responsive images both server-side and client-side. We have done more mindful of performance and optimizing images in an easy way to optimize performance.

Less JS

By keeping web pages as lightweight and it is important for performance so we must optimize the scripts for better performance. We can think about using Closure Compiler to sack out unused bits to make things as lightweight as possible when still getting the benefits of what jQuery offers. As an alternate option, we can look into micro-frameworks such as Zepto.js and others, but they are typically do not need to offer the best cross-browser compatible.

Offline Access

It is very crucial to ensure the web experiences are accessible in offline also, specifically while mobile users with variable connectivity. The app cache and other offline methods provide a way to keep our resources accessible even when the audience is in offline mode also.

Conclusion

We have developed an experience that is mindful of user context and modifies both functionality and layout depends on the devices and web browser features. We have also established a foundation that can adjust to future devices and web browsers.

  • Build mobile first CSS to keep things simple, lightweight and maintainable.
  • Author semantic HTML5 markup as a foundation for adaptive experiences.
  • Use relative units like percentages and ems to keep styles as fluid & flexible as possible.
  • Permit content determines the breakpoints for media queries.
  • Utilize chances to reduce HTTP requests by conditional loading content and using CSS gradients, HTML characters, Data URIs and much more.
  • Author discreet JavaScript and use tools such as Modernizr to detect features.
  • Take benefits of mobile-centric features such as touch events, telephone links and geolocation to offer improved experiences to the mobile audience.

Developing adaptive experiences enables your content to go more places, therefore more possibilities to reach potential clients everywhere they may be. By attaching to the principles of progressive improvement and addressing restrictions first, we are setting a future-friendly foundation that provides our website a better chance of working in future devices and web browsers.

If you have any doubts or queries about this blog, then please feel free to contact us immediately, we are here to help you. Email-id: info@htmloffshore.com

Contact Us


Content

Contact Us