Theming for Mobile devicesArtem Shymkohttps://twitter.com/itcrossdrupal.org/user/432492itwebcross@gmail.comskype: artemshymko

Good times were

1. Feel safety

2. Opener for beer on hand

3. Wap, though nobody needs

4. Out of mobile theming

business

Smaller phone = less problems

Mobile isn’t future• Internet’s getting

cheaper• Websites become

smarter• Mobile devices are

prolonging live time

It’s present & we are addicted!

Getting back to Mobile’s stuff

1. Thinking like Mobile Device

2. Adaptive vs Responsive design

3. Technics

4. Extra modules and approaches

Responsive designThe term responsive design can be credited to Ethan Marcote, who coined the term in his book Responsive 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

use jQuery or other javascripts to adjust the layout along with CSS media queries, that’s also part of a responsive strategy.

by Eric Dyken on June 14, 2012

Adaptive designAaron Gustafson is the author of the book Adaptive Web Design. According to Gustafson,

adaptive Web design “is about creating interfaces that adapt to the 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

Still among us?

Don’t forget to ask a question then!

Halfway1. 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?

What we can do about?1. Use sub-domain, sub-folder, different domain2. Create two different themes

3. Use responsive design4. Create adaptive website

Preparation

User Agent Switcherhttp://chrispederick.com/work/user-agent-switcher/

Web Developerhttp://chrispederick.com/work/web-developer/

Ultimate User Agent Switcherhttps://chrome.google.com/webstore/detail/ljfpjnehmoiabkefmnjegmpdddgcdnpo

Google Chrome

User Agent switcher

Case: meta tag viewport

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

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Example: meta tag viewport

Without viewport With viewport

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) { … }

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/

Example: media queries

Case: fluid layout

1. Best fluid layouthttp://css-tricks.com/the-perfect-fluid-width-layout/

Case: gridsGrids 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/

Case: Drupal themesZEN - 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.

Achieved:ResponsiveKnowledge

1. Viewport2. Media queries3. Responsive layout

But what is responsive?

Same content but different display!

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

How to deal with adaptation?

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.

Case: Context + Mobile Detectorhttp://drupal.org/project/context_mobile_detect

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.

Guts, honor and courage - three signs of alcohol intoxication.

@ Californication

Thank you!Guts, honor and courage to all of you

in your mobile themes developing!

Artem Shymkohttps://twitter.com/itcrossdrupal.org/user/432492itwebcross@gmail.comskype: artemshymko