Adaptive & Responsive design Technics, drupal modules and themes

1. Theming for Mobile
devices
Artem Shymko
https://twitter.com/itcross
drupal.org/user/432492
itwebcross@gmail.com
skype: artemshymko

2. Good times were
1. Feel safety
2. Opener for beer on hand
3. Wap, though nobody needs
4. Out of mobile theming
business

3. Smaller phone = less problems

4. Mobile isn’t future
• Internet’s getting
cheaper
• Websites become
smarter
• Mobile devices are
prolonging live time

5. It’s present
& we are addicted!

6. Getting back to Mobile’s stuff
1. Thinking like Mobile Device
2. Adaptive vs Responsive design
3. Technics
4. Extra modules and approaches

13. Responsive design
Ethan Marcote, who coined the term in his book Responsive
The term responsive design can be credited to
Web Design to describe using “fluid grids, fluid images/media &
media queries.” This basically speaks to the layout’s ability to respond to the user’s technology (browser or device) to best
meet the user’s needs.
Although Marcote is credited with the term, he’s really only describing the most modern incarnation of this Web design strategy. The idea of
tailoring a Website based on the user’s technology has been around for quite a while, as developers have always been programming to
accommodate different experiences (like our old friend Internet Explorer). After Marcote’s book was published, his publisher later clarified
their stance on responsive design to mean any technique used to achieve this end, not just fluid grids and media queries. For example, if we
jQuery or other javascripts to adjust the layout along with CSS media queries, that’s also
use
part of a responsive strategy.
by Eric Dyken on June 14, 2012

14. Adaptive design
Aaron Gustafson Adaptive Web Design
is the author of the book . According to
is about creating interfaces that adapt to the
Gustafson, adaptive Web design “
user’s capabilities (in terms of both form and function). ” He also states
that “adaptive web design is just another term for ‘progressive enhancement’ of which responsive web design can (and often should) be an integral part, but
is a more holistic approach to web design in that it also takes into account varying levels of markup, CSS, JavaScript
and assistive technology support .” By these descriptions we can come to the conclusion that adaptive
Websites are those that adapt their design, structure, and content to best meet the needs of their user, with responsive design being a subset of adaptive.
by Eric Dyken on June 14, 2012

15. Still among us?
Don’t forget to ask a question then!

16. Halfway
1. What’s the main purpose of my site?
2. What does my client wants to see?
3. Is it enough for me to use simple
responsive technics or do I need
adaptive design?
4. Which device client could use?
5. Do I care about?

18. What we can do about?
1. Use sub-domain, sub-folder, different domain
2. Create two different themes
3. Use responsive design
4. Create adaptive website

19. Preparation
User Agent Switcher
http://chrispederick.com/work/user-agent-switcher/
Ultimate User Agent Switcher
https://chrome.google.com/webstore/detail/ljfpjnehmoiabkefmnjegmpdddgcdnpo
Web Developer
http://chrispederick.com/work/web-developer/
Google Chrome

20. User Agent switcher

21. Case: meta tag viewport
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1">
1. General explanation:
http://www.quirksmode.org/mobile/viewports2.html
2. Dynamic changes of viewport:
http://www.quirksmode.org/blog/archives/2011/06/dynamically_cha.html

22. Example: meta tag viewport
Without viewport With viewport

23. Case: media queries (in CSS)
@media [media query logic here] { … }
@media screen and (orientation: landscape) { … }
@media screen and (orientation: portrait) { … }
@media screen and (max-width: 400px) { … }
@media screen and (min-width: 400px) and (max-
width: 640px) { … }

24. Case: media queries (files)
<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />
<link rel='stylesheet'
media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
1. General explanation:
http://css-tricks.com/resolution-specific-stylesheets/
2. Few examples:
http://css-tricks.com/css-media-queries/

25. Example: media queries

26. Case: fluid layout
1. Best fluid layout
http://css-tricks.com/the-perfect-fluid-width-layout/

27. Case: grids
Grids are an invisible foundation that
structure the websites we develop and
design. This invisible foundation makes it
possible for rapid development, concise
code, and a much more organized layout.
1. Explanation:
http://dev.w3.org/csswg/css3-grid-layout/
2. Grid systems:
http://spyrestudios.com/css-grid-systems/

28. Case: Drupal themes
ZEN - is a powerful, yet simple, HTML5 starting themewith a
responsive, mobile-first grid design.
Omega - is a highly configurable HTML5/960 grid base theme that is
100% configurable.
Adaptivetheme Mobile - A mobile subtheme for the
HTML5 AdaptiveTheme.
Sky - is a minimal, center aligned, CSS-based, multi-column layout
theme, with Color module support (7.x only), that uses HTML5
and CSS3.
Fusion Mobile - A Fusion Core subtheme targeted for mobile.
Mobile - Clean theme that can be used as a custom theme base.

29. Achieved:
Responsive
Knowledge
1. Viewport
2. Media queries
3. Responsive layout

30. But what is responsive?

31. Same content but different display!

32. Hover, touch, menu format, content
weight, attention points…

33. How to deal with
adaptation?

34. Case: Drupal modules
WURFL - Detects mobile device capabilities.
Browscap - Detects browser type.
Switchtheme - Adds a block to allow users to
switch between enabled themes.
Mobile Plugin - Device detection and image scaling.
Mobile Tools - Browser detection, theme switching
based on device type, redirection to mobile
site, and other features.

35. Case: Context + Mobile Detector
http://drupal.org/project/context_mobile_detect

36. Summary?
1. Ask yourself what your client’s needed
into?
2. What is most efficient to do: separate
domain, different theme, responsive or
adaptive themes?
Use Drupal modules and themes to
simplify your life.

37. Thank you!
Guts, honor and courage to all of you
in your mobile themes developing!
Artem Shymko
https://twitter.com/itcross
drupal.org/user/432492
itwebcross@gmail.com
skype: artemshymko
Guts, honor and courage - three
signs of alcohol intoxication.
@ Californication