Responsive website
building approach
Olga Smolyankina & Kate Kalashnikova
Responsibility Solutions
Drupal Themes
Custom CSS

Drupal Modules
Limitations
● limited themes

● limited mobile
devices support

● limited layouts /
schemes

● desktop only

● limited sli...
The Problem
The Problem
The Problem. Breakpoints
Smartphone Portrait

480 px
Smartphone Landscape

768 px
Tablete Portrait

960 px
Tablete Landsca...
Project Requirements
Two Themes Solution
Implementation. Meta tags
width = device-width
initial-scale = 1
minimum-scale = 1
maximum-scale = 1
user-scalable = no
ta...
Implementation. Styles
@media
HTML 5
relative sizes (%)
Media Queries for Standard Devices
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/...
Example of using Media Queries in Drupal7
name = Responsive
description = Responsive theme
core = 7.x
stylesheets[all][] =...
Features. Menus
Nice Menus

vs

SuperFish

1. Nice Menus Module

1. Superfish Module

https://drupal.org/project/nice_menu...
Features. Menus
Features. Click vs Hover
Features. Swipe effect
Features. Swipe effect
by iDangero.us
Features. Video solution
1. Galleria Module
https://drupal.org/project/galleria

2. Galleria Library
http://galleria.io/

...
Features. Video solution

Vimeo videos cannot be played on some
Android mobile devices until you switch them
into a mobile...
Retina display
326 ppi for the smallest
devices (iPhone and
iPod Touch)
264 ppi for mid-sized
devices (iPad)
220 ppi for l...
Features. High-Resolution Images
Drupal modules:
https://drupal.
org/project/cs_adaptive_image Client-side adaptive image
...
Thank you!
Responsive website building approach. Olga Smolyankina and Kate Kalashnikova
Upcoming SlideShare
Loading in …5
×

Responsive website building approach. Olga Smolyankina and Kate Kalashnikova

2,038 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,038
On SlideShare
0
From Embeds
0
Number of Embeds
355
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Responsive website building approach. Olga Smolyankina and Kate Kalashnikova

  1. 1. Responsive website building approach Olga Smolyankina & Kate Kalashnikova
  2. 2. Responsibility Solutions Drupal Themes Custom CSS Drupal Modules
  3. 3. Limitations ● limited themes ● limited mobile devices support ● limited layouts / schemes ● desktop only ● limited sliders / galleries support ● HTML5 only ● Browsecap vs Mobile Detect
  4. 4. The Problem
  5. 5. The Problem
  6. 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. 7. Project Requirements
  8. 8. Two Themes Solution
  9. 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. 10. Implementation. Styles @media HTML 5 relative sizes (%)
  11. 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. 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
  13. 13. 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
  14. 14. Features. Menus
  15. 15. Features. Click vs Hover
  16. 16. Features. Swipe effect
  17. 17. Features. Swipe effect by iDangero.us
  18. 18. Features. Video solution 1. Galleria Module https://drupal.org/project/galleria 2. Galleria Library http://galleria.io/ 3. Field formatter use
  19. 19. 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.
  20. 20. 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)
  21. 21. 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 -
  22. 22. Thank you!

×