Ux responsive web design - ferdy christant

  • 853 views
Uploaded on

A presentation

A presentation

More in: Education , Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
853
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Div columnsContent order problemCSS3 columnsLi columnsZoom layoutResponsive navigationLandscape navigationDesktop navigationResponsive images / PPIResponsive videoResponsive modalsResponsive sharingTruncating (hor/ver/crumbs)Scrollable areaMin-floatsScrollToResponsive tablesServer-sideResponsive typography

Transcript

  • 1. Celebrate the new WebRWD
  • 2. Websites todayIntroDesigned like print pagesFixed layout, pixel-basedBuilt for broadbandDesign over contentOne size fits all
  • 3. The web’s realityIntroA screen for every inch you can think of
  • 4. • Different resolutions & different aspect ratios• Different orientations• Different pixel densities• Different input methods• Different network types• Different power types• Different browsers on different versions having different browserchrome supporting different standards on different operation systemsIt gets worseIntro
  • 5. One size fits fewIntro
  • 6. • Do nothing (stat-based: cause or effect?)• Build native apps (great usability, expensive, limited reach)• Go hybrid (more efficient, sub optimal results, not future-proof)• Build a separate mobile website (great usability, expensive)Or…embrace mankind’s most widely deployed technology, the openweb, using responsive web design. Serve all people and alldevices, even futures ones, bypassing walled gardens.StrategiesIntroCreating smaller copies of a fixed UI does not solve the problem
  • 7. • A term coined by Ethan Marcotte in 2010• Technically, using CSS3 media queries to respond to a user’s context• Simply put: conditional CSS that optimizes a layout based upon a testWhat is RWD?Intro
  • 8. @media screen and (max-width: 640px) {body { font-size: 1.5rem; }#colmain, #colside {display:block;width:100%;}}Basic syntaxTechBreakpoint CSSMedia type Media test(s) Media queryfeature unit
  • 9. widthheight device-width device-height orientation aspect-ratio device-aspect-ratio device-pixel-ratio color color-indexmonochrome resolution scan grid Full list…And…location, ambient light, proximity, sensorsRespond to what feature?Tech
  • 10. /* Your desktop styles go here */@media screen and (max-width: 1024px) { /* overrule */ }@media screen and (max-width: 640px) { /* overrule */ }Convenient and affordable approach for existing sites. A quickfix that may work temporarily, at best.Order matters: desktop-firstTech
  • 11. /* Your mobile styles go here */@media screen and (min-width: 640px) { /* overrule */ }@media screen and (min-width: 1024px) { /* overrule */ }Preferred “ideal” approach that starts with mobile andenriches for larger viewports. Mobile web design as the newdefault, a dramatic change in web development.Order matters: mobile-firstTech
  • 12. @media screen and (min-width: 640px) {}@media screen and (min-width: 1024px) {}Adaptive: Fixed layout per breakpoint, does not scale in between.Great design control, but does not embrace the flexible web.Responsive: Layout scales by default. Breakpoint code is small andonly used for optimizations. Layout scales between breakpoints.Adaptive versus responsiveTech
  • 13. • Device-based versus Design-based• Let’s make this fit on my iPhone• My design is not optimal at x, therefore x is my breakpoint• How many breakpoints• Adaptive: 3• Responsive: 3-5, but really, as many as you like• Pixel-based versus proportional• Breakpoints based on device property• Breakpoints based on content proportionsBreakpoint designTech
  • 14. Responsive design decisionsTechPossible PreferredDesktop-first Mobile-firstAdaptive ResponsiveDevice-based breakpoints Design-based breakpointsPixel-based breakpoints Proportional breakpointsPragmatic quick fix,affordable yet limitedCrazy idealist holygrail of web design
  • 15. Free yourself from devices and pixelsVision
  • 16. Project JungleDragonJD
  • 17. Desktop-firstFixed layout of 960pxLarge page weightUnusable on small viewportsPoor on very large viewportsNot responsiveNot proportionalNot touch friendlySucks on high PPI screensJungleDragon V2JDForgive me, for I amonly human
  • 18. JungleDragon V3JDMobile-first320px – 1280px – 2560px(!)Page weight based on 3GShines on small viewportsShines on very large viewportsResponsive, not adaptiveMostly proportionalTouch friendlyEpic on high PPI screensProgressively enhancedI shall be worshipped
  • 19. Demo timeJD
  • 20. Demo transcriptJD• Div columns• Content order problem• CSS3 columns• Li columns• Zoom layout• Responsive navigation• Landscape navigation• Desktop navigation• Responsive images / PPI• Responsive video• Responsive modals• Responsive sharing• Truncating (hor/ver/crumbs)• Scrollable area• Min-floats• ScrollTo• Responsive tables• Server-side• Responsive typography
  • 21. Breakpoint setupJD/* Mobile-first CSS comes here, above breakpoints */@media screen and (min-width: 0em) { @import mode_xxs; }@media screen and (min-width: 35em) { @import mode_xs; }@media screen and (min-width: 40em) { @import mode_s; }@media screen and (min-width: 48em) { @import mode_m; }@media screen and (min-width: 64em) { @import mode_l; }@media screen and (min-width: 0px) and (max-width: 40em) and (orientation:landscape) { @import mode_xxs_landscape;}Breakpoint Description CSS LinesDefault Mobile-first default CSS Several hundredsXXS Hide nav, alter columns 86XS Header, reveal nav, alter columns 79S Header, reveal nav 27M Reveal nav, alter columns 34L Significant layout changes 103The smaller theexceptions, themore responsivethe defaultdesign is
  • 22. Viewport setupJD<meta name="viewport" content="initial-scale=1">This is popular:<meta name="viewport" content="initial-scale=1, maximum-scale=1">Don’t do it. Don’t hate users for wanting to zoom.
  • 23. Div columnsJDMain65%Side35%Main100%Side100%Default Breakpoint L#colmain, #colside {display:block;width:100%;}#colmain {width:65%;float:left;}#colside {width:35%;float:right;}
  • 24. Content order problemJDABCDEFABCDEFLeft-to-right visual relationshipcommon on desktop views is lostwhen stacking columns on smallerviewports.Solutions:• CSS table hacks• Javascript• Flexbox
  • 25. Wide sidebar problemJDMain65%Main100%Counter intuitively, sidebars mayhave more width, not less, on smallviewports. Consider splitting themusing CSS columns:#colside {@include column-count(2);}ABCABCA B
  • 26. List columnsJDFor lists of content elements, mark them up as such:<ul class=“listid”><li>A</li><li>B</li><li>C</li></ul>Next, control per breakpoint how many columns to display using percentage widths:.photos li { width:33.3333%; }.tags-grid li {width:33.3333%; }.users-grid li { width:33.3333%; }.photos li {width:25%; }.tags-grid li {width:25%; }.users-grid li { width:25%; }Use multitudes of 12 for the # of elements per page, as it is divisible by 1, 2, 3 and 4 
  • 27. Proportional breakpointsJD1920 x 1080 at200% zoomZooming in on a responsivedesign that has proportionalbreakpoints reduces the viewportsize. The layout in this caseswitched to “tablet” mode.This is a feature, not a bug. Itmeans your responsive design iscontent-based, rather thandevice- or pixel based
  • 28. Responsive navigationJD$(this).closest(nav).find("li:hidden").not(.nav-fold).each(function(e){}Responsive navigation is one of thehardest things to get right.JungleDragon makes use of theSelect pattern in a fixed header, andadds intermediate states to it.Study all patterns, experiment andtest to find the one that best suitsyour needs.
  • 29. Landscape navigationJDIn landscape orientation, fixed headers take uptoo much height. Undo them:@media screen and (min-width: 0px) and (max-width: 40em)and (orientation:landscape) {header.site { position:relative;}}
  • 30. Responsive imagesJDThe best responsive image, is noimage at all. Use vector elementsthat scale to infinity instead:• Icon fonts• CSS3 decorations• SVG patterns
  • 31. Responsive imagesJDFor remaining raster images, the basic scaling method is simple:img { width:100%; height:auto; } /* scales to parent, not window */When short on pixels, consider image switching:<img src="image_small.jpg" data-src-large="image_medium.jpg" />if (imglink.width() > img.width() && img.attr(src) != img.data(src-large)){ img.attr(src,img.data(src-large)); }Note: this loads the image twice.
  • 32. Epic Responsive imagesJDInstead of imageswitching, double image insize, compress, show at 50%.The results are mind blowing:images with 4 times morepixels are smaller in file size yetbetter in quality…and…high PPIready!One image to rule them all 
  • 33. Epic Responsive imagesJDImprove perceived performance by using progressive JPEGs
  • 34. Responsive videoJDProblem:Embedded videos do not scaleby aspect ratio like images do.Solution$(".video").fitVids();Demo
  • 35. Responsive modals & sharingJD
  • 36. Responsive truncating - horizontalJDTo enforce content on a single line, you cantruncate the text. However, you don’t knowby how many characters, since the line oftext is of a variable width.Solution:figcaption {width:100%;text-overflow: ellipsis;}
  • 37. Responsive truncating - horizontalJDMarkup breadcrumbs as a list<ul class=“listid”><li>A</li><li>B</li><li>C</li></ul>Only show last x elements of a breadcrumb.navgrid {li { display:none; }li:nth-last-child(-n+x) { display: inline-block; }}
  • 38. Responsive truncating - verticalJDConstrain height of long text, but doso based on the viewport size.Solution is described here.
  • 39. Scrollable areasJD.nodes {max-height:20em;overflow-y:scroll; overflow-x:hidden;-webkit-overflow-scrolling: touch;}
  • 40. Responsive floatsJDOnly float text around images when there is aminimum width available to do so:border: 1px solid transparent;&:before {content: "";width10em;display: block;overflow: hidden;}Less width? Text will flow below image.
  • 41. Scroll to contentJDif ($(body).data(scrollto).length > 0 && mqMode.num <=2) {var scrollTarget = $($(body).data(scrollto));$(html, body).animate({ scrollTop: scrollTarget.offset().top });}
  • 42. Responsive tablesJDShow and hide columns using display:block and display:none;Transform cells into rows using display:table-row;
  • 43. Responsive typographyJDDon’t ever use pixels for your non-root font-sizes. Use:• EM: relative to parent• REM: relative to roothtml { font-size: 10px; } /* establish root */Myelement { font-size:1.2rem; }Next, per viewport only optimize the root font-size:@media screen and (min-width: 64em) {html { font-size:14px; }}Take note:Ideal font size is based upon devicephysical width and viewingdistance, both of which are currentlyimpossible to detect.
  • 44. Responsive server-sideJDSet viewport width cookie in js:$.cookie("clientWidth", $(window).width(), { path: / });Parse into breakpoint id:define(PD_MQ_XXS,0);define(PD_MQ_XS,560);define(PD_MQ_S,640);define(PD_MQ_M,768);define(PD_MQ_L,1024);Conditional loading:<?php if ($this->viewportwidth !== false && $this->viewportwidth >= PD_MQ_M) { ?>// only load heavy resource as of this breakpoint<?php } ?>Take note:Be conservative in using server-sideresponsive techniques. And if youdo, use feature detection, not devicedetection if possible.
  • 45. Responsive javascriptJDCalculate media query breakpoint of current viewport:if (Modernizr.mq(only screen and (min-width: 0em))) mqMode = {name:xxs,num:1};if (Modernizr.mq(only screen and (min-width: 35em))) mqMode = {name:xs,num:2};if (Modernizr.mq(only screen and (min-width: 40em))) mqMode = {name:s,num:3};if (Modernizr.mq(only screen and (min-width: 48em))) mqMode = {name:m,num:4};if (Modernizr.mq(only screen and (min-width: 64em))) mqMode = {name:l,num:5};Breakpoint-specific logic in JS:var truncChars = $(this).data("trunc-" + mqMode.name);Respond to feature in JS:if(!Modernizr.backgroundsize) { imglink.backstretch(img.attr(src)); }
  • 46. Respond to browser featuresJD.no-cssgradients {header.site {background:darken($theme-color-header-background,15%) url(../img/bg_skin.png);}}.no-fontface [class^="icon-"]:before,.no-fontface [class*=" icon-"]:before {display:none;}Don’t detect browsers, detect features and respond to it. Use Modernizr to test forfeatures in both JS and CSS.
  • 47. High PPI RetinaJDRetina check: zoom browser to 200%. If elements lookgrainy, your design is not high PPI ready.Respond to high PPI:@mixin bg-retina($bgsize) {@media screen and (device-pixel-ratio: 2) {background-size: $bgsize !important;}}
  • 48. SpeedJD
  • 49. SpeedJDNearly 60% of web users say they expect a website to load on theirmobile phone in three seconds or less, and 74% are only willing towait five seconds or less for a single web page to load beforeleaving the site. 50% are only willing to wait five seconds or less foran application to load before exiting. (source)• Performance as feature, not an afterthought• Any performance tuning is good tuning• Aim for a server-response time of 100ms, page weight of 500KB orless.• Save 300ms of response time by using FastClick (use with care)
  • 50. Internet ExplorerJD• IE6: Ignore• IE7: Ignore• IE8: No media queries, but can’t ignore• Use Respond.js• Use Modernizr• IE9: Media queries work, Modernizr for rest• IE10: Should just work like other browsersAt a minimum, makesure content isvisible
  • 51. TestingJD• Resize windows until it hurts• Resizer bookmark• Test on actual devices• Browserstack• Let people you know use it
  • 52. • Responsive knowledge (strategic and technical)• CSS expert level• HTML5/CSS 2.1/3 standards• Medior Javascript/jQuery• Browser knowledge• Progressive enhancement• Front-end performance tuning• Modernizr• SASS / LESS recommended• Willingness to constantly learn and practiceSkillsRWDDon’t be intimidated by theskills needed. They are easy onan individual level.The challenge lies in the methodand mindset, not in thetechnology.The rewards are very high: youwill be able to build a truly fluidweb, with a reach thatsurpasses anything ever before.
  • 53. This is not the future, this is nowThe problem is older than mobile and bigger thanmobilePay attention to key design decisions at start ofprojectDo not cater for devices and pixels, get away fromthemEmbrace flexible web design and progressiveenhancement, do not fight itEmbrace bullet-proof, ultra reusable designLeverage frameworks, but don’t go overboardStay up to speed and invest deeply in skills that matterFinal adviseRWD
  • 54. ferdy.christant@gmail.comTY!