Step by Step Tutorial to Create a Responsive Website

This is an exclusive guide from planning to developing a responsive website. I am teaching responsive website designing since 2012 in this institute and in this short span of time I have taught many students those are working in today’s biggest companies of IT sector in India and abroad.

So I decided to write something on responsive website designing which is concise and very practical. I divided this study in 6 parts and further every part contains many sub parts and points. I hope you will like my effort and expecting few shares and comments from you too.

Steps to Create a Responsive Website

Responsive website designing is not a new programming or software it’s a new technique based on existing languages and scripting to create a website that optimizes its design, content, features, and various other things according to the device. 

In simple words

“A website or web application that simplifies itself according to the environment in which it is being accessed is Responsive Website Designing.”

Someone said it very well

Responsive website is a great simplicity for the developer and great utility for the viewer.

We will study this subject in the various topics and sub-topics so please follow along all the topics to get a good hold on the responsive website designing. Following are the topics and sub topics those are required to be a good responsive web designer.

Step 1: Introduction to Responsive Website Designing

Giving you all the introductory points here necessary to create a professional responsive website. This step will cover fundamentals for mobile web designing and development along with a detailed explaination of mobile context.Pleaseread all the following given points carefully.

A. Introduction to Mobile Web Design and Development Fundamentals

1. How to build compelling and easy to use mobile website optimized for today’s mobile devices?
2. Difference between mobile and desktop context
3. How those will influence the web design?
4. Coding & interface design techniques that work well on all mobile web browsers
5. Will show how to use some of the latest features of HTML5 and CSS3
   1. Geo Location
   2. Local Storage
   3. Media Queries
6. Also talk about some advanced HTML5 APIs useful to improve user experience of the website
   1. Canvas
   2. Drag & Drop
   3. Video
   4. Audio
7. Will take an existing website and convert to Responsive Website

B. Understanding the Mobile Context

1. Mobile context study: what are the facts those make mobile web development different from other forms of web development?
2. The above subject is compulsory to know in-depth to create an easy to use and productive website for the user.
3. Topics to considers about mobile web development
   • Mobile is a usage scenario not a form factor.
   • Mobile web users are very often busy when the use it. Ex: Restaurant, Travel etc.
   • The user’s environment can be unpredictably. Ex: office, home, park etc.
   • Mobile users expect mobile optimized web site to adapt to their location and surrounding.

Step 2: Understanding the Mobile Web

A. What Exactly Mobile Web is?

i. Mobile is a usage scenario not a form factor

ii. Mobile device characteristics are important

Physical Differences

1. Desktop:
   • Full Keyboard with real keys hyper-accurate pointing device
   • Large screen
   • Multiple monitors
   • Powerful CPU/GPU
   • Big disk etc…
2. Mobile: The mobile web fundamentally different the desktop.
   • Limited/ virtual keyboards
   • Fingers pointing device
   • Small screen which can rotate
   • Less capable CPU/GPU
   • Smallest storage

Difference of the basis of experience

1. Desktop:
   • Typically used from predictable locations
   • Good for open-ended browser research
   • Easy to switch among many tasks
   • Users are focused and comfortable
2. Mobile:
   • Unpredictable environments
   • Good for quick searching
   • Focused on discrete individual tasks
   • User is often distracted or busy

iii. Phones can interact with the world around them because they have following features

iv. Things to consider when mobilizing your content

• Who is using your site?
• What are your users doing when they get to your site?
• Where is your site being accessed from? (user location)
• When is your site accessed? (Time | ATM | Bank | Prime News)
• Why are the users coming to your site – Quick or Deeper Answers
• How are users accessing your site is their device highly capable? – Strong Audio & Video or text only

B. Survey of Mobile websites

• i-Phone – Twitter
• Android – ebay
• Windows – Wikipedia – Nokia Lumia
• Motorola Zoom Tablet

C. Targeting Mobile Browsers

i. The Main Mobile Browsers Platforms

Webkit Engine

• Safari – i-phone
• Chrome / Android
• Blackberry/ Black Bery G
• Palm

Presto Engine

• Opera
• Opera Mobile

Gecko

• Firefox
• Firefox Mobile

Trident

• Internet Explores
• IE Mobile

A survey on the use of mobile woldwide

North America: Webkit Engine –> Android –> i-phone –> Blackberry

Europe: i-Phone –> BB –> Android –> Opera –> Nokia

Opera is a leading Browser wordwide.

ii. Potential Targeting Strategies

• Deliver a lowest common denominator experience
• Covers every one, but leaves modern smart phone users wanting more.
• Choose one or two platforms to optimize for, then hope for the best. Today’s popular platforms may change, and other platforms are improving.
• Create a tiered approach based on device richness. Minimizes support cost while maximizing # of addressable devices.
• Use feature detection, progressive enhancement, browser detection, and browser engine detection.

iii.  Targeting Mobile Browsers

• Newer, more capable browsers available on mobile devices
• Mobile devices can detect browser features instead of individual browsers
• Browsers can be classified into tiers based on these capabilities

1. Rich experience for highly capable browsers (HTML5, CSS3)
2. Light experience for older but still standards- compliant browsers
3. Very light or no experience for browsers that fall below your baseline

iv. Exploring Few Responsive Websites

In our course of Responsive Website Designing; we will explore few websites too so that you can know what is in trend and new in the industry.

Step 3: Mobile Web Design & Development Guidelines

A. Design for One Web

1. All devices should be able to access yours site
2. Different devices have distinct capability and will not offer varying visual experiences
3. Don’t exclude users because of the device they use
4. As a solution, separate content from behaviors and presentation
5. Keeps CSS and JS separate from your content
6. Avoid inline style sheets and JS such as (event handlers)
7. Avoid device/browser specific mark-up features
8. Pick a baseline for your audience and build form there
9. Use techs- progressive enhancement to deliver high quality experience

Build Pages those are crisp, clean, and succinct.

B. Use Well Defined Web Standards

1. Adhere to a well supported baseline of web standards. XHTML 1.0/ XHTML-MP/ HTML4, CSS 2.1, JS 1.4
2. Some devices provide support for more advanced features such as CSS3, HTML5, XML, HTTP Ajax and some vendor specific features
3. Use client side feature detection to enable more advanced functionality
4. Use server-side detection to steer users to appropriate part of yours site
5. Don’t use client-side browser sniffing to enable/disable features

C. Mobile – Suited Web Standards

1. The viewport, handheld friendly, and mobiles optimized meta tags
2. Help the mobile browsers in determining how to best layout the page
3. CSS- media-queries –
   1. Enable yours page to deliver different styles based on the device
      1. Style sheet
      2. Width of screen
      3. Color
4. HTML5 local storage – provide a way to remember user settings without relying on cookies
5. Geo Location – enables your web application to see where it is being used from

D. Design Mobile Friendly Pages

1. Finger friendly pages – Flick, Pinch, Stretch, Tap, and Swipe
2. Fingers can do more than pens (don’t usually get lost)
3. Can pinch, expand, swipe and make all kinds of gestures
4. Fingers tips are typically 40-80px in size (around 7-10mm)

E. Optimize your pages for vertical scrolling

1. Vertical scrolling simplifies the consumption of content for the user
2. Minimize the need of pan Left – Right
3. Can easily scroll with thumbs
4. Or can use some others elements like a trackball or arrow keys on the keypad
5. Users are used to the idea of scrolling to see more content. But may not immediately realize that they can pan left or right, and may miss content.

F. Avoid Web Technologies that don’t work on mobile

1. Some web technologies and mark-up elements don’t work well on mobiles
2. Frameset – a bad idea (not flexible)
3. Tables – a bad idea (not flexible)
4. Nested Tables are – bad idea (not flexible)
5. Images maps – a bad idea (mouse event -)
6. Plug-in – most mobile devices don’t support binary plug-in

G. Build pages that are crisp, clean and succinct

On mobile devices, less is usually more- simple designs resonate.

• Use fewer fonts – 2-3
• Font sizes – 2-3
• Place important page controls like search boxes, navigation element near the top of the page.

Avoid using gratuitous graphics and unnecessary interactivity animation

• These just get in the way and present the user from making progress ex- welcome screen/ splash screen these thinks use also battery like

 Avoid complex background images they make the content hard to read

• Dense and heavy images when sole
• In variant lights conditions images because herds to need

Optimize graphics and others media assets for smalls screen size

• Use white-space judiciously and group common elements
• Give users the ability to switch to the desktop version of yours
• Should use lights and darks versions of style sheets
• Consider allowing the user to switch between darks/lights style setting
• Can use section jump list

H. Minimize required input when possible

1. When users have to enter data, it interrupts the user experience
   • Inputting data requires the uses to stop focus on the task
   • Data entry can become tedious and increases the odds of errors
2. Only require the minimum amount of input from the user to get the job done
3. Provide sensible default values
   • Use cookies or local storage to remember the user choice
4. Consider collecting data automatic
   • Use device sensor: time of day, location etc…
5. Make intelligent design choices to decrease manual data entry
   • Display links to suggested pieces of data the user is likely to request based upon this current location.
   • Remember past input and allow the user to quickly re-select them.

I. Focus on Core Scenarios

1. Great mobile sites focus on the mobile user’s context
   • Mobile users are busy and can’t stop and learn how to use your site
   • Resist the temptation to shoehorn your entire main site on to the device
2. Focus on your site’s most important features
   • Make sure they are prominent, without the need of scrolling
3. Make sure your site can be read in seconds

Step 4: Setting up a Development Environment

A. Installing Emulators

• Windows phone- (use short keys page-up and page-down for better exploration)
  • Open your project: localhost/yourfilename

B. Our First Mobile Page

For old phones:

<meta name="handheldfriendly" content="true" />

For new phones:

<meta name="mobileoptimized" content="320" />

For modern phones:

<meta name="viewport" content="width=device-width" />

C. Developing Mobile Pages on the Desktop

1. Many desktop browsers now have mobile counterparts

• IE – ie mobile browser
• Mozilla (Platforms Nokia/Windows Mobile) – browser fennec
• Safari – Mac/Windows/iPhone
• Chrome Browser- Android Phones

2. General Pattern

• Change the user agent of the browser to match a mobile device
• Resize the window to be the same size as the device screen
• Use the browser’s built in developer tools to debug and test
• Remember to use the desktop browser that corresponds to the mobile one when possible since the rendering engines match – up.

D. Useful Tools for Mobile Development

IE and Safari- Already have user agent switching feature build-in.

1. Firefox- User agent switcher add-on
2. For Chrome- User agent switcher extension
3. For Opera- Opera dragonfly debuggers works with opera mobile emulator

Step 5: Understanding Mobile Site

A. Reviewing Mobile Markup Languages

The brief history of mobile markup languages

• In 1970s IBM introduced SGML (Structured Generalized Markup Language). HTML, XML, HDML
• HDML- Handheld Device Markup Language
• HTML- CHTML and HTML5
• HTML+XML- XHTML
• CHTML- Compact HTML- Japan
• HDML- WML
• WML – Wireless Markup Language – (late 1990s – Nokia)
• WML+ CHTML+ XHTML – XHTMLMP (2000-2008) standardized in 2001 updated in 2008
• HTML5 – 2011 June

B. XHTML – MP and HTML5

1. Prior to the introduction of most modern Smartphone’s, XHTML –mp was the most common markup – language for mobile devices.
2. Doctype – XHTML –mp

<! Doctype html Public “-//w3c//DTD XHTML Basic 1.1//EN” “http://www.w3.org/TR/XHTML-basic/XHTML-basicII.dtd”>

1. XHTML-mp divided full XHTML into “modules”
   • Provided a way for mobile developers
2. To move off of WML
   • Allows less – capable devices to support most common features
3. Newer phones and devices are now able to support HTML5

C. Understanding Content Adaptation Approaches

Content adaptation strategies

1. Do Nothing – Existing desktop content is served directly to mobile devices without any layout changes or optimizations (except maybe viewport).
2. Multi-serve – The same page content is served to both desktop and mobile devices, but with styling and script appropriate for the target form factor.
3. Mobile Specific – Mobile specific content is created and served to mobile devices while desktop devices receive desktop appropriate content.

D. Controlling the Viewport Layout

1. Designating mobile–ready pages with the viewport

• Over the years, mobile browser vendors have come up with various way of identifying mobile ready pages.
• Mobile browsers often try to optimize desktop web pages to work well- using these identifies turns optimizations for mobile pages.

<meta name="HandheldFriendly" content="true" />

<meta name ="MobileOptimized" content="320" />

<meta name="viewport" content="width=device-width" />

2. The Viewport Tag Properties

• The VP meta tag controls how the browser displays the page- its presence also disables the browsers mobile optimizations for desktop based pages.
• The VP tag has several properties that can be set to determine how the browser responds to user interaction
  VP Properties –
  1. width
  2. height
  3. initial-scale (zoom)
  4. maximum-scale (zoom)
  5. minimum-scale(zoom)
  6. user-scalable(0/1 a Boolean value)

Default value of width in px

1. Windows Phone 7 – 1024
2. iPhone – 980
3. Android – 800
4. Opera mobile -800

3. Designing Forms for Mobile

• Forms on mobile devices are constrained by several factors, such as the width of the screen and the device’s input capabilities
• Basic checklist for mobile web from
• minimize the numbers of screens the user has to pass through
• They to use native web forms contact
• Use top-aligned from labels
• Give the user the option to display password characters
• Use the HTML5 form input tags

4. Using CSS Media Queries

• Provides a way of selectively applying style sheets based upon certain characteristics of the media where the content will be displayed.
  • Window size
  • Screen size
  • Aspect ratio
  • Color depth
  • Resolution etc.
• Media Queries are a W3C candidate recommendation as of July 2010
  • http://www.w3.org/TR/css3-mediaqueries/

Common Media Queries Features:

  5. Using CSS Media Queries

Defining CSS Media Queries

For small screens such as phones

<link rel="stylesheet" media="screen and (max-width:480px)" href="phone.css" >

For medium screens, such as tablets

<link re="stylesheet" media="screen and (min-width:481px) and (max-width:800px)" href="tablet.css" >

For large screens, such as desktops and laptops

<link rel="stylesheet" media="screen and (min-width:801px)" href="style.css" >

Step 6: Creating Mobile Optimize

A. Client-side Capability Detection

1. With JavaScript

• Avoid SS – UA detection (browser sniffing) when possible
• Inherently backward-looking hard to get right, hard to make future-proof
• Instead, try to use script to determine a browser’s capabilities
• Client side script detect features not specific browsers
• Detect support for something e.g. HTML5 canvas/video
• Enable code that relies on that feature if it is present
• detecting support for geolocation services

if(!!navigator.geolocation){
    //                   
}else{
    // no  support
}

– detect support for autofocus on <input>

 if (!!(“autofocus” in document.createElement(‘input’)))
{
    // device support
}else{
    // no support
}

2. Detection with Modernizr

• Modernizr is a small JS library that detects dozens of features
• Free and open source
• It does not add support for features, it detect them actually
• Creates a global JS object named modernizr that contains attributes that indicate where these features are or not natively supported
• Modernizr adds CSS classes to the <html> element of documents

How to use Modernizr:

• Add a script link to create a link to the modernizr library
• Add “no-js” class to <html>
• Use it to see if features are supported
• Define CSS styles to use for particular modernizr test results (for example, when a feature is or isn’t supported)

B.  Using Client-side Local Storage (LS)

• HTML5 local storage provides president data storage without cookies
• HTML cookies have several drawbacks
  • Not very large – limited to 4 KB
  • Transmitted to and from server every request
  • Not very secure – sent as clear text unless your whole site is served as SSL
• LS provides a database-like solution
• Values are stored per-domain, just like cookies
• Data is stored as sets of key-value pairs
• 5 MB storage area (through currently no way to increase that limit)
• Event model for detecting when changes take place in storage

Local Storage API

– Detection

if(modernizr.localstorage){
   //support
}else{
   //not support
}

– LS features are accessed from the window.localstorage object

– Getting and setting items from and into local storage

window.localStorage.setItem(“key”,  “value”);
var val = window.localStorage.getItem(“key”);

            Or

window.localStorage[“key”]=”value”;
var val = window.localStorage[“key”];

– Removing items from and clearing the local storage

window.localStorage.removeItem('key');
window.localStorage.clear();

– General information about local storage area:

window.localStorage.length; window.localStorage.key(n); //where n is the index

Local Storage Events

The ISO will send events when changes happen

window.addEventListiner(“storage”, storeChangeHandler);
function storeChangeHandler(e){
    //
}

Values / Storage event property

• key
• new value
• storage area
• old value
• url

C. Using Geolocation

Geolocation is a powerful html5 api to detect physical position of device. See the given below example:

if(navigator.geolocation){
    //
}

if(modernizr.geolocation){
    //
}

There are 2 ways to get location

1. Short method

getCurrentPosition (success callback, errorCallback, options);

2. Continuous method

WatchID = WatchPosition(Success Callback, error callback, options);
Clearwatch(watchID);

function successCallback (positioninfo)
{
    // use the position info
}

function errorCallback (positionErrorInfo)
{
    //report the error condition or take other action
}

Options

• Enable high accuracy – true/false
• Default is false (for GPS true)
• Timeout – duration in milliseconds – (timeout duration)
• maximumAge – cached location info duration

if(navigator.geolocation){
     navigator.geolocation.getCurrentPosition(success, error, {enableHighAccuracy:true, timeout:10000, maximumAge:120000});
}

Resources: Bing maps, Google maps, Map quest

Handling Error Conditions

Code: Constrains the error code can be PERMISSION_DENIED(1), POSITION_UNAVAILABLE(2), TIMEOUT(3).

Message: Contains any associated error message from the device do not use in our interface only for debugging.

function error(errInfo){
  if(errInfo.code == 1){
    alert(‘message’);
  } else if (------------ == 2){
    alert("----");
  } else if (------ == 3){
    alert("---");
  }
}

Handling Success Conditions

Coords – coordinate object- contains info about the location time stamp – Time in milliseconds that the location was defined

Coords Object:

• longitude: in decimal degrees
• latitude: in decimal degrees
• accuracy: how accurate the location is (in meters)
• altitude: altitude of the location in meters (null if not supported)
• altitudeAccuracy: accuracy of the altitude of the location in meters (null if not supported)

---

View Full Presentation on Slideshare: Responsive Web Design – Tips & Tricks