Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Squishy pixels

908 views

Published on

Squishy Pixels with Varun Vachhar
Presented at FITC's Web Unleashed Toronto 2014 Conference
on September 17
More info at www.FITC.ca

Adaptive Web Design and Responsive Web Design are often presented as competing design strategies. However, Adaptive Web Design is a superset of techniques aimed at crafting sites which provide an optimal user experience across multiple screen sizes. Responsive Web Design is just one such technique.

In this session, Varun will cover the major techniques that make up the Adaptive Web Design strategy, how and when to choose these techniques for creating contextually-aware web experiences, and will give an introduction to building responsive layouts using CSS Flexbox.

OBJECTIVE
To demystify the world of multi-device and cross-platform web design.

TARGET AUDIENCE
Web designers and developers

ASSUMED AUDIENCE KNOWLEDGE
Intermediate HTML and CSS. Basic design knowledge.

FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What is Adaptive/Responsive Web Design
Where responsive design fits in an adaptive web design strategy
Other techniques that are a part of an adaptive web design strategy
How/when to pick from the various available strategies
Introduction to layouts with CSS Flexbox

Published in: Internet
  • Be the first to comment

Squishy pixels

  1. 1. Squishy Pixels by Varun Vachhar designer/developer at rangle.io
  2. 2. Pixel-perfect PSD to HTML/CSS
  3. 3. 2007
  4. 4. native & m. domains
  5. 5. And Then There Were iPads
  6. 6. 2010
  7. 7. We Had a Problem
  8. 8. Responsive Web Design
  9. 9. Fluid Grids Flexible Images
  10. 10. Responsive Web Design Responsive design is a technique in which the same HTML code is delivered to each device, but tweaks to CSS, allow it to adjust to the screen's form factor. – Ravi Pratap
  11. 11. Adaptive Web Design
  12. 12. Adaptive Web Design
  13. 13. Adaptive Web Design uses the components of progressive enhancement to define design methods that focus on the user, not the browser.
  14. 14. RESS: RWD + Server Side Components Device Detection Adaptive Layouts
  15. 15. Wat!
  16. 16. Progressive Enhancement
  17. 17. Brad Frost Future Friendly Pattern Lab
  18. 18. Jeffrey Zeldman Designing with Web Standards
  19. 19. The purpose behind responsive design should be separated from the specific techniques used to achieve it.
  20. 20. Brad Frost A single Web experience that modifies based on the capabilities of the device and browser.
  21. 21. Responsive & Adaptive Web Design
  22. 22. Create A Single Web Experience
  23. 23. Content
  24. 24. Mobile-First CSS
  25. 25. Well Structured Meaningful Markup
  26. 26. Compress/Minimize!
  27. 27. Responsive Images { max-width: 100%; background-size: cover; background-size: contain; }
  28. 28. Responsive Images
  29. 29. Picture Element <picture> <source src="responsive-obama-320.png"> <source src="responsive-obama-512.png" media="(min-width: 512px)"> <source src="responsive-obama-1024.png" media="(min-width: 1024px)"> <source src="responsive-obama-2048.png" media="(min-width: 2048px)"> <noscript><img src="responsive-obama-320.png"></noscript> </picture>
  30. 30. Imager.js <div style="width: 240px"> <div class="delayed-image-load" data-src="/img/image.png" data-alt="alternative text"> </div> </div> new Imager({ availableWidths: [200, 260, 320, 600] });
  31. 31. Imager.js • lookup placeholder elements • replace placeholders with transparent images • update src attribute for each image and assign the best quality/size ratio URL
  32. 32. Layouts
  33. 33. Adaptive Layouts Content resizes at fixed break points
  34. 34. Flowtype.js $('body').flowtype({ fontRatio : 30 });
  35. 35. Responsive Typography Using Media Queries and px or em values body { font-size: 100%; } h1 { font-size: 25em; } @media screen and (max-width: 50em) { h1 { font-size:2em; } }
  36. 36. Responsive Typography Using Viewport CSS units 1vw = Equal to 1% of the width of the initial containing block 1vh = Equal to 1% of the height of the initial containing block 1vmin = Equal to the smaller of vw or vh 1vmax = Equal to the larger of vw or vh W3C Values and Units Module Level 3
  37. 37. Using rem. markdotto.com/mdo.css is a great example html { font-family: "PT Serif", Georgia, "Times New Roman", serif; font-size: 16px; } @media (min-width: 48em) { html { font-size: 21px; } } h1 { font-size: 2rem; }
  38. 38. Responsive Tables Squishing VS Grouping
  39. 39. Optimize Animations for 60fps Everywhere
  40. 40. What Triggers Re-Layouts? What Triggers Re-Paints? How To Leverage the GPU?
  41. 41. Client Side Scripting
  42. 42. responsivenews.co.uk BBC News developers responsive design blog
  43. 43. Cutting The Mustard 2012 version by BBC
  44. 44. Migrating an Old Code Base
  45. 45. Migrating an Old Code Base
  46. 46. Flexbox!
  47. 47. Can I Use It? Mobile SASS mixins provide old flexbox spec too
  48. 48. Set Display Type @mixin display-flex { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -moz-flex; display: -ms-flexbox; display: flex; }
  49. 49. Grow, Shrink & Basis @mixin flex($fg: 1, $fs: null, $fb: null) { -webkit-box-flex: $fg; -webkit-flex: $fg $fs $fb; -moz-box-flex: $fg; -moz-flex: $fg $fs $fb; -ms-flex: $fg $fs $fb; flex: $fg $fs $fb; }
  50. 50. Basis Initial size @include flex(0, 1, 50px); @include flex(0, 1, auto); @include flex(0, 1, auto);
  51. 51. Grow Amount of the available space to fill @include flex(0, 1, 25px); @include flex(1, 1, auto); @include flex(0, 1, 25px);
  52. 52. Shrink How much to shrink @include flex(0, 1, 50px); @include flex(0, 2, 50px); @include flex(0, 1, 50px);
  53. 53. ! @mixin flex-direction($value: row) { @if $value == row-reverse { -webkit-box-direction: reverse; -webkit-box-orient: horizontal; } @else if $value == column { -webkit-box-direction: normal; -webkit-box-orient: vertical; } @else if $value == column-reverse { -webkit-box-direction: reverse; -webkit-box-orient: vertical; } @else { -webkit-box-direction: normal; -webkit-box-orient: horizontal; } -webkit-flex-direction: $value; -moz-flex-direction: $value; -ms-flex-direction: $value; flex-direction: $value; }
  54. 54. Alignment: Start, End & Middle @mixin align-self($value: auto) { -webkit-align-self: $value; -moz-align-self: $value; @if $value == flex-start { -ms-flex-item-align: start; } @else if $value == flex-end { -ms-flex-item-align: end; } @else { -ms-flex-item-align: $value; } align-self: $value; }
  55. 55. It Depends!
  56. 56. Varun Vachhar @winkerVSbecks varun.ca rangle.io

×