Responsive website building approach. Olga Smolyankina and Kate Kalashnikova
0 likes•2,235 views
The document discusses responsive website development approaches for Drupal. It outlines some limitations of only using themes and modules, and recommends a two-theme solution with specific breakpoints. Media queries are demonstrated for standard devices, and features like menus, video, and high resolution images are addressed through modules and client-side solutions.
![Example of using Media Queries in Drupal7
name = Responsive
description = Responsive theme
core = 7.x
stylesheets[all][] = css/main.css
stylesheets[(min-width: 480px)][] = css/480.css
stylesheets[(min-width: 768px)][] = css/768.css
stylesheets[(min-width: 1024px)][] = css/1024.css
stylesheets[(min-width: 1280px)][] = css/1280.css](https://image.slidesharecdn.com/responsivewebsitebuildingapproach-131027205900-phpapp02/85/Responsive-website-building-approach-Olga-Smolyankina-and-Kate-Kalashnikova-12-320.jpg)
Responsive website building approach. Olga Smolyankina and Kate Kalashnikova
- 1. Responsive website building approach Olga Smolyankina & Kate Kalashnikova
- 2. Responsibility Solutions Drupal Themes Custom CSS Drupal Modules
- 3. Limitations ● limited themes ● limited mobile devices support ● limited layouts / schemes ● desktop only ● limited sliders / galleries support ● HTML5 only ● Browsecap vs Mobile Detect
- 4. The Problem
- 5. The Problem
- 6. The Problem. Breakpoints Smartphone Portrait 480 px Smartphone Landscape 768 px Tablete Portrait 960 px Tablete Landscape 1024 px Desktop / Laptop 1280 px Wide Screen 320 px
- 9. Implementation. Meta tags width = device-width initial-scale = 1 minimum-scale = 1 maximum-scale = 1 user-scalable = no target-densitydpi = device-dpi path_to_theme / template.php
- 10. Implementation. Styles @media HTML 5 relative sizes (%)
- 11. Media Queries for Standard Devices /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ }
- 12. Example of using Media Queries in Drupal7 name = Responsive description = Responsive theme core = 7.x stylesheets[all][] = css/main.css stylesheets[(min-width: 480px)][] = css/480.css stylesheets[(min-width: 768px)][] = css/768.css stylesheets[(min-width: 1024px)][] = css/1024.css stylesheets[(min-width: 1280px)][] = css/1280.css
- 14. Features. Menus Nice Menus vs SuperFish 1. Nice Menus Module 1. Superfish Module https://drupal.org/project/nice_menus https://drupal.org/project/superfish 2. Superfish-for-Drupal Library 2. Superfish-for-Drupal Library https://github.com/mehrpadin/Superfish-for-Drupal https://github.com/mehrpadin/Superfish-for-Drupal 3. jQuery
- 15. Features. Menus
- 16. Features. Click vs Hover
- 18. Features. Swipe effect by iDangero.us
- 19. Features. Video solution 1. Galleria Module https://drupal.org/project/galleria 2. Galleria Library http://galleria.io/ 3. Field formatter use
- 20. Features. Video solution Vimeo videos cannot be played on some Android mobile devices until you switch them into a mobile regime in your Vimeo account.
- 21. Retina display 326 ppi for the smallest devices (iPhone and iPod Touch) 264 ppi for mid-sized devices (iPad) 220 ppi for larger devices (MacBook Pro)
- 22. Features. High-Resolution Images Drupal modules: https://drupal. org/project/cs_adaptive_image Client-side adaptive image https://drupal. org/project/retina_images - Retina images https://drupal.org/project/resp_img -
- 23. Thank you!