Drupal Technical

[Drupal] How to get into responsive design?

Premshankar.pb | | 3 min read

After smartphones born, people don't just use desktop computer or laptop anymore to visit the websites. They will go for smartphones, tablets, palmtops and so on. How can we keep design to all these different devices? There is a way, that`s responsive webdesign.As the name tells, its a matter of responding to the site user's device specifics.

Where to start with the responsive design?

All the major browsers support these techniques today.These are the major components of a responsive webdesign:

  • CSS3 media queries
  • Flexible grids
  • Flexible media

1. CSS3 media queries

CSS2 allowed us to serve different stylesheets based on media type. We could load a stylesheet when the user looks at the site on a desktop computer that is different from when the page is printed out or when the site is visited using a handheld device.

CSS3 however, adds some new possibilities: media queries. Media queries allow us to actively query a device for specifics like device orientation, screen resolution, color depth or the type of screen.Using this, we can present suitable stylesheets for each device.

Using media queries in our Drupal theme
If we would like to load a different stylesheet when the user holds his device horizontally, we can add something like:
stylesheets[all and (orientation:landscape)][] = style-landscape.css

Multifile option: Embed your media queries in the .info file

stylesheets[all][] = css/style.css
stylesheets[print][] = css/print.css
stylesheets[all and (min-width: 600px)][] = css/grid-600.css
stylesheets[all and (min-width: 600px)][] = css/style-600.css
stylesheets[all and (min-width: 480px)][] = css/style-480.css
stylesheets[all and (min-width: 960px)][] = css/style-960.css
stylesheets[all][] = css/fonts.css

For single file : Write media queries inline in css files

media all and (min-width: 461px) and (max-width: 900px) {
//embed styles here
}

2. Flexible grids

Using a flexible grid, where we define elements proportionately rather than fixed, the design is allowed to change as per user's screen size. This is the fundamental part of any responsive webdesign. This makes possible to use the same base design structure (the grid) across different possible screens.

Using a flexible grid is mostly a matter of writing the right stylesheets, so there is not much interfere from drupal to this. Eg: Omega theme, developed by Jake Strawn.

3. Flexible media

Yes, we also need to be flexible with our images and video.We can set our images / videos[iframes] to have a maximum width of 100%, so they always stay within their containing box. The only drawback is that we have to serve unnecessarily heavy files to some devices.

A solution for this problem comes in the form of a bit of Javascript and the HTML5 attribute "data-fullsrc", allow us to define an alternate image file in an img tag. By using a Javascript and an .htaccess file, the large image will load in screen resolutions over 480px wide. This will avoid an unnecessarily large request on a device that may have limited bandwidth.

Sample tag: 

<img src="images/smallimg.jpg" data-fullsrc="images/bigimg.jpg" />

Javascript then tests for the existence of the HTML5 attribute, "data-fullsrc", in every img tag in the page. The "data-fullsrc" attribute has already been written into the page by the Drupal. This allows Javascript to identify which images are candidates for dynamic rewriting. The "data-fullsrc" attribute points at the large version of the image, while the normal "src" attribute of the images points to the mobile version.

By default, the mobile version of the image will be served if either of the following conditions are true:
a) Javascript is off
b) Check the size of the devices screen, detected by Javascript, is less than 480px wide.
If not, it counts as a non-mobile device. In this case, Javascript loops through all img tags and change/rewrite the value of the "src" attribute to be the value of the "data-fullsrc" attribute and the page will immediately request the full-sized images from the server and display those instead of the 1-pixel rwd-image.gif.

Sven Decabooter started a module ,provides an imagefield formatter that makes it possible to upload a small and large image, and serving to small screen and large screen devices respectively.

 

 

Related Topics