Responsive Design with Drupal. Who is Chaz Chumley?  Technical Director - Saforian  Author - Lynda.com  Govt. to Non-profit to Corporate  Over 7 years.

Slides:



Advertisements
Similar presentations
What is jQuery Mobile? How to use it? Doncho Minkov Telerik Corporation Technical Trainer.
Advertisements

Responsive Web Design (RWD) Building a single web site for the desktop, tablet and smartphone An Infopeople Webinar November 13, 2013 Jason Clark Head.
JQUERY Mobile Overview Norman White. What is JQUERY Mobile? jQuery Mobile is a touch-friendly UI framework built on jQuery Core that works across all.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
EXtensible Catalog XC Drupal Toolkit. XC Software Overview User Interface for searching and browsing Library Website (on Drupal) VoyagerUR Research XC.
4.02 Responsive Web Design Concepts Part 1, Part 2 & Part 3 Designing for mobile devices.
Web Design Guidelines By ZhengHui Hu. Planning User Analysis  Goal  Target Audience Enhance Accessible  Impairment  Environment  Technical Limitation.
Responsive Web Design Sheri German, Instructor Montgomery College.
Being Responsibly Responsive Jason
 A “new-ish” web design methodology  Addresses growing number of Internet devices  Tailored experience to any device  Limits resizing, panning.
Responsive Wed Design : An Emerging Technology Archana Jain.
RESPONSIVE DESIGN Sources: Kadlec, T. (2012). Implementing responsive design. Berkeley, California: New Riders Publishing. MarcotteMarcotte, E. (2010).
4.02 Responsive Web Design Concepts
RESPONSIVE DESIGN Sources: Kadlec, T. (2012). Implementing responsive design. Berkeley, California: New Riders Publishing. MarcotteMarcotte, E. (2010).
Website Design BTT1OC/2OC. What is web design? O A web site is a digital page consisting of HTML (hypertext markup language) files, images, movies, sound,
LEARN THE QUICK AND EASY WAY! VISUAL QUICKSTART GUIDE HTML and CSS 8th Edition Chapter 12: Building Responsive Webpages.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
‘Mobile first’ Alexander Roberts ISS Web Team Manager Swansea University.
CIT 256 Mobile Web Development Dr. Beryl Hoffman.
Intro to RESPONSIVE DESIGN. Why? What?
Kathy E. Responsive Design and Twitter Bootstrap.
WDV 331 Dreamweaver Applications Designing Websites for Mobile Devices Dreamweaver CS6 Chapter 11.
DEVELOPING FOR MOBILE Jackie Calapristi. AGENDA  Why you should go mobile  Mobile Design Options  Responsive Design  Tips & Tools to Help You Build.
Responsive Web Design Nikhil J Deshpande Webinar – May 14, 2014 Sponsored by.
Responsive Design - It’s time for a reality check.
San Diego 2014 SharePoint Saturday San Diego November 15, 2014 UCSD Extension SharePoint Saturday San Diego November 15, 2014 UCSD Extension.
Part II: New Developments in RWD. Background RWD is constantly evolving. Designers continue to refine RWD theory and practice. New tools are constantly.
A Site for All Eyes – Considerations for Responsive Design October 19, 2012 Dori Kelner, MS Principal, Sleight-of-Hand Studios
Responsive Web design The usage and essentiality of responsive web design are increasing with the increase of mobiles devices and tablets usage Your website.
COMP 135 Web Site Design Intermediate Week 8. Responsive Web Design Responsive Design Adaptive Design.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.
Week 8 – Part 3 More on Links, Layout, and Mobile Key Concepts 1.
Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® Copyright 2012 Adobe.
Website Project Development Presentation by APNARAJ.COM.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 7 Key Concepts 1 Copyright © Terry Felke-Morris.
All Your Base Are Belong to Us. Who is Chaz Chumley?  Technical Director - Saforian  Author - Lynda.com  Govt. to Non-profit to Corporate  Over 7.
Insert presentation title here Insert Presenter’s name Presenter’s title Research Program / Theme menzies.griffith.edu.au.
Introduction to Web Page Design. General Design Tips.
CERN toolbar, theme, new website Dan Noyes, Entice, 4 April 2013.
Making iServices Subscriber More Mobile Friendly `
Responsive Web Designing Using CSS3 & HTML5 -Sandip Jadhav “We are building a web, for all device ”
RWD: Responsive Web Design. Terms Media queries SVG Responsive Adaptive/RESS Dedicated mobile.
Responsive Design Design that Adapts to Different Devices SoftUni Team Technical Trainers Software University
INFO1300 LAB7 OCT.11TH RESPONSIVE DESIGN. WHAT IS RESPONSIVE WEB DESIGN A mix of flexible grids and layouts, images and an intelligent use of CSS media.
GO MOBILE. GO RESPONSIVE. 185 mil mobile internet users in India
learn. do. dream. Bootstrapping with Twitter Bootstrap Responsive Layouts CSS Components JavaScript Font Awesome Select2 Themes.
Responsive (Mobile) Design What is this? Why Should You Care?
 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.
Responsive Web Design (RWD) MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/11/2016.
1 Company Confidential Need a Mobile DotNetNuke Site? Get One the Quick and Easy Way Using CSS Media Queries Amelia Marschall Partner & Creative Director.
Cheryl Wolfe Web Services Administrator Tampa-Hillsborough County Public Library James Day Electronic Services Librarian Embry-Riddle Aeronautical University.
I MPORTANT E LEMENTS IN R ESPONSIVE D ESIGNING OF E COMMERCE W EBSITES By TOPS Technologies
Less – Design That is More… BY SPEC INDIA. Less – Design  Adaptive Cross Platform CSS grid system  Responsive & Mobile First Projects  Uses Standards-based.
With Responsive Web Design Eric Overfield SharePoint Advocate and Enthusiast PixelMill SharePoint Fest Denver – March 18 th - 20 th 2013 Enhance SharePoint.
CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.
Implementing Responsive Design
Responsive Design and Twitter Bootstrap
Concepts for fluid layout
CS 321: Human-Computer Interaction Design
RESPONSIVE WEB DESIGN.
Web Responsive Design.
Responsive Design.
Course Review ITI HTML5 Level II Course Review
Excel 2013 Power BI Fundamentals
WEB DESIGN FOR MULTIPLE SCREENS
Web Client Side Technologies Raneem Qaddoura
Web Client Side Technologies Raneem Qaddoura
Concepts for fluid layout
Various mobile devices
17 RESPONSIVE WEB DESIGN.
Presentation transcript:

Responsive Design with Drupal

Who is Chaz Chumley?  Technical Director - Saforian  Author - Lynda.com  Govt. to Non-profit to Corporate  Over 7 years of Drupal experience  HTML5, CSS3, Responsive Design

Topics  What is Responsive Design?  Understanding Fluid Layouts  Responsive Typography  Fluid Images and Media  Writing a Media Query  Creating Responsive Menus & Forms  Responsive Base Theme  Next Steps

What is Responsive Design? In simple terms - Making sure your design responds to all environments. From mobile to tablet to browser and even television, ensuring that your content either adapts or responds to any viewing area and that media, forms and navigation function.

Fluid Layouts moving from pixels to percentages

Responsive Typography using baselines, em’s and fonts for icons

Fluid Images and Media from max-width to fitvids

Media Queries breakpoints and best practices

Responsive Menus modules, menus and JQuery

Responsive Forms from webform to form_alter

Base Themes combining best practices into a great starting point

Next Steps practice, refine, experiment

Questions?

Thank You.