How to Troubleshoot Apps for the Modern Connected Worker
Build a responsive website with drupal
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
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
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
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