Design Group


« Habitech Systems | Main | Live Fit Medicine Squarespace Site »

Media Queries & Responsive Design

What is Responsive Web Design?

Responsive design is a development technique using adaptive layouts to allow your website to automatically customize to the many different screen sizes. Whether your visitor is on a phone, an iPad or a huge desktop monitor or a television, your website adapts.

Why build a responsive site?

Because the Web’s primary access point for many people will soon be or is currently a mobile device. Pew Research’s latest study indicates that 28% of Americans access the web primarily on their phone. In other countries the number is much higher and it’s estimated that by 2015, almost 50% of Internet traffic will be from a mobile device.

Focus your content because people are more distracted than ever!

Now, more than ever, websites need FOCUS. Make your default design the fastest most focused useful content and then add more as the screen width grows larger. Design for partial attention and interruption.  Architecting your site this way, your visitors will get to the most important information first and FAST.

“There simply isn’t room in a 320 by 480 pixel screen for extraneous, unnecessary elements. You have to prioritize. So when a team designs mobile first, the end result is an experience focused on the key tasks users want to accomplish without the extraneous detours and general interface debris that litter today’s desktop-accessed Web sites. That’s good user experience and good for business.” - Luke Wroblewski 

Touch or Mouse .. design for both!

Touch screen interaction has fundamentally changed how the world interacts with a website. Tablets and smart phones all use touch so tiny links and mouse-over effects won’t work when your site is being used with these devices.

Notice in the second video, at the end I click on a page with an embedded video and it scales perfectly as well.

Reading & Respect:

Responsive Web Design by Ethan Marcotte , A responsive mind by Jeremy Keith , Fluid Grids by Ethan Marcotte , css3-mediaqueries-js , Smashing Magazine ,  Hicksdesign Journal by Jon Hicks

Latest Tweets ( @cloudyreason )