tips about responsive design

2
Tips About Responsive Design What Is Responsive Design? A responsive theme, allows a website to be displayed smoothly across a wide variety of monitor sizes, screen resolutions, platforms, and devices.Rather than designing a site that works for one screen size, or designing separate themes that work for different devices, the goal of responsive design is to build a dynamic website that adapts to the width of the user's screen and works for both large and small screens. This involves creating a flexible-width layout that will adapt as the screen size changes, and writing code specific to screens with a particular size so that you can trim down or hide certain elements at smaller widths and restrict the width of the page on large screens. Drupal Mobile Solutions Drupal Mobile Solutions is expected to outpace desktop-based access within three to five years. Two of the three dominant video game consoles have web browsers (and one of them is quite excellent). We’re designing for mice and

Upload: drupalgeeks

Post on 17-Aug-2015

237 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Tips About Responsive Design

Tips About Responsive Design

What Is Responsive Design?

A responsive theme, allows a website to be displayed smoothly across a wide

variety of monitor sizes, screen resolutions, platforms, and devices.Rather

than designing a site that works for one screen size, or designing separate

themes that work for different devices, the goal of responsive design is to

build a dynamic website that adapts to the width of the user's screen and

works for both large and small screens. This involves creating a flexible-width

layout that will adapt as the screen size changes, and writing code specific to

screens with a particular size so that you can trim down or hide certain

elements at smaller widths and restrict the width of the page on large

screens.

Drupal Mobile Solutions

Drupal Mobile Solutions is expected to outpace desktop-based access within

three to five years. Two of the three dominant video game consoles have web

browsers (and one of them is quite excellent). We’re designing for mice and

Page 2: Tips About Responsive Design

keyboards, for T9 keypads, for handheld game controllers, for touch

interfaces. In short, we’re faced with a greater number of devices, input

modes, and browsers than ever before.

Responsive design uses a blend of fluid layouts, CSS3 media queries and

flexible images that when combined allow your site to adapt to the device it's

being viewed on.

Your standard desktop site might be three columns, but in your average

smartphone you might want to display only one column - this is entirely

doable using responsive design - it's a way of re-flowing the content and

layout to suit the width of the device.

The Way Forward

Fluid grids, flexible images, and media queries are the three technical

ingredients for responsive web design, but it also requires a different way of

thinking. Rather than quarantining our content into disparate, device-specific

experiences, we can use media queries to progressively enhance our work

within different viewing contexts. That’s not to say there isn’t a business case

for separate sites geared toward specific devices; for example, if the user

goals for Drupal Mobile App site are more limited in scope than its desktop

equivalent, then serving different content to each might be the best approach.

But that kind of design thinking doesn’t need to be our default. Now more

than ever, we’re designing work meant to be viewed along a gradient of

different experiences.Drupal Responsive Design offers us a way forward, finally

allowing us to design for the ebb and flow of things.