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

1. Build a Responsive Website
with Drupal
By Shyamala
rajaram.shyamala@gmail.com
www.unimity.com

2. Presentation Path
What 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

3. Website for Mobile - Past
MOBILE DESKTOP
m.site.com www.site.com
DETECT &
REDIRECT
Request
www.unimity.com

4. Website for Mobile - Present &
Future
www.unimity.com

5. Flexible Grids
Use percentages: allow grow & shrink of web
pages
Target / Context = results
(5grids) / (8grids) = 62.5%
OR
(600px) / (960px) = 62.5%
www.unimity.com

6. Flexible Grids
www.unimity.com

7. Flexible Images - sizes
www.unimity.com

8. Flexible Images
www.unimity.com

9. 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
www.unimity.com

10. CSS3 Media Queries
Not only allows you to target certain devices classes,
but can actually inspect the physical characteristics of
device rendering the work
New media features, including max-width, device-width,
orientation and color
www.unimity.com

11. Apple - auto-adjust feature
Use of view-port metatags
www.unimity.com

12. Mobile first appraoch
Ensure the site works on all devices,
devices that do not support Media
queries: take a MOBILE FIRST
APPROACH!
global.css -> mobile
reponsive.css -> media queries
www.unimity.com

13. Break Points
1200px : Larger screens
1024px : Smaller desktops & Larger tablets
Landscape
768px : Portrait for Larger Tablets,
Landscape for smaller tablets
600px : Portrait & Landscape for smaller
layouts & Kindle
480px : Landscape mode for smart phones
320px : Portrait mode for smart phones
www.unimity.com

14. 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.
www.unimity.com

15. 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

16. 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

17. www.unimity.com

18. www.unimity.com