Login to your account

Returning 2011 attendee? Log in now!

Not registered yet? Sign up!

Responsive Web Design (Primer)

Speaker(s): 

Do I need RWD?

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 trending topics in design like:

Progressive Enhancement which 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 which 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...}

You can find a blurb and the slide deck here from the one I gave at Drupalcamp LA.

Schedule info