Responsive Web Design

3 methods for Mobile Web Design

1) Build an entirely separate .mobi mobile site

Why bad?

• may work only on a specific mobile size

2) Host the mobile site within your current domain

e.g. m.mycompany.com

Why bad?

• Redirects can hinder/annoy search engines
• Redirects take time
• If you offer an m.website for iPhone, what about for iPad, Android, etc
• Sharing a mobile m.website will not work for people on laptops, as they will end up with a site designed for a small screen
• Philosophical: every web resource should live at one URL!

3) Configure your current website for mobile display using Responsive Web Design techniques

RWD

RWD is the concept of developing a website in a way that allows the layout to automatically adjust according to the user’s screen resolution (called its viewport).

• The viewport meta tag lets you set the width and initial scale of the viewport.

  <meta name=“viewport” content=“width=590”>
  

3 technique for RWD

1. fluid, proportion-based grids

• "adaptive" grids VS "fluid" grids

  pixel-based dimensions VS relative-based dimensions

2. flexible images

• To avoid having an image deformed due to the screen size one should avoid specific definitions of width and height and instead use CSS’s max-width property setting it to 100%: img { max-width: 100%; }

3. CSS3 media queries.

providing different CSS based upon the viewport size

• A media query consists of :

1) a media type (screen)

2) the actual query enclosed within parentheses, containing:

2.1) a particular media feature (max-device-width) to inspect

2.2)followed by the target value (480px).

Hiding Content on Smaller Screens

display: none VS visibility: hidden

• Note that visibility: hidden just hides the content (although it is still there), whereas the display property gets rid of it altogether.

Usability Guidelines for Websites on Mobile Devices

1. Reduce the amount of content
2. Single column layouts work best
3. Present the navigation differently (in a menu, dropdown, or at the bottom)
4. Minimize text entry
   • request PIN instead of password
5. Decide how many mobile sites you need
   • consider users with slower connections and possibly make a lower resolution site
6. Design for touchscreen and non-touchscreen users
7. Take advantage of smartphone built-in functionality
   • see an address on a map
   • find the nearest

Bootstrap

• Bootstrap is a powerful front-end framework for faster and easier responsive web development3.