responsive website building approach. olga smolyankina and kate kalashnikova
TRANSCRIPT
![Page 1: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/1.jpg)
Responsive website building approachOlga Smolyankina & Kate Kalashnikova
![Page 2: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/2.jpg)
Responsibility Solutions
Drupal Themes Custom CSS
Drupal Modules
![Page 3: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/3.jpg)
Limitations
● limited themes
● limited layouts / schemes
● limited sliders / galleries support
● limited mobile devices support
● desktop only
● HTML5 only
● Browsecap vs Mobile Detect
![Page 4: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/4.jpg)
The Problem
![Page 5: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/5.jpg)
The Problem
![Page 6: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/6.jpg)
The Problem. Breakpoints320 px
Smartphone Portrait
480 px Smartphone Landscape
768 px Tablete Portrait
960 px Tablete Landscape
1024 px Desktop / Laptop
1280 px Wide Screen
![Page 7: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/7.jpg)
Project Requirements
![Page 8: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/8.jpg)
Two Themes Solution
![Page 9: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/9.jpg)
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
![Page 10: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/10.jpg)
Implementation. Styles
@mediaHTML 5relative sizes (%)
![Page 11: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/11.jpg)
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 */}
![Page 12: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/12.jpg)
Example of using Media Queries in Drupal7
name = Responsive description = Responsive themecore = 7.x stylesheets[all][] = css/main.cssstylesheets[(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
![Page 13: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/13.jpg)
![Page 14: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/14.jpg)
Features. Menus
Nice Menus vs SuperFish
1. Superfish Module
https://drupal.org/project/superfish
2. Superfish-for-Drupal Library
https://github.com/mehrpadin/Superfish-for-Drupal
1. Nice Menus Module
https://drupal.org/project/nice_menus
2. Superfish-for-Drupal Library
https://github.com/mehrpadin/Superfish-for-Drupal
3. jQuery
![Page 16: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/16.jpg)
Features. Click vs Hover
![Page 17: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/17.jpg)
Features. Swipe effect
![Page 19: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/19.jpg)
Features. Video solution
1. Galleria Module
https://drupal.org/project/galleria
2. Galleria Library
http://galleria.io/
3. Field formatter use
![Page 20: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/20.jpg)
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.
![Page 21: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/21.jpg)
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)
![Page 22: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/22.jpg)
Features. High-Resolution ImagesDrupal 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 -
Responsive images
![Page 23: Responsive website building approach. Olga Smolyankina and Kate Kalashnikova](https://reader033.vdocuments.net/reader033/viewer/2022060109/5555c8ded8b42aaf158b494e/html5/thumbnails/23.jpg)
Thank you!