SlideShare a Scribd company logo
1 of 18
Download to read offline
Build a Responsive Website
        with Drupal



          By Shyamala
  rajaram.shyamala@gmail.com


                          www.unimity.com
Presentation Path
What are Responsive websites?
  ● Websites for mobile past, present & future

  ● Flexible Grids

  ● Flexible images

  ● Css Media queries

  ● What is Mobile first methodology?

  ● Break Points

  ● Responsive vs Adaptive

  ● Drupal 8 & mobile initiative

 

                                  www.unimity.com
Website for Mobile - Past

MOBILE                   DESKTOP

m.site.com               www.site.com


             DETECT &
             REDIRECT

               Request




                            www.unimity.com
Website for Mobile - Present &
            Future




                      www.unimity.com
Flexible Grids
Use percentages: allow grow & shrink of web
pages
 
         
        Target / Context = results
       (5grids) / (8grids) = 62.5%
       OR
       (600px) / (960px) = 62.5%




                                     www.unimity.com
Flexible Grids




                 www.unimity.com
Flexible Images - sizes




                   www.unimity.com
Flexible Images




              www.unimity.com
Flexible Images - modules
Use max-width to contain images within the
grid

Drupal modules that support flexible images
include
 ● responsive_image: http://drupal.

        org/project/responsive_images
    ●   fasterimages: http://drupal.org/project/fasterimages
    ●   css_emimage:      http://drupal.org/project/css_emimage
 
                                             www.unimity.com
CSS3 Media Queries
Not only allows you to target certain devices classes,
but can actually inspect the physical characteristics of
device rendering the work
New media features, including max-width, device-width,
orientation and color
 
 
 




                                         www.unimity.com
Apple - auto-adjust feature
Use of view-port metatags
 




                            www.unimity.com
Mobile first appraoch
Ensure the site works on all devices,
devices that do not support Media
queries: take a MOBILE FIRST
APPROACH!

global.css -> mobile
reponsive.css -> media queries



                               www.unimity.com
Break Points
1200px   : Larger screens
1024px   : Smaller desktops & Larger tablets
           Landscape
768px    : Portrait for Larger Tablets,
           Landscape for smaller tablets
600px    : Portrait & Landscape for smaller
           layouts & Kindle
480px    : Landscape mode for smart phones
320px    : Portrait mode for smart phones


                              www.unimity.com
Responsive vs Adaptive design

 "Adaptive web design" refers more to the
secondary and less fluid approach of
adapting existing web designs, or
designing for controlled adaptation as
opposed to a truly fluid and flexible
"Responsive" design.



                              www.unimity.com
Drupal Themes
●   omega: http://drupal.org/project/omega

●   zen: http://drupal.org/project/zen

●   adaptive: http://drupal.org/project/adaptivetheme

●   terrain: http://drupal.org/project/terrain




                                           www.unimity.com
Drupal 8 & Responsive Designs
●   Issue queues tagged as mobile in
    Drupal 8

●   For info on Drupal 8 mobile initiative:
    http://groups.drupal.org/node/207248




                                           www.unimity.com
www.unimity.com
www.unimity.com

More Related Content

Similar to Build a responsive website with drupal

Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI
Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREIResponsive Web Design in Cascade Server, by Chris Cox of BarkleyREI
Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREIhannonhill
 
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 WebsiteJj Jurgens
 
The Rise Of Tablets: Responsive Web Design is in your future
The Rise Of Tablets: Responsive Web Design is in your futureThe Rise Of Tablets: Responsive Web Design is in your future
The Rise Of Tablets: Responsive Web Design is in your futureRick Wilson
 
The rise of tablets how responsive web design is in your future
The rise of tablets   how responsive web design is in your futureThe rise of tablets   how responsive web design is in your future
The rise of tablets how responsive web design is in your futureInternet Merchants Association
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12touchtitans
 
Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Sandip Jadhav
 
BarkleyREI & Hannon Hill Webinar - Responsive Web Design
BarkleyREI & Hannon Hill Webinar - Responsive Web DesignBarkleyREI & Hannon Hill Webinar - Responsive Web Design
BarkleyREI & Hannon Hill Webinar - Responsive Web Designhannonhill
 
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Tirthesh Ganatra
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio
 
Building Mobile Websites with Joomla
Building Mobile Websites with JoomlaBuilding Mobile Websites with Joomla
Building Mobile Websites with JoomlaTom Deryckere
 
Intro to Responsive Web Design
Intro to Responsive Web DesignIntro to Responsive Web Design
Intro to Responsive Web Designmeghantaylor
 
Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"Ram Singh
 
Responsive web design
Responsive web designResponsive web design
Responsive web designBen MacNeill
 
Webinar Recording "Best Practices in RWD - Responsive Web Design"
Webinar Recording "Best Practices in RWD - Responsive Web Design"Webinar Recording "Best Practices in RWD - Responsive Web Design"
Webinar Recording "Best Practices in RWD - Responsive Web Design"Sachin Katariya
 
Getting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web DesignGetting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web Designmartinridgway
 
Drupal Business Summit - making your sites mobile accessible, four methods.
Drupal Business Summit - making your sites mobile accessible, four methods.Drupal Business Summit - making your sites mobile accessible, four methods.
Drupal Business Summit - making your sites mobile accessible, four methods.Promet Source
 

Similar to Build a responsive website with drupal (20)

Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI
Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREIResponsive Web Design in Cascade Server, by Chris Cox of BarkleyREI
Responsive Web Design in Cascade Server, by Chris Cox of BarkleyREI
 
Dig into the omega theme
Dig into the omega themeDig into the omega theme
Dig into the omega theme
 
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
 
The Rise Of Tablets: Responsive Web Design is in your future
The Rise Of Tablets: Responsive Web Design is in your futureThe Rise Of Tablets: Responsive Web Design is in your future
The Rise Of Tablets: Responsive Web Design is in your future
 
The rise of tablets how responsive web design is in your future
The rise of tablets   how responsive web design is in your futureThe rise of tablets   how responsive web design is in your future
The rise of tablets how responsive web design is in your future
 
Responsive design
Responsive designResponsive design
Responsive design
 
Responsive UX - One size fits all @BigDesign conference #BigD12
Responsive UX - One size fits all   @BigDesign conference #BigD12Responsive UX - One size fits all   @BigDesign conference #BigD12
Responsive UX - One size fits all @BigDesign conference #BigD12
 
Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)Reponsive web design (HTML5 + css3)
Reponsive web design (HTML5 + css3)
 
reponsive-web-design.pptx
reponsive-web-design.pptxreponsive-web-design.pptx
reponsive-web-design.pptx
 
reponsive-web-design.pptx
reponsive-web-design.pptxreponsive-web-design.pptx
reponsive-web-design.pptx
 
BarkleyREI & Hannon Hill Webinar - Responsive Web Design
BarkleyREI & Hannon Hill Webinar - Responsive Web DesignBarkleyREI & Hannon Hill Webinar - Responsive Web Design
BarkleyREI & Hannon Hill Webinar - Responsive Web Design
 
Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)Responsive Web Design (HeadStart TechTalks)
Responsive Web Design (HeadStart TechTalks)
 
Advancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web DesignAdvancio, Inc. Academy: Responsive Web Design
Advancio, Inc. Academy: Responsive Web Design
 
Building Mobile Websites with Joomla
Building Mobile Websites with JoomlaBuilding Mobile Websites with Joomla
Building Mobile Websites with Joomla
 
Intro to Responsive Web Design
Intro to Responsive Web DesignIntro to Responsive Web Design
Intro to Responsive Web Design
 
Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"Drupalcon Asia - "Drupal 8 Mobile in its DNA"
Drupalcon Asia - "Drupal 8 Mobile in its DNA"
 
Responsive web design
Responsive web designResponsive web design
Responsive web design
 
Webinar Recording "Best Practices in RWD - Responsive Web Design"
Webinar Recording "Best Practices in RWD - Responsive Web Design"Webinar Recording "Best Practices in RWD - Responsive Web Design"
Webinar Recording "Best Practices in RWD - Responsive Web Design"
 
Getting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web DesignGetting Down & Dirty with Responsive Web Design
Getting Down & Dirty with Responsive Web Design
 
Drupal Business Summit - making your sites mobile accessible, four methods.
Drupal Business Summit - making your sites mobile accessible, four methods.Drupal Business Summit - making your sites mobile accessible, four methods.
Drupal Business Summit - making your sites mobile accessible, four methods.
 

More from Shyamala Rajaram

More from Shyamala Rajaram (7)

Drupal & You
Drupal & YouDrupal & You
Drupal & You
 
Drupal 8 mobile initiative
Drupal 8 mobile initiativeDrupal 8 mobile initiative
Drupal 8 mobile initiative
 
Talk at #devfestW
Talk at #devfestWTalk at #devfestW
Talk at #devfestW
 
What in store in drupal 8
What in store in drupal 8 What in store in drupal 8
What in store in drupal 8
 
Drupal for Programmers
Drupal for ProgrammersDrupal for Programmers
Drupal for Programmers
 
Drupalacademics research
Drupalacademics researchDrupalacademics research
Drupalacademics research
 
Drupal for Libraries
Drupal for LibrariesDrupal for Libraries
Drupal for Libraries
 

Recently uploaded

TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Muhammad Tiham Siddiqui
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInThousandEyes
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FESTBillieHyde
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingFrancesco Corti
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud DataEric D. Schabell
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kitJamie (Taka) Wang
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightSafe Software
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4DianaGray10
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNeo4j
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxNeo4j
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarThousandEyes
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosErol GIRAUDY
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechProduct School
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveIES VE
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updateadam112203
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationKnoldus Inc.
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameKapil Thakar
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTopCSSGallery
 

Recently uploaded (20)

TrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie WorldTrustArc Webinar - How to Live in a Post Third-Party Cookie World
TrustArc Webinar - How to Live in a Post Third-Party Cookie World
 
Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)Trailblazer Community - Flows Workshop (Session 2)
Trailblazer Community - Flows Workshop (Session 2)
 
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedInOutage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
Outage Analysis: March 5th/6th 2024 Meta, Comcast, and LinkedIn
 
Technical SEO for Improved Accessibility WTS FEST
Technical SEO for Improved Accessibility  WTS FESTTechnical SEO for Improved Accessibility  WTS FEST
Technical SEO for Improved Accessibility WTS FEST
 
Where developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is goingWhere developers are challenged, what developers want and where DevEx is going
Where developers are challenged, what developers want and where DevEx is going
 
3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data3 Pitfalls Everyone Should Avoid with Cloud Data
3 Pitfalls Everyone Should Avoid with Cloud Data
 
20140402 - Smart house demo kit
20140402 - Smart house demo kit20140402 - Smart house demo kit
20140402 - Smart house demo kit
 
The Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and InsightThe Zero-ETL Approach: Enhancing Data Agility and Insight
The Zero-ETL Approach: Enhancing Data Agility and Insight
 
UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4UiPath Studio Web workshop series - Day 4
UiPath Studio Web workshop series - Day 4
 
Novo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4jNovo Nordisk's journey in developing an open-source application on Neo4j
Novo Nordisk's journey in developing an open-source application on Neo4j
 
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptxEmil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
Emil Eifrem at GraphSummit Copenhagen 2024 - The Art of the Possible.pptx
 
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through TokenizationStobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
Stobox 4: Revolutionizing Investment in Real-World Assets Through Tokenization
 
EMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? WebinarEMEA What is ThousandEyes? Webinar
EMEA What is ThousandEyes? Webinar
 
Scenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenariosScenario Library et REX Discover industry- and role- based scenarios
Scenario Library et REX Discover industry- and role- based scenarios
 
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - TechWebinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
Webinar: The Art of Prioritizing Your Product Roadmap by AWS Sr PM - Tech
 
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES LiveKeep Your Finger on the Pulse of Your Building's Performance with IES Live
Keep Your Finger on the Pulse of Your Building's Performance with IES Live
 
Patch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 updatePatch notes explaining DISARM Version 1.4 update
Patch notes explaining DISARM Version 1.4 update
 
Introduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its applicationIntroduction to RAG (Retrieval Augmented Generation) and its application
Introduction to RAG (Retrieval Augmented Generation) and its application
 
Flow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First FrameFlow Control | Block Size | ST Min | First Frame
Flow Control | Block Size | ST Min | First Frame
 
Top 10 Squarespace Development Companies
Top 10 Squarespace Development CompaniesTop 10 Squarespace Development Companies
Top 10 Squarespace Development Companies
 

Build a responsive website with drupal

  • 1. Build a Responsive Website with Drupal By Shyamala rajaram.shyamala@gmail.com www.unimity.com
  • 2. Presentation Path What are Responsive websites? ● Websites for mobile past, present & future ● Flexible Grids ● Flexible images ● Css Media queries ● What is Mobile first methodology? ● Break Points ● Responsive vs Adaptive ● Drupal 8 & mobile initiative   www.unimity.com
  • 3. Website for Mobile - Past MOBILE DESKTOP m.site.com www.site.com DETECT & REDIRECT Request www.unimity.com
  • 4. Website for Mobile - Present & Future www.unimity.com
  • 5. Flexible Grids Use percentages: allow grow & shrink of web pages         Target / Context = results (5grids) / (8grids) = 62.5% OR (600px) / (960px) = 62.5% www.unimity.com
  • 6. Flexible Grids www.unimity.com
  • 7. Flexible Images - sizes www.unimity.com
  • 8. Flexible Images www.unimity.com
  • 9. Flexible Images - modules Use max-width to contain images within the grid Drupal modules that support flexible images include ● responsive_image: http://drupal. org/project/responsive_images ● fasterimages: http://drupal.org/project/fasterimages ● css_emimage: http://drupal.org/project/css_emimage     www.unimity.com
  • 10. CSS3 Media Queries Not only allows you to target certain devices classes, but can actually inspect the physical characteristics of device rendering the work New media features, including max-width, device-width, orientation and color       www.unimity.com
  • 11. Apple - auto-adjust feature Use of view-port metatags   www.unimity.com
  • 12. Mobile first appraoch Ensure the site works on all devices, devices that do not support Media queries: take a MOBILE FIRST APPROACH! global.css -> mobile reponsive.css -> media queries www.unimity.com
  • 13. Break Points 1200px : Larger screens 1024px : Smaller desktops & Larger tablets Landscape 768px : Portrait for Larger Tablets, Landscape for smaller tablets 600px : Portrait & Landscape for smaller layouts & Kindle 480px : Landscape mode for smart phones 320px : Portrait mode for smart phones www.unimity.com
  • 14. Responsive vs Adaptive design "Adaptive web design" refers more to the secondary and less fluid approach of adapting existing web designs, or designing for controlled adaptation as opposed to a truly fluid and flexible "Responsive" design. www.unimity.com
  • 15. Drupal Themes ● omega: http://drupal.org/project/omega ● zen: http://drupal.org/project/zen ● adaptive: http://drupal.org/project/adaptivetheme ● terrain: http://drupal.org/project/terrain www.unimity.com
  • 16. Drupal 8 & Responsive Designs ● Issue queues tagged as mobile in Drupal 8 ● For info on Drupal 8 mobile initiative: http://groups.drupal.org/node/207248 www.unimity.com