Embed Size (px)
DESCRIPTION
Today's approach to website development has moved to responsive designs. Doing the same is fun with Drupal's Omega theme! Get started!
Citation preview
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
