SlideShare a Scribd company logo
Responsive Web Design
   for Drupal
   www.responsivewebdesignguild.com




          @emmajanedotnet
          emma@designtotheme.com
I am IAM
Sorry
A boot
 eh?
Drupal
drupal.org/user/1773




                       Photo: morten.dk
                       Legs: walkah
Author / Trainer


http://www.designtotheme.com/workshops
http://www.designtotheme.com/ebooks
</me>
Agenda
●
    Whirlwind tour of responsive web design.
●
    Crash course on base themes in Drupal.
●
    Applying responsive principles to Drupal sites.
●   Case study #1: responsive retrofit
●   Case study #2: using Fusion
●   Awesome give-away
Introduction
In the beginning:
 ● Flexible Layouts


 ● Media queries


 ● Resizeable Images
Flexible Layouts
Screen Sizes
● 320px / 80px per column = 4 columns
● 480px / 80px = 6 columns


● 600px / 80px = 7 columns with extra


  breathing room
● 768px / 80px = 9 columns with extra


  breathing room
● 960px / 80px = 12 columns
Media Queries in HTML
<link rel="stylesheet" type="text/css"
media="screen and (max-width: 320px)”
href="320-and-smaller.css" />
Media Queries in CSS
@media screen and (max-width: 320px) {
  #content, #nav, #sidebar {
    width: 100%;
  }
  #banner {
    display: none;
  }
}
Flexible Content
● Images, Media
● Forms

img, iframe, embed, object, input, form {
    max-width: 100%;
}
Tables
●   Decide how to linearize your data and collapse or
    hide <td>s as appropriate.
IE8 and Lower
● Polyfill: a javascript shim that replicates the
  standard API for older browsers (e.g. for media
  queries, border radius, etc).
● respond.js


● adapt.js – doesn’t serve stuff until it can be used

  by the browser (good for bandwidth)
● modernizr
Viewport Sizes
Adaptive Navigation
Responsive Media Handling
● This is not solved yet. We’re still working on what a “best practice” is.
● Typically a JS script determines screen size and reports back to the server.


● Server then gives predetermined “low bandwidth” content.


● However, small screen doesn't always mean “low bandwidth.” It's just easier to

  make that assumption.
● e.g. http://drupal.org/project/responsive_images
Your Responsive Toolkit
Check out your handout for
resources.
Summary
●   Responsive web sites are “just” sites that squish
    down politely.
●   The technology is harder because of our
    expectations of delivering perfect content.
●   By using existing libraries we can provide an
    acceptable experience to browsers that don't
    support modern tech.
Drupal Themes
Provides “overrides” for any CSS or HTML markup in
Drupal core or contrib modules. Occasionally add
additional effects.
Base Themes Drupal
●   Base themes are a set of improved theming
    defaults over Drupal core.
●   If your base theme doesn't improve Drupal, it's not
    the right base theme for you.
●   http://www.designtotheme.com/blog/base-themes
My Fave Base Themes
●
    Zen has amazing documentation. Use with
    Zen Grids for maximum efficiency.
●
    NineSixty is my go-to theme for quickly banging
    out just about any theme.
●
    Fusion is my go-to theme when I will be handing off
    the site to someone else to maintain who is tech
    savvy and may need to update the layout later on.
Responsive + Drupal = ?
●   Creating a responsive Drupal site can be as simple
    as applying a single style sheet.
●   http://drupal.org/project/domicile_responsive
Planning the Retrofit
● Audit the content on the site.
● Identify content break points.


● Determine page element


  characteristics for each new width.
● Bonus: allocate time for retrofit based


  on visitor stats.
Planning the Retrofit
●   Identify the goal of every type of page.
    “Beauty” is not a page goal. (And if it is, you’re doing it wrong.)

● Audit the content on the site.
● Identify content break points.


● Determine page element characteristics


  for each new width.
● Bonus: allocate time for retrofit based on


  visitor browser stats.
Content Audit
● Find all the different kinds of things you
  display on the site.
● Make a spreadsheet if you have a big site.


● If relevant, note the contextual

  relationships of content pieces (e.g. user
  picture + video submission).
Identify Break Points
● Retrofit is (sort of) a luxury because
  you have real content.
● Use content, not device sizes, to


  determine break points.
● Stretch / expand your browser to


  find where the design “breaks”.
Domicile – Original Design
Domicile – under 960px
Domicile – under 750px
Domicile – under 600px
Page Element Characteristics
● Navigation (reflow)
● Font sizes (allow to adapt)


● Imagery (is it necessary to


  accomplish page goals?)
Flexible Layouts
●Add a new CSS file to your
 theme that will override fixed-
 pixel #ID and .class properties.
stylesheets[all][] = 
responsive­default.css
Media Queries
●   Based on your content’s break
    points, set up the media queries in
    your new CSS file.
@media screen and (max­width: 960px) {}

●   Assign new properties and values
    for containers, fonts and
    navigation.
Revised – Below 960px
Revised – Below 750px
Revised – Below 650px
Below 650px With Nav Fix
Flexible Content
● Reset fixed-width content to be
  fluid.
● Images, Forms, Video


● Maybe also data tables.
Viewport Sizes
● Create a new template file
  html.tpl.php
● Add the relevant meta tags


● Don’t forget to clear Drupal’s


  cache
Maybe Support IE
● Choose and use a polyfill.
● e.g. respond.js
Test Your Site
● Check content reflows.
● Check rich media resizes.


● Check navigation is usable.


● Adjust CSS if necessary.
Retrofit Summary
● Define your goals for each page.
● Ensure your page goals can be


  met for a variety of device sizes.
● Apply relevant CSS media


  queries to ensure content
  “squishes”.
Working with Fusion
Get It For Yourself
The responsive Drupal theme, Alloy, is
available from:
http://drupal.org/project/alloy
Fusion
●   Uses 960gs with 12 columns by default.
●   Uses more than just regions for layout.
●   Uses “skins” to alter the properties of
    blocks for layout.
●   Most configuration done through the
    admin interface.
●   Well documented.
Disclaimer
Fusion is my favourite GUI-based base
theme.
●   I love their team of developers.
●   The skins are great for clients who want
    to extend their site.
●   They don’t rush to market with the latest
    feature. They get it right the first time.
Responsive Features
●   Flexible layouts.
●   Sane media queries with four layouts.
●   Context-aware forms. Need to add responsiveness
    for rich media.
●   Supports older browsers with polyfill css3-
    mediaqueries.js
●   Focuses on “show all” approach, so there are no
    hidden elements eating up bandwidth.
Layouts
●
    Desktop only screen and (min-width:1200px)
●
    Tablet (landscape) only screen and (max-device-width: 1024px) and
    (orientation:landscape), only screen and (min-width:960px) and (max-
    width:1199px) and (min-device-width: 1100px)

●
    Tablet (portrait) only screen and (max-device-width: 1024px) and
    (orientation:portrait), only screen and (min-width:768px) and (max-width:959px)
    and (min-device-width: 1100px)

●
    Mobile only screen and (max-width:759px)
●   These can all be easily adjusted in the UI.
Regions + Blocks
● Fusion relies on the 960gs for its
  regions and block
  configurations.
● You may subdivide any region


  into more columns by assigning
  the width of a block.
Default Layout
Alloy Design
Wireframe
Alloy Responsive
●   Fusion compresses the wireframe for
    desktop -> tablet.
●   The mobile layout is linearized.
●   You can choose the position of the sidebars
    through the UI for each of the layouts.
●   With additional CSS you might want to
    collapse / linearize regions for the the tablet –
    portrait display.
Desktop (1200px)
Tablet – Landscape (960px)
Tablet – Portrait (768px)
Mobile
Applying Skins
Applying Grid Width Skins
Applying Layout Skins
Navigation
● Using superfish JS library.
● No additional adjustments are made


  for mobile-friendly navigation.
● You can make these adjustments


  based on the Domicile retrofit.
● Or look at the beta superfish options


  for touch-friendly navigation.
Get It For Yourself
The responsive Drupal theme, Alloy, is
available from:
http://drupal.org/project/alloy
Give Aways!

     @emmajanedotnet
     emma@designtotheme.com



  www.responsivewebdesignguild.com

More Related Content

Viewers also liked

MarcelGreen.com // Design 2011
MarcelGreen.com // Design 2011MarcelGreen.com // Design 2011
MarcelGreen.com // Design 2011
Adrien Lepage
 
Intro to podcasting
Intro to podcastingIntro to podcasting
Intro to podcasting
Emma Jane Hogbin Westby
 
Periodic Tabe
Periodic TabePeriodic Tabe
Periodic Tabe
ambers2468
 
Presenting you
Presenting youPresenting you
Presenting you
Emma Jane Hogbin Westby
 
Drupal Multi-site for Fun and Profit
Drupal Multi-site for Fun and ProfitDrupal Multi-site for Fun and Profit
Drupal Multi-site for Fun and Profit
Emma Jane Hogbin Westby
 
Was it something I said?
Was it something I said?Was it something I said?
Was it something I said?
Emma Jane Hogbin Westby
 
Managing a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days IrelandManaging a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days Ireland
Emma Jane Hogbin Westby
 

Viewers also liked (8)

MarcelGreen.com // Design 2011
MarcelGreen.com // Design 2011MarcelGreen.com // Design 2011
MarcelGreen.com // Design 2011
 
Intro to podcasting
Intro to podcastingIntro to podcasting
Intro to podcasting
 
Periodic Tabe
Periodic TabePeriodic Tabe
Periodic Tabe
 
Charles Chaplin
Charles ChaplinCharles Chaplin
Charles Chaplin
 
Presenting you
Presenting youPresenting you
Presenting you
 
Drupal Multi-site for Fun and Profit
Drupal Multi-site for Fun and ProfitDrupal Multi-site for Fun and Profit
Drupal Multi-site for Fun and Profit
 
Was it something I said?
Was it something I said?Was it something I said?
Was it something I said?
 
Managing a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days IrelandManaging a Project the Drupal Way - Drupal Open Days Ireland
Managing a Project the Drupal Way - Drupal Open Days Ireland
 

Similar to Responsive Web Design for Drupal, CMS Expo

How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
Jj Jurgens
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
Mario Noble
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
Mike Wilcox
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
SEGIC
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
Valtech UK
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
psophy
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
John Mark ジョンマーク
 
Intro to Responsive Web Design
Intro to Responsive Web DesignIntro to Responsive Web Design
Intro to Responsive Web Design
meghantaylor
 
Spectrum 2015 responsive design
Spectrum 2015   responsive designSpectrum 2015   responsive design
Spectrum 2015 responsive design
Neil Perlin
 
Design Best Practices for WordPress
Design Best Practices for WordPressDesign Best Practices for WordPress
Design Best Practices for WordPress
Suzette Franck
 
Alexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designingAlexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designing
Ravi Panchal
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
Vitaly Friedman
 
Building Responsive Websites with Drupal
Building Responsive Websites with DrupalBuilding Responsive Websites with Drupal
Building Responsive Websites with Drupal
Suzanne Dergacheva
 
Spectrum 16 pmc 16 - preparing legacy projects for responsive design
Spectrum 16   pmc 16 - preparing legacy projects for responsive designSpectrum 16   pmc 16 - preparing legacy projects for responsive design
Spectrum 16 pmc 16 - preparing legacy projects for responsive design
Neil Perlin
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
Thomas Carney
 
Design responsively
Design responsivelyDesign responsively
Design responsively
Célia Leocádio
 
Optimal Mobile Web Experiences
Optimal Mobile Web ExperiencesOptimal Mobile Web Experiences
Optimal Mobile Web Experiences
Daniel Stout
 
Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hat
Neil Perlin
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
Ben MacNeill
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
mintersam
 

Similar to Responsive Web Design for Drupal, CMS Expo (20)

How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
 
Html 5 mobile - nitty gritty
Html 5 mobile - nitty grittyHtml 5 mobile - nitty gritty
Html 5 mobile - nitty gritty
 
Great Responsive-ability Web Design
Great Responsive-ability Web DesignGreat Responsive-ability Web Design
Great Responsive-ability Web Design
 
Responsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needsResponsive Web Designed for your communication and marketing needs
Responsive Web Designed for your communication and marketing needs
 
An Introduction to Responsive Design
An Introduction to Responsive DesignAn Introduction to Responsive Design
An Introduction to Responsive Design
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
Intro to Responsive Web Design
Intro to Responsive Web DesignIntro to Responsive Web Design
Intro to Responsive Web Design
 
Spectrum 2015 responsive design
Spectrum 2015   responsive designSpectrum 2015   responsive design
Spectrum 2015 responsive design
 
Design Best Practices for WordPress
Design Best Practices for WordPressDesign Best Practices for WordPress
Design Best Practices for WordPress
 
Alexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designingAlexa IT Solution Responsive Web designing
Alexa IT Solution Responsive Web designing
 
Responsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and TechniquesResponsive Web Design: Clever Tips and Techniques
Responsive Web Design: Clever Tips and Techniques
 
Building Responsive Websites with Drupal
Building Responsive Websites with DrupalBuilding Responsive Websites with Drupal
Building Responsive Websites with Drupal
 
Spectrum 16 pmc 16 - preparing legacy projects for responsive design
Spectrum 16   pmc 16 - preparing legacy projects for responsive designSpectrum 16   pmc 16 - preparing legacy projects for responsive design
Spectrum 16 pmc 16 - preparing legacy projects for responsive design
 
Responsivedesign 7-3-2012
Responsivedesign 7-3-2012Responsivedesign 7-3-2012
Responsivedesign 7-3-2012
 
Design responsively
Design responsivelyDesign responsively
Design responsively
 
Optimal Mobile Web Experiences
Optimal Mobile Web ExperiencesOptimal Mobile Web Experiences
Optimal Mobile Web Experiences
 
Lavacon 2014 responsive design in your hat
Lavacon 2014   responsive design in your hatLavacon 2014   responsive design in your hat
Lavacon 2014 responsive design in your hat
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Mobile Best Practices
Mobile Best PracticesMobile Best Practices
Mobile Best Practices
 

More from Emma Jane Hogbin Westby

HOWTO Empathy
HOWTO EmpathyHOWTO Empathy
Getting a CLUE at the Command Line
Getting a CLUE at the Command LineGetting a CLUE at the Command Line
Getting a CLUE at the Command Line
Emma Jane Hogbin Westby
 
Lessons From an Unlikely Superhero
Lessons From an Unlikely SuperheroLessons From an Unlikely Superhero
Lessons From an Unlikely Superhero
Emma Jane Hogbin Westby
 
PSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS WayPSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS Way
Emma Jane Hogbin Westby
 
Git Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon PragueGit Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon Prague
Emma Jane Hogbin Westby
 
Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
Emma Jane Hogbin Westby
 
Was It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A CritiqueWas It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A Critique
Emma Jane Hogbin Westby
 
Beyond the Bikeshed
Beyond the BikeshedBeyond the Bikeshed
Beyond the Bikeshed
Emma Jane Hogbin Westby
 
Gamestorming Meets Quiet
Gamestorming Meets QuietGamestorming Meets Quiet
Gamestorming Meets Quiet
Emma Jane Hogbin Westby
 
Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
Emma Jane Hogbin Westby
 
Work Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small TeamsWork Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small Teams
Emma Jane Hogbin Westby
 
Evaluating Base Themes
Evaluating Base ThemesEvaluating Base Themes
Evaluating Base Themes
Emma Jane Hogbin Westby
 
Speaker Check-in - 3 - Munich
Speaker Check-in - 3 - MunichSpeaker Check-in - 3 - Munich
Speaker Check-in - 3 - Munich
Emma Jane Hogbin Westby
 
Drupal Flyover, CMS Expo
Drupal Flyover, CMS ExpoDrupal Flyover, CMS Expo
Drupal Flyover, CMS Expo
Emma Jane Hogbin Westby
 
Selling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp TorontoSelling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp Toronto
Emma Jane Hogbin Westby
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
Emma Jane Hogbin Westby
 
Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
Emma Jane Hogbin Westby
 
There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010
Emma Jane Hogbin Westby
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Emma Jane Hogbin Westby
 
Advanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpoAdvanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpo
Emma Jane Hogbin Westby
 

More from Emma Jane Hogbin Westby (20)

HOWTO Empathy
HOWTO EmpathyHOWTO Empathy
HOWTO Empathy
 
Getting a CLUE at the Command Line
Getting a CLUE at the Command LineGetting a CLUE at the Command Line
Getting a CLUE at the Command Line
 
Lessons From an Unlikely Superhero
Lessons From an Unlikely SuperheroLessons From an Unlikely Superhero
Lessons From an Unlikely Superhero
 
PSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS WayPSD to Theme: The SMACSS Way
PSD to Theme: The SMACSS Way
 
Git Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon PragueGit Makes Me Angry Inside - DrupalCon Prague
Git Makes Me Angry Inside - DrupalCon Prague
 
Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
 
Was It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A CritiqueWas It Something I Said? The Art of Giving (and getting) A Critique
Was It Something I Said? The Art of Giving (and getting) A Critique
 
Beyond the Bikeshed
Beyond the BikeshedBeyond the Bikeshed
Beyond the Bikeshed
 
Gamestorming Meets Quiet
Gamestorming Meets QuietGamestorming Meets Quiet
Gamestorming Meets Quiet
 
Git Makes Me Angry Inside
Git Makes Me Angry InsideGit Makes Me Angry Inside
Git Makes Me Angry Inside
 
Work Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small TeamsWork Flow for Solo Developers and Small Teams
Work Flow for Solo Developers and Small Teams
 
Evaluating Base Themes
Evaluating Base ThemesEvaluating Base Themes
Evaluating Base Themes
 
Speaker Check-in - 3 - Munich
Speaker Check-in - 3 - MunichSpeaker Check-in - 3 - Munich
Speaker Check-in - 3 - Munich
 
Drupal Flyover, CMS Expo
Drupal Flyover, CMS ExpoDrupal Flyover, CMS Expo
Drupal Flyover, CMS Expo
 
Selling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp TorontoSelling Hopes and Dreams - DrupalCamp Toronto
Selling Hopes and Dreams - DrupalCamp Toronto
 
Forensic Theming - DrupalCon London
Forensic Theming - DrupalCon LondonForensic Theming - DrupalCon London
Forensic Theming - DrupalCon London
 
Forensic Theming for Drupal
Forensic Theming for DrupalForensic Theming for Drupal
Forensic Theming for Drupal
 
There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010There's a Module for That, MIMA Summit 2010
There's a Module for That, MIMA Summit 2010
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010Intro to Theming Drupal, FOSSLC Summer Camp 2010
Intro to Theming Drupal, FOSSLC Summer Camp 2010
 
Advanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpoAdvanced Layout Techniques @ CMSExpo
Advanced Layout Techniques @ CMSExpo
 

Recently uploaded

The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
Razin Mustafiz
 
Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024
Michael Price
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
sunilverma7884
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
Jimmy Lai
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
Priyanka Aash
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
alexjohnson7307
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
Baishakhi Ray
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
BrainSell Technologies
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
siddu769252
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
Bhajan Mehta
 
NVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space ExplorationNVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space Exploration
Alison B. Lowndes
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
shyamraj55
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
alexjohnson7307
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
ankush9927
 
Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...
Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...
Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...
OnBoard
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
Google Developer Group - Harare
 
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Zilliz
 
What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024
Stephanie Beckett
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
Brian Pichman
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
DianaGray10
 

Recently uploaded (20)

The Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - CoatueThe Path to General-Purpose Robots - Coatue
The Path to General-Purpose Robots - Coatue
 
Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024Perth MuleSoft Meetup July 2024
Perth MuleSoft Meetup July 2024
 
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
Girls call Kolkata 👀 XXXXXXXXXXX 👀 Rs.9.5 K Cash Payment With Room Delivery
 
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python CodebaseEuroPython 2024 - Streamlining Testing in a Large Python Codebase
EuroPython 2024 - Streamlining Testing in a Large Python Codebase
 
Redefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI CapabilitiesRedefining Cybersecurity with AI Capabilities
Redefining Cybersecurity with AI Capabilities
 
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
leewayhertz.com-AI agents for healthcare Applications benefits and implementa...
 
Semantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software DevelopmentSemantic-Aware Code Model: Elevating the Future of Software Development
Semantic-Aware Code Model: Elevating the Future of Software Development
 
Acumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptxAcumatica vs. Sage Intacct _Construction_July (1).pptx
Acumatica vs. Sage Intacct _Construction_July (1).pptx
 
Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024Generative AI Reasoning Tech Talk - July 2024
Generative AI Reasoning Tech Talk - July 2024
 
Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17Mule Experience Hub and Release Channel with Java 17
Mule Experience Hub and Release Channel with Java 17
 
NVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space ExplorationNVIDIA at Breakthrough Discuss for Space Exploration
NVIDIA at Breakthrough Discuss for Space Exploration
 
Integrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecaseIntegrating Kafka with MuleSoft 4 and usecase
Integrating Kafka with MuleSoft 4 and usecase
 
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
leewayhertz.com-Generative AI tech stack Frameworks infrastructure models and...
 
Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10Computer HARDWARE presenattion by CWD students class 10
Computer HARDWARE presenattion by CWD students class 10
 
Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...
Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...
Mastering Board Best Practices: Essential Skills for Effective Non-profit Lea...
 
Google I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged SlidesGoogle I/O Extended Harare Merged Slides
Google I/O Extended Harare Merged Slides
 
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
Garbage In, Garbage Out: Why poor data curation is killing your AI models (an...
 
What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024What's New in Teams Calling, Meetings, Devices June 2024
What's New in Teams Calling, Meetings, Devices June 2024
 
Uncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in LibrariesUncharted Together- Navigating AI's New Frontiers in Libraries
Uncharted Together- Navigating AI's New Frontiers in Libraries
 
How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...How UiPath Discovery Suite supports identification of Agentic Process Automat...
How UiPath Discovery Suite supports identification of Agentic Process Automat...
 

Responsive Web Design for Drupal, CMS Expo

  • 1. Responsive Web Design for Drupal www.responsivewebdesignguild.com @emmajanedotnet emma@designtotheme.com
  • 4. Drupal drupal.org/user/1773 Photo: morten.dk Legs: walkah
  • 7. Agenda ● Whirlwind tour of responsive web design. ● Crash course on base themes in Drupal. ● Applying responsive principles to Drupal sites. ● Case study #1: responsive retrofit ● Case study #2: using Fusion ● Awesome give-away
  • 8. Introduction In the beginning: ● Flexible Layouts ● Media queries ● Resizeable Images
  • 10. Screen Sizes ● 320px / 80px per column = 4 columns ● 480px / 80px = 6 columns ● 600px / 80px = 7 columns with extra breathing room ● 768px / 80px = 9 columns with extra breathing room ● 960px / 80px = 12 columns
  • 11. Media Queries in HTML <link rel="stylesheet" type="text/css" media="screen and (max-width: 320px)” href="320-and-smaller.css" />
  • 12. Media Queries in CSS @media screen and (max-width: 320px) { #content, #nav, #sidebar { width: 100%; } #banner { display: none; } }
  • 13. Flexible Content ● Images, Media ● Forms img, iframe, embed, object, input, form { max-width: 100%; }
  • 14. Tables ● Decide how to linearize your data and collapse or hide <td>s as appropriate.
  • 15. IE8 and Lower ● Polyfill: a javascript shim that replicates the standard API for older browsers (e.g. for media queries, border radius, etc). ● respond.js ● adapt.js – doesn’t serve stuff until it can be used by the browser (good for bandwidth) ● modernizr
  • 18. Responsive Media Handling ● This is not solved yet. We’re still working on what a “best practice” is. ● Typically a JS script determines screen size and reports back to the server. ● Server then gives predetermined “low bandwidth” content. ● However, small screen doesn't always mean “low bandwidth.” It's just easier to make that assumption. ● e.g. http://drupal.org/project/responsive_images
  • 19. Your Responsive Toolkit Check out your handout for resources.
  • 20. Summary ● Responsive web sites are “just” sites that squish down politely. ● The technology is harder because of our expectations of delivering perfect content. ● By using existing libraries we can provide an acceptable experience to browsers that don't support modern tech.
  • 21. Drupal Themes Provides “overrides” for any CSS or HTML markup in Drupal core or contrib modules. Occasionally add additional effects.
  • 22. Base Themes Drupal ● Base themes are a set of improved theming defaults over Drupal core. ● If your base theme doesn't improve Drupal, it's not the right base theme for you. ● http://www.designtotheme.com/blog/base-themes
  • 23. My Fave Base Themes ● Zen has amazing documentation. Use with Zen Grids for maximum efficiency. ● NineSixty is my go-to theme for quickly banging out just about any theme. ● Fusion is my go-to theme when I will be handing off the site to someone else to maintain who is tech savvy and may need to update the layout later on.
  • 24. Responsive + Drupal = ? ● Creating a responsive Drupal site can be as simple as applying a single style sheet. ● http://drupal.org/project/domicile_responsive
  • 25. Planning the Retrofit ● Audit the content on the site. ● Identify content break points. ● Determine page element characteristics for each new width. ● Bonus: allocate time for retrofit based on visitor stats.
  • 26. Planning the Retrofit ● Identify the goal of every type of page. “Beauty” is not a page goal. (And if it is, you’re doing it wrong.) ● Audit the content on the site. ● Identify content break points. ● Determine page element characteristics for each new width. ● Bonus: allocate time for retrofit based on visitor browser stats.
  • 27. Content Audit ● Find all the different kinds of things you display on the site. ● Make a spreadsheet if you have a big site. ● If relevant, note the contextual relationships of content pieces (e.g. user picture + video submission).
  • 28. Identify Break Points ● Retrofit is (sort of) a luxury because you have real content. ● Use content, not device sizes, to determine break points. ● Stretch / expand your browser to find where the design “breaks”.
  • 33. Page Element Characteristics ● Navigation (reflow) ● Font sizes (allow to adapt) ● Imagery (is it necessary to accomplish page goals?)
  • 34. Flexible Layouts ●Add a new CSS file to your theme that will override fixed- pixel #ID and .class properties. stylesheets[all][] =  responsive­default.css
  • 35. Media Queries ● Based on your content’s break points, set up the media queries in your new CSS file. @media screen and (max­width: 960px) {} ● Assign new properties and values for containers, fonts and navigation.
  • 39. Below 650px With Nav Fix
  • 40. Flexible Content ● Reset fixed-width content to be fluid. ● Images, Forms, Video ● Maybe also data tables.
  • 41. Viewport Sizes ● Create a new template file html.tpl.php ● Add the relevant meta tags ● Don’t forget to clear Drupal’s cache
  • 42. Maybe Support IE ● Choose and use a polyfill. ● e.g. respond.js
  • 43. Test Your Site ● Check content reflows. ● Check rich media resizes. ● Check navigation is usable. ● Adjust CSS if necessary.
  • 44. Retrofit Summary ● Define your goals for each page. ● Ensure your page goals can be met for a variety of device sizes. ● Apply relevant CSS media queries to ensure content “squishes”.
  • 46. Get It For Yourself The responsive Drupal theme, Alloy, is available from: http://drupal.org/project/alloy
  • 47. Fusion ● Uses 960gs with 12 columns by default. ● Uses more than just regions for layout. ● Uses “skins” to alter the properties of blocks for layout. ● Most configuration done through the admin interface. ● Well documented.
  • 48. Disclaimer Fusion is my favourite GUI-based base theme. ● I love their team of developers. ● The skins are great for clients who want to extend their site. ● They don’t rush to market with the latest feature. They get it right the first time.
  • 49. Responsive Features ● Flexible layouts. ● Sane media queries with four layouts. ● Context-aware forms. Need to add responsiveness for rich media. ● Supports older browsers with polyfill css3- mediaqueries.js ● Focuses on “show all” approach, so there are no hidden elements eating up bandwidth.
  • 50. Layouts ● Desktop only screen and (min-width:1200px) ● Tablet (landscape) only screen and (max-device-width: 1024px) and (orientation:landscape), only screen and (min-width:960px) and (max- width:1199px) and (min-device-width: 1100px) ● Tablet (portrait) only screen and (max-device-width: 1024px) and (orientation:portrait), only screen and (min-width:768px) and (max-width:959px) and (min-device-width: 1100px) ● Mobile only screen and (max-width:759px) ● These can all be easily adjusted in the UI.
  • 51. Regions + Blocks ● Fusion relies on the 960gs for its regions and block configurations. ● You may subdivide any region into more columns by assigning the width of a block.
  • 55. Alloy Responsive ● Fusion compresses the wireframe for desktop -> tablet. ● The mobile layout is linearized. ● You can choose the position of the sidebars through the UI for each of the layouts. ● With additional CSS you might want to collapse / linearize regions for the the tablet – portrait display.
  • 63. Navigation ● Using superfish JS library. ● No additional adjustments are made for mobile-friendly navigation. ● You can make these adjustments based on the Domicile retrofit. ● Or look at the beta superfish options for touch-friendly navigation.
  • 64. Get It For Yourself The responsive Drupal theme, Alloy, is available from: http://drupal.org/project/alloy
  • 65. Give Aways! @emmajanedotnet emma@designtotheme.com www.responsivewebdesignguild.com