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

7. Project Requirements

8. Two Themes Solution

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

17. Features. Swipe effect

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!