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. Swipe effect

by iDangero.us

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!