• Like
  • Save
Responsive website building approach. Olga Smolyankina and Kate Kalashnikova
Upcoming SlideShare
Loading in...5
×
 

Responsive website building approach. Olga Smolyankina and Kate Kalashnikova

on

  • 1,276 views

 

Statistics

Views

Total Views
1,276
Views on SlideShare
1,082
Embed Views
194

Actions

Likes
0
Downloads
13
Comments
0

5 Embeds 194

http://www.rocketsmedia.ru 110
http://www.adcisolutions.com 34
http://rocketsmedia.ru 29
http://adcisolutions.com 20
http://www.translate.ru 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Responsive website building approach. Olga Smolyankina and Kate Kalashnikova Responsive website building approach. Olga Smolyankina and Kate Kalashnikova Presentation Transcript

    • 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 sliders / galleries support ● HTML5 only ● Browsecap vs Mobile Detect
    • The Problem
    • The Problem
    • 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
    • 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 @media HTML 5 relative 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 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
    • 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
    • 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 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 -
    • Thank you!