w w w . u n i m i t y . c o m

By Shyamalarajaram.shyamala@gmail.com

Build a Responsive Website with Drupal

w w w . u n i m i t y . c o m

Presentation PathWhat are Responsive websites?

● Websites for mobile past, present & future● Flexible Grids ● Flexible images● Css Media queries● What is Mobile first methodology?● Break Points● Responsive vs Adaptive● Drupal 8 & mobile initiative

 

w w w . u n i m i t y . c o m

Website for Mobile - Past

MOBILE

m.site.com

DESKTOP

www.site.com

DETECT & REDIRECT

Request

w w w . u n i m i t y . c o m

Website for Mobile - Present & Future

w w w . u n i m i t y . c o m

Flexible GridsUse percentages: allow grow & shrink of web pages   

 Target / Context = results(5grids) / (8grids) = 62.5% OR(600px) / (960px) = 62.5%

w w w . u n i m i t y . c o m

Flexible Grids

w w w . u n i m i t y . c o m

Flexible Images - sizes

w w w . u n i m i t y . c o m

Flexible Images

w w w . u n i m i t y . c o m

Flexible Images - modules

Use max-width to contain images within the grid

Drupal modules that support flexible images include

● responsive_image: http://drupal.org/project/responsive_images

● fasterimages: http://drupal.org/project/fasterimages● css_emimage: http://drupal.org/project/css_emimage

   

w w w . u n i m i t y . c o m

CSS3 Media QueriesNot only allows you to target certain devices classes, but can actually inspect the physical characteristics of device rendering the workNew media features, including max-width, device-width, orientation and color   

w w w . u n i m i t y . c o m

Apple - auto-adjust feature

Use of view-port metatags 

w w w . u n i m i t y . c o m

Mobile first appraochEnsure the site works on all devices, devices that do not support Media queries: take a MOBILE FIRST APPROACH! global.css -> mobilereponsive.css -> media queries

w w w . u n i m i t y . c o m

Break Points1200px : Larger screens1024px : Smaller desktops & Larger tablets

Landscape768px : Portrait for Larger Tablets,

Landscape for smaller tablets600px : Portrait & Landscape for smaller

layouts & Kindle480px : Landscape mode for smart phones320px : Portrait mode for smart phones

w w w . u n i m i t y . c o m

Responsive vs Adaptive design "Adaptive web design" refers more to the secondary and less fluid approach of adapting existing web designs, or designing for controlled adaptation as opposed to a truly fluid and flexible "Responsive" design.

w w w . u n i m i t y . c o m

Drupal Themes

● omega: http://drupal.org/project/omega

● zen: http://drupal.org/project/zen

● adaptive: http://drupal.org/project/adaptivetheme

● terrain: http://drupal.org/project/terrain

w w w . u n i m i t y . c o m

Drupal 8 & Responsive Designs

● Issue queues tagged as mobile in Drupal 8

● For info on Drupal 8 mobile initiative:http://groups.drupal.org/node/207248

w w w . u n i m i t y . c o m

w w w . u n i m i t y . c o m