Session Overview

Day: 
Sunday
-
Time: 
10:00a
Room: 
Beginner Design and User Experience

Responsive Web Design, because progressive enhancement is better than graceful degradation. You probably need responsive web design and you don't even know it. Responsive web design is the concept of developing a website in a way that helps the layout adjust according to the user’s computer screen resolution. Take SONY.com. Wouldn't it be wonderful if that beautiful site would render correctly no matter what screen size it's being viewed on?

It does: http://mattkersley.com/responsive/?http://sony.com

More examples:

You get the point.

You need responsive web design when:
YOU’RE STARTING FROM SCRATCH
Developing a whole new website or web application is a challenging process. You won’t know if the site will be successful until it’s live and in the world, so creating a separate mobile site or a mobile app in tandem with a website project could be a big waste time and money. It’s more efficient to get your new site performing well before you create an additional mobile site or application.

YOU WANT TO KEEP COSTS LOW
Solid responsive solutions require additional design and front-end development time, but doesn’t too heavily impact application development. It could take around 20-30 per cent longer to develop a responsive site, but it’s still faster than creating an additional mobile site or app. Developing a site this way also means that you only need to develop, manage, and maintain the one site, so it can reduce these costs too.

YOU WANT IT TO WORK EVEN WHEN NEW DEVICES ARE RELEASED
A mobile site needs to be able to recognize the user’s device; when new devices are released, the site needs to be updated. As the responsive solution only recognizes the browser’s width, no new updates would need to be made. This means it’s much more future-proof and scalable.

 

Come to this session and learn about bleeding edge topics like:

Progressive Enhancement consists of the following core principles: 

  • Basic content and functionality should be accessible to all web browsers.
  • Sparse, semantic markup contains all content.
  • Enhanced layout --> external CSS.
  • Enhanced behavior  --> external JavaScript.
  • End-user web browser preferences are respected.

Focuses on the content. (not browsers)
Media Queries consist of a media type and zero or more expressions that check for the conditions of particular media features.

For example:

@media screen and (min-width: 480px) {
   .content { float: left; }
   .social_icons { display: none }
   // and so on...}

Comments

Hi Tony, sorry I didn't upload these sooner, here's a link that will get you the slide deck.