DESIGN RESPONSIVELY DRUPAL CAMP CT RESPONSIVE WEB DESIGN AND DRUPAL PROJECT. Monday, August 27, 12

Transcription

1 PROJECT DESIGN RESPONSIVELY RESPONSIVE WEB DESIGN AND DRUPAL DATE CLIENT DRUPAL CAMP CT

2 SHAUN GORNEAU WEB STRATEGIST WEB SITE DESIGNER + DEVELOPER DRUPAL: THEMER, ARCHITECT + DEVELOPER

3 SHAUN GORNEAU WEB STRATEGIST WEB SITE DESIGNER + DEVELOPER DRUPAL: THEMER, ARCHITECT + DEVELOPER

4 Layout Techniques Fixed Fluid Adaptive Responsive

5 TABLE-BASED LAYOUT

6 TABLE-BASED LAYOUT

7 Define: Fixed Fixed dimensions with no regard for viewport.

8 Define: Fluid Scalable with pain points

9 Define: Adaptive Fixed dimensions that are redefined at breakpoints

10 Define: Responsive Relative dimensions that scale between the breakpoints Responsive = Adaptive + Fluid It s all about the stuff between the breakpoints

11 How do we trigger breakpoints? Media Queries!

12 Media Queries Media queries let us define certain criteria for which CSS rules will become active.

13 Media Queries. What can we query? Well...media type for one. Screen, Projection, Print... for example.

14 Media Queries. What can we query? Many hardware attributes. Things like device screen width, device screen height, device screen orientation, color depth (in bits), etc.

15 Media Queries. What can we query? And you don t have to query for an infinite number of different values...you can use min and max values to cover ranges.

16 Media type (screen, projection, print) Screen min dimensions, max dimensions for height and width Device min dimensions, max dimensions for height and width Device orientation Aspect ratio Color (min, max bits per channel) Resolution Scan (linear vs progressive) Webkit has these extensions 2d transform 3d transform transition animation

17 So, where do we begin? Think Responsively and Mobile from the get-go.

18 What does Designing Responsively mean?

19 Designing Responsively don ts Don t design for fixed dimensions (although I don t see anything wrong with a fixed maximum) Don t design for pixel perfection

20 Designing Responsively do s Do design for breakpoints Do design for everything between those breakpoints Design for appropriate user experiences given the user s context

21 OK, but how? Avoid Photoshop (yes...do it. Like the F ing plague.) Start wireframes with pencil + paper Prototype in HTML/CSS; Start with HTML that does not define a layout (or fall victim to one) Start small screen. This has a great side effect: focus

22 All of this takes care of the desktop...what about mobile? Wax on wax off, Daniel san. Mobile (webkit) meta tags handle scaling and everything else falls into place.

23 All of this takes care of the desktop...what about mobile? <meta name="viewport" content = "width = device-width, initial-scale=1, user-scalable=no" />

24 Any other considerations for mobile? Yep. Take advantage of CSS3 for its artistic capabilities Add styling and interactions as layers based on device capabilities (detect with Modernizr) Evaluate mobile use-case; not all content is created equal

25 LAYOUTS DEMO

26 OK, great...so far we ve seen hand-coded web sites. (He knows this is a Drupal Camp, right?)

27 EXAMPLE WIREFRAME

28 EXAMPLE WIREFRAME HEADER COLUMN 1 COLUMN 2 FOOTER

29 EXAMPLE WIREFRAME HEADER COLUMN 1 COLUMN 2 FOOTER

30 REAL WORLD WIREFRAME HEADER CONTENT TOP COLUMN 1 COLUMN 2 COLUMN 3 CONTENT BOTTOM FOOTER

31 Where does Drupal come in? Those wireframes are secret agents: Commonalities will define Regions. Page specific wireframes will help define Content Types and their node-type.tpl.php files. Create custom templates for as much as possible (page, blocks, nodes, Views, etc.)

32 What about existing projects? Start fresh with a new theme and run in parallel to live site, for your account only. This is a great development scenario... real content! CSS, by design, will facilitate this

33 Not just about theming either. Module developers should embrace this too (if your module outputs HTML). Do one of two things; output very lean markup or provide tpl.php files.

34 Awesome examples ex-site-final.html

35 THANK YOU