Your SlideShare is downloading. ×
Theming for mobile devices recent
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Theming for mobile devices recent

968

Published on

Adaptive & Responsive design …

Adaptive & Responsive design
Technics, drupal modules and themes

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

  • Be the first to like this

No Downloads
Views
Total Views
968
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
16
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 7. Responsive design Ethan Marcote, who coined the term in his book ResponsiveThe term responsive design can be credited toWeb 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 bestmeet 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 oftailoring a Website based on the user’s technology has been around for quite a while, as developers have always been programming toaccommodate different experiences (like our old friend Internet Explorer). After Marcote’s book was published, his publisher later clarifiedtheir 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 alsousepart of a responsive strategy. by Eric Dyken on June 14, 2012
  • 8. Adaptive designAaron Gustafson Adaptive Web Design is the author of the book . According to is about creating interfaces that adapt to theGustafson, adaptive Web design “user’s capabilities (in terms of both form and function). ” He also statesthat “adaptive web design is just another term for ‘progressive enhancement’ of which responsive web design can (and often should) be an integral part, butis a more holistic approach to web design in that it also takes into account varying levels of markup, CSS, JavaScriptand assistive technology support .” By these descriptions we can come to the conclusion that adaptiveWebsites 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
  • 9. Still among us?Don’t forget to ask a question then!
  • 10. 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?
  • 11. What we can do about?1. Use sub-domain, sub-folder, different domain2. Create two different themes3. Use responsive design4. Create adaptive website
  • 12. PreparationUser Agent Switcherhttp://chrispederick.com/work/user-agent-switcher/Ultimate User Agent Switcherhttps://chrome.google.com/webstore/detail/ljfpjnehmoiabkefmnjegmpdddgcdnpoWeb Developerhttp://chrispederick.com/work/web-developer/Google Chrome
  • 13. User Agent switcher
  • 14. 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
  • 15. Example: meta tag viewport Without viewport With viewport
  • 16. 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) { … }
  • 17. Case: media queries (files)<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" /><link rel=stylesheetmedia=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/
  • 18. Example: media queries
  • 19. Case: fluid layout1. Best fluid layouthttp://css-tricks.com/the-perfect-fluid-width-layout/
  • 20. 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/
  • 21. Case: Drupal themesZEN - is a powerful, yet simple, HTML5 starting themewith aresponsive, mobile-first grid design.Omega - is a highly configurable HTML5/960 grid base theme that is100% configurable.Adaptivetheme Mobile - A mobile subtheme for theHTML5 AdaptiveTheme.Sky - is a minimal, center aligned, CSS-based, multi-column layouttheme, with Color module support (7.x only), that uses HTML5and CSS3.Fusion Mobile - A Fusion Core subtheme targeted for mobile.Mobile - Clean theme that can be used as a custom theme base.
  • 22. Achieved:ResponsiveKnowledge1. Viewport2. Media queries3. Responsive layout
  • 23. But what is responsive?
  • 24. Same content but different display!
  • 25. Hover, touch, menu format, content weight, attention points…
  • 26. How to deal with adaptation?
  • 27. Case: Drupal modulesWURFL - Detects mobile device capabilities.Browscap - Detects browser type.Switchtheme - Adds a block to allow users toswitch between enabled themes.Mobile Plugin - Device detection and image scaling.Mobile Tools - Browser detection, theme switchingbased on device type, redirection to mobilesite, and other features.
  • 28. Case: Context + Mobile Detector http://drupal.org/project/context_mobile_detect
  • 29. Summary?1. Ask yourself what your client’s neededinto?2. What is most efficient to do: separatedomain, different theme, responsive oradaptive themes?Use Drupal modules and themes tosimplify your life.
  • 30. 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

×