Web Sites > Mobile and Responsive Design > What's Responsive Design?

What is Responsive Design?

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors).-- Wikipedia
 
Responsive design is the hot trend today and will likely be the way web sites are designed and built for the next decade. 
    
   

Traits of a Responsive Site

  • Scrolling should be vertical only – never horizontal (left and right).  You may have to scroll down for many pages – that is OK (Have you ever used Facebook mobile?).
  • Site will respond as the screen width changes.
    • Images resized to fit screen or disappear.
    • Menus and navigation components typically replaced by pull down menus/buttons.
  • One site for every device – not one for mobile, one for tablets and one for desktop.
  • Responsive sites use columns and layers.  Columns typically collapse as the width decrease.  When viewed on a mobile device/phone, content is typically arranged in layers.  Layers or sections of content are frequently separated by white space or gradients to set each content region apart.  

Why Responsive Design?

  1. Optimized for mobile devices (growing segment) and are intuitive and easy to use.
  2. One site for every device.  Easier to maintain.  Once you build the responsiveness into the site, you don’t have to do anything special. 
  3. Analytics between mobile and desktop versions of your site are not split in two.  With one site for all users, you can have complete insight into your users and activity.  
  4. Search Engines actually penalize non-responsive sites.  If you have two sites with the same content but one is responsive and one is not, the responsive site will get the highest page rankings.

Read "Why Do I Need a Responsive Design"?

The project went really well, but that’s what we get when we partner with JDB.

— Randy, VP of Operations