Responsive

Web Design

Why your site looks terrible on Grandma's Computer
Kyle Breckenridge

Wait for applause...




Mobile Market Share

  • 56% of American adults have a smartphone
  • 34% of American adults own a tablet computer
  • 77% of mobile searches are in a location where a computer is available such as home or work

Pressdemocrat.com
  • 29% of all traffic is from a phone or tablet
    • 15% phones
    • 14% tablet

WhY Not Mobile?

Mobile websites target specific mobile devices. (phones and tablets). This method is called User Agent(UA) sniffing.

 

This doesn't take into account future devices that might have different UA's than current generation devices.


Even if it does properly account for a future device, device dimensions change, the Galaxy Note 2 is 5.5 inches tall!

And Don't forget desktop displays

PressDemocrat.com
  • 768x1024 – 11%
  • 1280x800 – 9%
  • 1366x768 – 8%
  • 1280x1024 – 8%
  • 1920x1080 – 7%
  • 1440x900 – 6%
  • 1680x1050 – 5%
  • 320x480 – 5%

In Other words...



WHAT DO i DO ABOUT ALL THE DIFFERENT DEVICES AND PIXELS RATIOS AND MONITOR SIZES AND LEPRECHAUNS!!?!?!?


What's this adaptive thing?

Adaptive Design- utilizes many of the components of progressive enhancement (PE) as a way to define the set of design methods that focus on the user and not the browser. Using a predefined set of layout sizes based on device screen size along with CSS and JavaScript, the AWD approach adapts to the detected device (basic idea, there are some other pieces to server side adaptive and PE that are very useful)

I know the width of an ipad, an iphone, and standard desktops so I'll just make it look nice at those sizes and not worry about the rest. Assumes too much.


LAZY!!!
Like Mobile solutions, this Doesn't address the sizes in between

Enter
Responsive Web Design

What Is
Responsive Web 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 desktop computer monitors to mobile phones)


A responsive website uses a fluid (changing) layout to adapt to any screen size.

What does it Mean?

Key Advantages:
  • Future Proof
  • Content Parity (only one set of content)
  • Better for SEO (no seperate m.domain.com)
  • Graceful Degradation
  • Makes you look cool

Lets Play!!!!

Let's take a look at some websites!





One more Thing to consider

In case you weren't confused yet

RESPONSIVE Design

AND Mobile


Examples where this might be useful:
  • Banks
  • Sites with event registration
  • Really large eCommerce sites
    with static content

References

Responsive Web Design Presentation for the PD Media Lab Sales team

By Kyle Breckenridge

Responsive Web Design Presentation for the PD Media Lab Sales team

Presentation on Responsive Web Design for the PD Media Lab sales team.

  • 2,115