responsive website building approach. olga smolyankina and kate kalashnikova
TRANSCRIPT
Responsive website building approachOlga Smolyankina & Kate Kalashnikova
Responsibility Solutions
Drupal Themes Custom CSS
Drupal Modules
Limitations
● limited themes
● limited layouts / schemes
● limited sliders / galleries support
● limited mobile devices support
● desktop only
● HTML5 only
● Browsecap vs Mobile Detect
The Problem
The Problem
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
Project Requirements
Two Themes Solution
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
Implementation. Styles
@mediaHTML 5relative sizes (%)
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 */}
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
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
Features. Menus
Features. Click vs Hover
Features. Swipe effect
Features. Video solution
1. Galleria Module
https://drupal.org/project/galleria
2. Galleria Library
http://galleria.io/
3. Field formatter use
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.
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)
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
Thank you!