Build a responsive website with drupal
Upcoming SlideShare
Loading in...5
×
 

Build a responsive website with drupal

on

  • 4,598 views

Today's approach to website development has moved to responsive designs. Doing the same is fun with Drupal's Omega theme! Get started!

Today's approach to website development has moved to responsive designs. Doing the same is fun with Drupal's Omega theme! Get started!

Statistics

Views

Total Views
4,598
Views on SlideShare
2,998
Embed Views
1,600

Actions

Likes
3
Downloads
26
Comments
0

38 Embeds 1,600

http://shyamala-drupal.blogspot.in 846
http://shyamala-drupal.blogspot.com 328
http://blog.betabasket.net 193
http://shyamala-drupal.blogspot.co.uk 47
http://shyamala-drupal.blogspot.fr 29
http://shyamala-drupal.blogspot.de 28
http://shyamala-drupal.blogspot.ca 17
http://shyamala-drupal.blogspot.com.es 16
http://shyamala-drupal.blogspot.ru 12
http://shyamala-drupal.blogspot.mx 8
http://shyamala-drupal.blogspot.it 8
http://shyamala-drupal.blogspot.com.ar 7
http://shyamala-drupal.blogspot.ro 5
http://shyamala-drupal.blogspot.nl 5
http://shyamala-drupal.blogspot.gr 4
http://shyamala-drupal.blogspot.be 4
http://shyamala-drupal.blogspot.com.au 4
http://shyamala-drupal.blogspot.ae 3
http://shyamala-drupal.blogspot.com.br 3
http://shyamala-drupal.blogspot.jp 3
http://shyamala-drupal.blogspot.kr 3
http://shyamala-drupal.blogspot.sg 3
http://shyamala-drupal.blogspot.cz 2
http://shyamala-drupal.blogspot.sk 2
http://shyamala-drupal.blogspot.dk 2
http://shyamala-drupal.blogspot.co.nz 2
http://shyamala-drupal.blogspot.pt 2
http://drupalseotraining.blogspot.com 2
http://shyamala-drupal.blogspot.ch 2
http://shyamala-drupal.blogspot.se 2
http://webcache.googleusercontent.com 1
http://shyamala-drupal.blogspot.co.il 1
http://translate.googleusercontent.com 1
http://shyamala-drupal.blogspot.no 1
http://shyamala-drupal.blogspot.fi 1
http://shyamala-drupal.blogspot.com.tr 1
http://www.linkedin.com 1
http://shyamala-drupal.blogspot.hu 1
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Build a responsive website with drupal Build a responsive website with drupal Presentation Transcript

  • Build a Responsive Website with Drupal By Shyamala rajaram.shyamala@gmail.com www.unimity.com
  • 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  www.unimity.com
  • Website for Mobile - PastMOBILE DESKTOPm.site.com www.site.com DETECT & REDIRECT Request www.unimity.com
  • Website for Mobile - Present & Future www.unimity.com
  • Flexible GridsUse percentages: allow grow & shrink of webpages      Target / Context = results (5grids) / (8grids) = 62.5% OR (600px) / (960px) = 62.5% www.unimity.com
  • Flexible Grids www.unimity.com
  • Flexible Images - sizes www.unimity.com
  • Flexible Images www.unimity.com
  • Flexible Images - modulesUse max-width to contain images within thegridDrupal modules that support flexible imagesinclude ● responsive_image: http://drupal. org/project/responsive_images ● fasterimages: http://drupal.org/project/fasterimages ● css_emimage: http://drupal.org/project/css_emimage   www.unimity.com
  • CSS3 Media QueriesNot only allows you to target certain devices classes,but can actually inspect the physical characteristics ofdevice rendering the workNew media features, including max-width, device-width,orientation and color    www.unimity.com
  • Apple - auto-adjust featureUse of view-port metatags  www.unimity.com
  • Mobile first appraochEnsure the site works on all devices,devices that do not support Mediaqueries: take a MOBILE FIRSTAPPROACH!global.css -> mobilereponsive.css -> media queries www.unimity.com
  • 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 www.unimity.com
  • Responsive vs Adaptive design "Adaptive web design" refers more to thesecondary and less fluid approach ofadapting existing web designs, ordesigning for controlled adaptation asopposed to a truly fluid and flexible"Responsive" design. www.unimity.com
  • 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 www.unimity.com
  • 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 www.unimity.com
  • www.unimity.com
  • www.unimity.com