{"id":174,"date":"2014-06-18T20:21:51","date_gmt":"2014-06-18T20:21:51","guid":{"rendered":"http:\/\/www.minotaurdesign.com\/blog\/?p=174"},"modified":"2014-06-18T22:08:34","modified_gmt":"2014-06-18T22:08:34","slug":"notes-giantconf-2014s-rwd-workshop-brad-frost","status":"publish","type":"post","link":"https:\/\/www.minotaurdesign.com\/blog\/2014\/06\/18\/notes-giantconf-2014s-rwd-workshop-brad-frost\/","title":{"rendered":"Notes from GiantConf 2014&#8217;s RWD workshop with Brad Frost"},"content":{"rendered":"<p>In his RWD workshop this last weekend at <a href=\"http:\/\/www.giantconf.com\">GiantConf 2014 <\/a>Brad Frost plowed through the history, current state, best practices and possible futures of the RWD philosophy\/approach. Here are my notes from his talk.<\/p>\n<p><strong>June 14, 2014<\/strong><\/p>\n<p><strong>His experience: web on mobile for 4+<\/strong><\/p>\n<ul>\n<li>Responsive Design Patterns<\/li>\n<li>ThisIsResponsive.com website and github (http:\/\/bradfrostweb.com\/blog\/web\/this-is-responsive\/ &#038; http:\/\/bradfrost.github.io\/this-is-responsive\/index.html)<\/li>\n<li>(older site) &#8211; Mobile web best practices<\/li>\n<li>WTF Mobile Web (what not to do)<\/li>\n<li>Cosigner of Future Friendly Manifesto<\/li>\n<li>Worked for R\/GA at one point\u2026showed the company logo slide to illustrate that no one knows what they&#8217;re doing.<\/li>\n<\/ul>\n<p><strong>General Landscape<\/strong><\/p>\n<ul>\n<li>i6bb mobile subscriptions<\/li>\n<li>in america, 91% of americans have a mobile\u2026 56% of those are smart phones.<\/li>\n<li>1.5 mm android activations a day<\/li>\n<li>1\/3 americans have an ereader\/tablet<\/li>\n<li>20% of ALL internet traffic is mobile<\/li>\n<li>68% of americans access the web via phone<\/li>\n<li>33% of those ONLY use the mobile web<\/li>\n<li>Mobile web pictogram &#8211;<\/li>\n<li>157mm users ONLY use FB from their mobile<\/li>\n<li>What are we sharing from mobile on social? (text photos videos and LINKS)<\/li>\n<li>51% of referral traffic to media sites came from FB mobile<\/li>\n<li>blog.cloudfour.com &#8211; good status on mobile &#8211; a comprehensive guide<\/li>\n<\/ul>\n<p><strong>Approach &#8211; Options<\/strong><\/p>\n<ul>\n<li>Do nothing. (rant: cultivating a nation of slide swiping screen surfing zombies)<\/li>\n<li>Make an APP!\n<ul>\n<li>App glut<\/li>\n<\/ul>\n<\/li>\n<li>Links don&#8217;t open apps<\/li>\n<li>pros and cons of course<\/li>\n<li>Separate Design Experiences (Nielsen&#8217;s advice, to build two sites and cross-linking to make it work.)<\/li>\n<ul>\n<li>more dedicated, optimized, catered experience<\/li>\n<li>no need to adapt<\/li>\n<li>potential to be more performant<\/li>\n<li>url redirection (getting a mobile version of a site on your desktop due to a link given to you)<\/li>\n<li>content parity<\/li>\n<li>content governance<\/li>\n<li>device database<\/li>\n<li>SEO issues (better to keep your links under the same single site)<\/li>\n<li>Continuity issues<\/li>\n<li>The Space Between (kindle fire, etc.)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Strategy<\/strong><\/p>\n<ul>\n<li>Build a barebones mobile responsive site, and grow it over time. <\/li>\n<ul>\n\t\t\teventually kill the old clunky desktop site<\/li>\n<\/ul>\n<li>Responsive retrofitting a site<\/li>\n<ul>\n<li>j spool&#8217;s &#8216;escalator of acquired knowledge&#8217; (people hate when you completely tear down and rebuilt their beloved sites)<\/li>\n<\/ul>\n<\/li>\n<li>Mobile First (progressively enhanced, future friendly, awesome)<\/li>\n<li>Piecemeal approach: &#8220;our responsive header is almost done\u201d\n<ul>\n<li>seen on really huge sites in recent times. footer, header, module by module<\/li>\n<li>acclimatizes the user<\/li>\n<li>he&#8217;s only seen it in large companies, but he thinks it could work very well for small <\/li>\n<p>companies\/sites\/teams, perhaps more so.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Foundations<\/strong><\/p>\n<ul>\n<li>Ethan Marcotte @2010 in ALA<\/li>\n<li>Fluid Grids, Media Queries, Flexible images<\/li>\n<li>the Fluid grid should do most of the heavy lifting! (don&#8217;t go crazy with media queries!)<\/li>\n<li>Context is needed\n<ul>\n<li>Adaptive is a bigger container than responsive, and itself contains responsive<\/li>\n<\/ul>\n<\/li>\n<li>There are other parts, but RWD is what stuck.<\/li>\n<ul>\n<li>Feature Detection<\/li>\n<li>Server side components*<\/li>\n<li>interdevice communication<\/li>\n<li>performance, etc.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Principles of Adaptive design<\/strong><\/p>\n<ul>\n<li>ubiquity (this is for everyone, for anyone, for us all<\/li>\n<ul>\n<li>diversity is not a bug, it&#8217;s an opportunity) &#8211; step reiger<\/li>\n<li>mobile users will do everything desktop users do, if it&#8217;s accessible.<\/li>\n<li>Content parity<\/li>\n<li>Context\n<ul>\n<li>Quantitative<\/li>\n<li>Qualitative<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>flexibility<\/li>\n<ul>\n<li>embrace the squishiness<\/li>\n<\/ul>\n<\/li>\n<li>performance<\/li>\n<ul>\n<li>71% of mobile users expect mobile sites to load as fast or faster than desktop sites<\/li>\n<li>you have 5 seconds of someones time\u2026<\/li>\n<\/ul>\n<\/li>\n<li>Future friendly &#8211; Invest in your content. -> Make APIs, not war<\/li>\n<\/ul>\n<p><strong>Frameworks<\/strong><\/p>\n<ul>\n<li>Bootstrap, Foundation by Zurb, etc.<\/li>\n<li>Jetstrap\/Bootkit\n<ul>\n<li>these are all well and good, but lead to look alike issues<\/li>\n<li>One-size-fits-all<\/li>\n<li>Potential for bloat\/unneeded stuff<\/li>\n<li>might not do what you need<\/li>\n<li>integration issues<\/li>\n<li>have to subscribe to someone else&#8217;s decisions<\/li>\n<\/ul>\n<\/li>\n<li>Tiny Bootstraps, for every client. &#8211; Dave Rupert<\/li>\n<li><strong>Front end style guides<\/strong><\/li>\n<li>promotes consistency cohesion<\/li>\n<li>easier to test<\/li>\n<li>better workflow*<\/li>\n<li>creates a shared vocabulary<\/li>\n<li>useful reference<\/li>\n<li>Lots of front end style guides coming out (started with starbucks. starbucks.com\/static\/reference\/styleguide)<\/li>\n<li>problems with these:\n<ul>\n<li>Time consuming to create<\/li>\n<li>treated as an auxiliary project<\/li>\n<li>often too abstract<\/li>\n<li>often seen only as a designer\/development tool<\/li>\n<li>created after a project launches<\/li>\n<li>often incomplete, only serving present use cases<\/li>\n<li>often lack a clear methodology<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Atomic Design<\/strong><\/p>\n<ul>\n<li>josh duck&#8217;s periodic table of html elements<\/li>\n<li>@dmolsen<\/li>\n<li>Abstract \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014-> Concrete<\/li>\n<li>Creators \u2014\u2014\u2014\u2014\u2014\u2014\u2014\u2014-> Clients<\/li>\n<li>Atoms, Molecules, Organisms, Templates, Pages<\/li>\n<li>Reference, Build, Build, Build, Reference<\/li>\n<\/ul>\n<p><strong>the pattern<\/strong><\/p>\n<ol>\n<li>ATOMS (input field)<\/li>\n<li>Molecules (search module)<\/li>\n<li>Organism (site header)<\/li>\n<li>Templates (site header bundled into a whole page template) -focus on content structure (reference to mark boulton.co.uk &#8211; content strucure first, not required to have content first)<\/li>\n<li>Pages (the pouring in of real &#038; true representative content to see if it all works)<\/li>\n<\/ol>\n<ul>\n<li>validate or invalidate the atomic design thus far<\/li>\n<li>you test variations of the template at this point (still the same template though!)<\/li>\n<li>does it scale? (content length, list item length, etc.)<\/li>\n<\/ul>\n<p><strong>pattern lab<\/strong><\/p>\n<ul>\n<li>@dmolsen Dave Oldsen and Brad created it\n<li>Open source project\n<li>What is it?\n<ul>\n<li>It&#8217;s a design system BUILDER<\/li>\n<li>designed to help you execute a design system<\/li>\n<li>a custom component library<\/li>\n<li>a pattern starter kit<\/li>\n<li>a practical viewport resizer<\/li>\n<li>an annotation tool<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>It&#8217;s NOT:<\/strong><\/p>\n<ul>\n<li>a UI framework<\/li>\n<li>Language, library, or style dependent<\/li>\n<li>Incredibly rigid<\/li>\n<li>&#8220;just\u201d a pattern library, but also not a prod ready static site generator<\/li>\n<li>..like Jekyl<\/li>\n<\/ul>\n<p><strong>moving parts<\/strong><\/p>\n<ul>\n<li>builder\n<ul>\n\t\t\tmustache for templating the guts<\/li>\n<p>\t\t\tJSON for piping in real content<\/li>\n<\/ul>\n<\/li>\n<li>viewer\n<ul>\n<li>\t\tish (gives you a different value every time (small button gives you a smallISH value)<\/li>\n<li>\t\tLets you rapidly preview random and different layout scenarios<\/li>\n<li>\t\tdisplays the size of the display currently in view.. as px and ems. Annotations<\/li>\n<li>\t\this issues with wireframes in general\u2026 long assed annotations, iXds are working in a layer of abstraction<\/li>\n<li>\t\tThe annotation tool couples numbers with an overlaid layer of annotated description<\/li>\n<li>\t\tAnnotations with JSON<\/li>\n<li>\t\tLineage<\/li>\n<li>\t\tShows off what components make up a particular component, and where its applied.\n<ul>\n<li>&#8216;X pattern contains the following patterns&#8217;<\/li>\n<li>&#8216;x pattern is included in the following patterns&#8217;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p><strong>Other stuff<\/strong><\/p>\n<ul>\n<li>code view<\/li>\n<li>pattern status<\/li>\n<li>auto refresh<\/li>\n<li>page follow<\/li>\n<li>Future: plugins<\/li>\n<li>idea of checking your performance budget whilst developing with Pattern Lab<\/li>\n<\/ul>\n<p><strong>What&#8217;s the hardest aspect of responsive web design?<\/strong><\/p>\n<ul>\n<li>design\/dev or people\/process (overwhelmingly process\/people)<\/li>\n<li>Entertainment Weekly<\/li>\n<li>you have to sell people that RWD is the right thing\n<ul>\n<li>using data (showing conversions, improvement metrics &#8211; hockey sticks)<\/li>\n<li>SHOWING not TELLING is a lot easier to sell through to clients<\/li>\n<li>talk about the simplicity of the 3 pillars (flex grid, resp images, media queries)<\/li>\n<li>why RWD matters, selling to Tiffany in his R\/GA days:\n<ul>\n<li>He took a representative page from their site\u2026 (their desktop site), and demoed how it COULD be if set up properly\n<ul>\n<li>It took him half a day\u2026<\/li>\n<li>they then took a crapload of devices and spread them out on a long table\u2026 two tabs open on each device one for now vs possible Set Expectations<\/li>\n<\/ul>\n<\/li>\n<li>Don&#8217;t sell websites like a painting. Instead, sell easy and sexy access to content, agnostic of device, screen etc.<\/li>\n<li>Kill the waterfall! IA->VISUAL->DEV = no good Interface Inventory<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<li>Much like a content inventory, but more specific<\/li>\n<li>pick out, cluster, and inventory the buttons, inputs etc. &#8211; this illustrates the differences, similarities, the scope of the current interface situation<\/li>\n<li>This helps you gauge LOE on a redesign!<\/li>\n<li>Document your interface<\/li>\n<li>Promote consistency<\/li>\n<li>Establish which elements will be challenging to translate into RWD<\/li>\n<li>lays groundwork for future style guide\/pattern library<\/li>\n<li>Evernote for Interface Inventories &#8211; Aaron Gustafson<\/li>\n<\/ul>\n<p><strong>Establish Direction<\/strong><\/p>\n<ul>\n<li>before too long, you can design for the content structure you KNOW will exist<\/li>\n<li>use of style tiles for visual direction &#8211; more specific than a mood board, but not getting too far down into the weeds<\/li>\n<li>use of Typecast for brainstorming and playing with potential typographic treatments<\/li>\n<\/ul>\n<p><strong>Rolling up your sleeves<\/strong><\/p>\n<ul>\n<li>build out basic patterns based on design sketches<\/li>\n<li>moving into element collages (still not full comps)<\/li>\n<li>often start with header and footer<\/li>\n<li>often end up with odd states.. ie a finished header and footer but very rough main content well &#8211; this requires frequent communication with client so they know how the process is flowing<\/li>\n<li>A traditional comp might not happen until nearly the end of design process \u2026and might be a coded comp vs a photoshop comp<\/li>\n<\/ul>\n<p><strong>Responsive Patterns<\/strong><\/p>\n<ul>\n<li>he collected design patterns, in b&#038;w &#038; very barebones. (thisisresponsive.com)<br \/>\ncreated to avoid re-explaining patterns again and again Layout<\/li>\n<\/ul>\n<p><strong>Grids<\/strong><\/p>\n<ul>\n<li>Which grid system should i use? (he doesn&#8217;t care \ud83d\ude09<\/li>\n<li>Css tricks.com don&#8217;t overthink it grids<\/li>\n<li>Future of CSS Layout<\/li>\n<li>Grid Layout<\/li>\n<li>Flexbox (see solvedbyflexbox.com)<\/li>\n<\/ul>\n<p><strong>Media Queries<\/strong><\/p>\n<ul>\n<li>avoid desktop-first styles (don&#8217;t set defaults only to have to overwrite them!)<\/li>\n<li>mobile first styles start from the perspective of small (using min-width vs max-width)<\/li>\n<li>the absence of support for media queries is in fact the first media query. &#8211; Bryan Rieger<\/li>\n<li>Let CONTENT, not screen size, determine breakpoints<\/li>\n<li>Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! &#8211; stephen hay<\/li>\n<li>HAY mode in Ish (in hay&#8217;s honor)<\/li>\n<li>use of EMs in media queries &#8211; no longer a strict best practice, but a matter of preference<\/li>\n<li>Still recommend using relative units (he has no pixel values in his styles)<\/li>\n<li>Use major AND minor breakpoints (minor being a component level breakpoint or page level breakpoint)<\/li>\n<li>don&#8217;t overdo it<\/li>\n<li>??? about localization and media query usage (german text is longer\u2026.)<\/li>\n<li>option 1: use the longest localization by default (his recommendation)<\/li>\n<li>option 2: apply a differentiator (addl class on the body tag etc.) and add\/modify german specific styles Multi-Device Layout Patterns<\/li>\n<\/ul>\n<p><strong>Mostly Fluid patterns<\/strong><\/p>\n<ul>\n<li>The Column Drop<\/li>\n<li>be careful that the stuff in the sidebars isn&#8217;t necessarily related to the main content (due to content hierarchy concerns)<\/li>\n<li>The Layout Shifter (brad voids these if possible, preferring simplicity)<\/li>\n<li>ie a complex, unique layout that really changes across breakpoints<\/li>\n<li>Tiny Tweaks &#8211; ie very little changes..<\/li>\n<li>minor font size or margin changes<\/li>\n<li>The Off Canvas (jason weaver &#8211; jasonweaver.name\/lab\/offcampus)<\/li>\n<li>stuff hangs out off screen until needed<\/li>\n<li>Content Choreography<\/li>\n<li>content folding (ie folding ads in between articles)<\/li>\n<li>could use flexbox (jordanm.co.uk\/lab\/content)<\/li>\n<li>could use AppendAround: a responsive Markup Pattern<\/li>\n<li>from Filament Group<\/li>\n<li>Don&#8217;t use this all the time, but it could help solve certain issues<\/li>\n<\/ul>\n<p><strong>Layout considerations<\/strong><\/p>\n<ul><\/li>\n<li>When users scroll on mobile we are moving backward through time<\/li>\n<li>moving through a list<\/li>\n<li>deep dive into content<\/li>\n<li>All these instances are scrolling through a singular content type<\/li>\n<li>don&#8217;t mix up your content types when you put stuff into a single column with RWD.<\/li>\n<\/ul>\n<p><strong>Conditional loading:<\/strong><\/p>\n<ul>\n<li>given the % of sites that push the same heavy content to mobile as desktop\u2026<\/li>\n<li>Aggressive enhancement (nice term) <\/li>\n<li>The Thing (a) beside and above NOT The Thing<\/li>\n<li>Instead, include links to the &#8220;not the thing\u201ds by fragmenting out that content<\/li>\n<li>put these fragments behind a lazy load and a user opt-in (via accordion for example)<\/li>\n<li>old browsers treat as links to different pages<\/li>\n<li>newer stuff fetches via ajax and drops it into the expanded module<\/li>\n<li>Larger format views display the whole thing by default<\/li>\n<li>(24ways.org\/2011\/conditional loading for responsive designs)<\/li>\n<li>Boston Globe does this with their weather widget<\/li>\n<li>either drives to a different page OR<\/li>\n<li>displays inline via async call How to do this?<\/li>\n<li>Matchmedia.js (has polyfills too)<\/li>\n<li>enquire.js<\/li>\n<li>Conditional CSS (adactio)<\/li>\n<li>Progressive disclosure as a term http:\/\/en.wikipedia.org\/wiki\/Progressive_disclosure<\/li>\n<li>Scanability vs capability is a balance<\/li>\n<li>It&#8217;s ok for different users to get a different experience as long as functionality remains accessible<\/li>\n<li>Screen size is just ONE variable.. (touch capability, etc. are others)<\/li>\n<li>Large screens do not always mean fast connection !! <\/li>\n<li>you can generalize somewhat<\/li>\n<li>you can TRY to detect bandwidth but it&#8217;s complex<\/li>\n<li>things like Boomerang test bandwidth by pinging all the time (hard on batteries ouch)<\/li>\n<li>Just design a fast experience!<\/li>\n<li>be mindful of the # of http requests<\/li>\n<li>look into server-side optimization<\/li>\n<\/ul>\n<p><strong>RESS ala Responsive Design + Server Side Components<\/strong><\/p>\n<ul>\n<li>lukew.com &#8216;s article<\/li>\n<li>described as a scalpel<\/li>\n<li>if on a mobile device, don&#8217;t load (this annoying thing)<\/li>\n<li>if on desktop, DO load (this crazy thing)<\/li>\n<\/ul>\n<p><strong>Touch (ala accommodate for meat sticks)<\/strong><\/p>\n<ul>\n<li>hybrid devices make things complex (windows tablets, Chrome Pixel, etc.)<\/li>\n<li>assumptions around touch targets, margins must be questioned<\/li>\n<li>keep everything touch friendly by default<\/li>\n<li>same issues on phablets (save for tests for touch etc.) Touch considerations<\/li>\n<li>don&#8217;t rely on hover states (don&#8217;t put important stuff there)<\/li>\n<li>if the info isn&#8217;t important, defer it (ie to a product detail page)<\/li>\n<li>or have it toggle display via touch.. BUT<\/li>\n<li>touch implies intent, so you can run into trouble here<\/li>\n<li>touch to toggle content is anticlimactic if users were trying to DO or GET something vs just exposing content<\/li>\n<li>Patrick Lauky &#8211; good source for touch related experimentation<\/li>\n<li>Look for opportunities to provide enhancements for touch devices, such as swipe gestures<\/li>\n<li>but be careful. careless touch input can result in unwanted effects or false positives.<\/li>\n<\/ul>\n<p><strong>Navigation<\/strong><\/p>\n<ul>\n<li>Navigation should be like a good friend\u2026 there when you need them, but cool enough to give you your space.<\/li>\n<li>don&#8217;t make users scroll through lots of nav to get to content Tactics<\/li>\n<li>Do nothing (leave nav as is) <\/li>\n<li>doesn&#8217;t scale for larger navigations<\/li>\n<li>Footer Anchor<\/li>\n<li>nav clicks drive user to footer via named anchor (no js used)<\/li>\n<li>somewhat disorienting (might be a good baseline pattern to be enhanced further)<\/li>\n<li>The Select Menu (ie. the drop down menu)<\/li>\n<li>good for non-primary navigation<\/li>\n<li>The Toggle (the current go to best practice)<\/li>\n<li>Content slides down and exposes navigation<\/li>\n<li>elegant<\/li>\n<li>keeps users in place<\/li>\n<li>relies on javascript<\/li>\n<li>The overlay (variation on the Toggle)<\/li>\n<li>does not drop content down<\/li>\n<li>unwanted link navigation on older devices (ie click goes to lower stacked element anchors)<\/li>\n<li>unwieldy (he tries to keep things on one plane)<\/li>\n<li>The nav flyout<\/li>\n<li>pro &#038; con: Able to display LOTS of nav items<\/li>\n<li>the go to for content-heavy sites<\/li>\n<li>consider content inventory\/strategy if you&#8217;re having to deal with a super long flyout menu<\/li>\n<li>The Priority + considerations approach<\/li>\n<li>Partial exposure of nav based on priority, with &#8216;\u2026more&#8217; link to expose the entire nav<\/li>\n<li>not a fan, but considers it worth exploring<\/li>\n<li>The HIDE and CRY<\/li>\n<li>no nav on mobile (ack) that comes close to desktop experience<\/li>\n<li>muy mal &#8220;mobile users don&#8217;t do\/need that\u2026\u201d Complex Navigation<\/li>\n<li>The Multi-Toggle<\/li>\n<li>ie. nested accordions ad infinitum<\/li>\n<li>behavior variations with touch devices.. (primary nav no longer can drive to a page, but must expand the subnav as only choice)<\/li>\n<li>Solution: add another item &#8220;all x products\u201d effectively acts as the click through for touch that desktop had.<\/li>\n<li>Right to Left (nav panes slide left or right based on clicking nav arrows in nav)<\/li>\n<li>follows nav convention of drilling in\/out<\/li>\n<li>right = deeper, left = shallower<\/li>\n<li>sony did this, but is no longer using it<\/li>\n<li>Skip the Subnav<\/li>\n<li>on small screens, just drive to the nav item&#8217;s landing page and then expose the sub navigation<\/li>\n<li>the main downside (but not a huge one) is you are forcing a full page refresh to get to desired destination<\/li>\n<\/ul>\n<p><strong>Navigation considerations<\/strong><\/p>\n<ul>\n<li>Find the balance between nav access and obtrusiveness<\/li>\n<li>Test!<\/li>\n<li>Be explicit about the nav icon (as much as you can)<\/li>\n<\/ul>\n<p><strong>IMAGES<\/strong><\/p>\n<ul>\n<li>avg 1.78mb page load \u2014- 1.12mb of that are images. Images are a huge issue.<\/li>\n<li>various screen sizes<\/li>\n<li>growth of high res screens<\/li>\n<li>varying bandwidth<\/li>\n<li>need for art direction ie diff crops, etc.<\/li>\n<\/ul>\n<p><strong>background images<\/strong><\/p>\n<ul>\n<li>these work as advertised, ie they behave properly in media queries\n<li>ie multiple backgrounds aren&#8217;t downloaded\n<li>use mobile first background images\n<li>don&#8217;t include large by default, introduce them in a media query block\n<li>Icons\n<li>many times they don&#8217;t look good on hi-res screens\n<li>use of ICON fonts is growing, and becoming a best practice\n<li>IcoMoon &#8211; quickly choose or build your own libraries and generate your own iconFont\n<li>Web Fonts (including Icon fonts) are NOT supported in a couple key browsers\n<li>Opera MINI &#8211; a proxy browser preloaded on many feature phones and smart phones\n<li>(proxy browsers end up taking very little bandwidth)\n<li>Older Windows Phone devices don&#8217;t support them.\n<li>Grumpicon converts images or svgs as data\n<li>can also use png image fallbacks\n<li>Grunticon output\n<li>important stuff -> All icons inline in the css as vector svg data urls (better support)\n<li>all icons inline in the css as PNG data urls\n<li>All of the icons referenced externally as png images, which are automatically generated from the source SVG and placed in a directory alongside the CSS files\n<\/ul>\n<p><strong>Image Considerations<\/strong><\/p>\n<ul>\n<li>Vectorize all you can<\/li>\n<li>use HTML special chars<\/li>\n<li>use icon fonts, but with fallbacks (SVG)<\/li>\n<li>If you use sprites, consider making a hi res sprite sheet<\/li>\n<li>Semantically important images<\/li>\n<li>preserve aspect ratio (brucelawson.co.uk preserving aspect ratio)<\/li>\n<li>Avoid text as images!!! (duh)<\/li>\n<li>Responsive image considerations<\/li>\n<li>Ensure content is legible on small screens<\/li>\n<li>Larger dimensions, higher compression rate (blog.netvlies.n\/design-interactive\/retina-revolution\/)<\/li>\n<li>Looks great on hi res screens and regular screens<\/li>\n<li>repainting the canvas is expensive performance wise (affects any fluid image)<\/li>\n<li>still doesn&#8217;t&#8217; provide art direction (example: obama at car factory &#8211; crop needed for mobile view)<\/li>\n<li>only make 1 image request per asset<\/li>\n<li>load the small image asset by default<\/li>\n<li>consider server-side detection<\/li>\n<li>WHATEVER you do, make sure it&#8217;s easy to swap out. It WILL be deprecated \ud83d\ude42<\/li>\n<li>Art Direction<\/li>\n<li>Focal point cropping: &#8211; designshack.net\/articles\/css\u2026.<\/li>\n<li>HTML5 Picture element is solidifying (finally)<\/li>\n<li>uses Jehl&#8217;s picture fill as a fallback?:<\/li>\n<li>accessible text<\/li>\n<li>SizerSoze.org (what is the cost of your non-responsive images?) <\/li>\n<li>calculates the savings if you were to use the above solution in your site<\/li>\n<li>SRC SET:\n<p>\t\t\t<.img src=\"small.jpg\"\n\t\t\t    srcset=\"large.jpg 1024w,\n\t\t\t    medium.jpg 640w,\n\t\t\t    small.jpg 320w\"\n\t\t\tsizes=\"(min-width: 36em) 33.3vw\",\n\t\t\t100vw\"\n\t\t\talt=\"a rad wolf\" \/>\n\t<\/li>\n<li>One beef was that it wasn&#8217;t using media queries (at one time)<\/li>\n<li>but it&#8217;s a nice quick easy way to explain multiple sizes of an image<\/li>\n<li>check out Coyier&#8217;s article on SrcSet vs Picture element<\/li>\n<\/ul>\n<p><strong>Video<\/strong><\/p>\n<ul>\n<li>Srcset<\/li>\n<li>fitvidsjs.com (by coyier)<\/li>\n<li>some sites have good examples how..<\/li>\n<li>vimeo, etc<\/li>\n<li>embedresposively.com<\/li>\n<\/ul>\n<p><strong>Maps<\/strong><\/p>\n<ul>\n<li>brad&#8217;s adaptive-maps badfrostweb.com\/blog\/post\/adaptive-maps<\/li>\n<li>apps hijacking the user&#8217;s attempt to browse for a navigation (not a bad thing, actually)<\/li>\n<li>using Google&#8217;s maps API via a link from the page&#8217;s representation of the map<\/li>\n<li>if screen scan accommodate the EMBEDDED map, instead just load the embedded map (example, min-width: 700px )<\/li>\n<\/ul>\n<p><strong>Lightboxes<\/strong><\/p>\n<ul>\n<li>example of a non-scaling pattern on Mashable<\/li>\n<li>not all desktop patterns scale to the small screen<\/li>\n<li>example of FB&#8217;s &#8216;create event&#8217; dialogue on mobile\/vs desktop<\/li>\n<li>Conditional Lightbox<\/li>\n<li>link to the raw image or chunk of content<\/li>\n<li>detect screen size<\/li>\n<li>ensure content is legible on small screens<\/li>\n<li>if screen is big, inject the lightbox functionality<\/li>\n<li>Magnific Popup &#8211; free responsive jquery lightbox plugin (also works with Zepto)<\/li>\n<\/ul>\n<p><strong>Data Tables<\/strong><\/p>\n<ul>\n<li>Table to name\/value pairs<\/li>\n<li>Table to List<\/li>\n<li>Priority Columns (the important data persists, others get pushed into a &#8216;display more&#8217; collapsed state)<\/li>\n<li>Horizontal overflow (locked column approach)<\/li>\n<li>Test lots! (some android devices don&#8217;t support this)<\/li>\n<li>Consider using combinations of these to meet needs<\/li>\n<li>Considerations for tables<\/li>\n<li>What the data is like matters<\/li>\n<li>how closely linked is the data&#8217;s display format to its semantic value?<\/li>\n<\/ul>\n<p><strong>&#8220;Modules&#8221;<\/strong><br \/>\n<strong>Carousels<\/strong><\/p>\n<ul>\n<li>make sure you actually need one<\/li>\n<li>runyon found that the % of folks that make it to panel #2 (of interactive carousels) is less than 5%<\/li>\n<li>shouldiuseacarousel.com (rounds up the numbers on usage and effectiveness)<\/li>\n<li>cycle through items that are similar (vs disparate item types)<\/li>\n<li>only load what you actually need<\/li>\n<li>be CLEAR about your carousel&#8217;s functionality ( &#8220;&#8230;&#8221; is not enough)<\/li>\n<li>suggest more content to users<\/li>\n<li>provide gestural hints (content overhang off screen)<\/li>\n<li>opera mini; doesn&#8217;t support touch events<\/li>\n<li>by default, provide fallback navigation (and replace it if touch is supported)<\/li>\n<li>Types of Carousels<\/li>\n<li>The Reveal (as screen space goes up, they expose more products in the carousel)<\/li>\n<li>takes great advantage of larger screens, avoids the &#8216;stark &#038; empty&#8217; effect<\/li>\n<\/ul>\n<p><strong>Accordions<\/strong><\/p>\n<ul>\n<li>Tabs to Accordian: codepen.io\/sturobson\/full\/xgfel (converts tabs to an accordian)<\/li>\n<li>Accordion to Full: each section\/subsection becomes an accordion section (ie collapses)<\/li>\n<li>when there&#8217;s enough room, it displays in full<\/li>\n<\/ul>\n<p><strong>Forms<\/strong><\/p>\n<ul>\n<li>Label alignment shifts (top labels for small screens, left for full screen)<\/li>\n<li>he prefers keeping them in the same place<\/li>\n<li>Float Label &#8211; animated floated label that kicks in when default text is overwritten by user input<\/li>\n<li>Float Label Form Interaction on Dribble<\/li>\n<li>Internal labels: pros and cons<\/li>\n<li>the field itself becomes a button\/field.<\/li>\n<li>saves lots of vert real estate<\/li>\n<li>not so good accessibility<\/li>\n<li>you lose field context when you enter text (since you&#8217;re overwriting)<\/li>\n<\/ul>\n<p><strong>Form Considerations<\/strong><\/p>\n<ul>\n<li>subtract as much as possible<\/li>\n<li>use proper input types<\/li>\n<li>chunk stuff up (multiple input phases allowing users to save progress (ie 1\/4&#8230; 2 of 4, etc.))<\/li>\n<li>use input types (number, email, url, tel) &#8211; this is the lowest hanging fruit here<\/li>\n<li>they all fall back to text if not supported<\/li>\n<li>Provide hinting<\/li>\n<li>be careful with inline labels<\/li>\n<li>validation but not too aggressive<\/li>\n<li>Opting out of RWD<\/li>\n<li>css-tricks.com\/user-opt-out-responsive design<\/li>\n<li>don&#8217;t use fixed positioning<\/li>\n<li>very buggy on older browsers<\/li>\n<li>just really goofy<\/li>\n<li>burns up valuable real estate<\/li>\n<li>Position: Fixed considerations<\/li>\n<li>If it must be used, fixed headers are more reliable as they degrade more gracefully<\/li>\n<li>avoid JS solutions<\/li>\n<li>be mindful of orientation change. use media queries to disable fixed for landscape orientation<\/li>\n<li>conditionally introduce fixed positioning when screen space becomes available<\/li>\n<\/ul>\n<p><strong>Development<\/strong><\/p>\n<ul>\n<li>Viewport metatag &#8211; tells browser to ignore its zoomed out state<\/li>\n<li>viewport in CSS<\/li>\n<li>@0webkit0-viewport {width: device-width} &#8212; etc.<\/li>\n<li>don&#8217;t disable the user&#8217;s ability to pinch and zoom<\/li>\n<li>only introduce the viewport meta tag when you&#8217;re sure the content is mobile-optimized<\/li>\n<li>CSS<\/li>\n<li>Border:<\/li>\n<li>SASS<\/li>\n<li>plain css is inefficient<\/li>\n<li>nesting is awesome in SASS<\/li>\n<li>variables are amazing<\/li>\n<li>putting media queries into SASS vars is a fav of his<\/li>\n<li>Nesting media queries <\/li>\n<li>changed his life forever<\/li>\n<li>.module { margin: 0 0 1em; padding: 1em; @media all and (min-width: 50em) { float: left; width: 50%; }<\/li>\n<li>Getting Sass to help with legacy IE -> nicolasgallagher.com<\/li>\n<li>respond.js by Scott Jehl<\/li>\n<\/ul>\n<p><strong>Device Support<\/strong><\/p>\n<ul>\n<li>what should i support?<\/li>\n<li>iOS<\/li>\n<li>Android<\/li>\n<li>repulsive yet relevant <\/li>\n<li>ie mobile, blackberry, silk, nokia etc.<\/li>\n<li>There is a difference between SUPPORT and OPTIMIZATION &#8211; focus on accessibility<\/li>\n<li>Redux: Ubiquity<\/li>\n<li>our responsibility to make content accessible across the world, across economic and social spectrum<\/li>\n<\/ul>\n<p><strong>Testing<\/strong><\/p>\n<ul>\n<li>remote testing tools (browserstack)<\/li>\n<li>viewport resizing tools<\/li>\n<li>Test on actual devices<\/li>\n<li>truly test a design&#8217;s performance<\/li>\n<li>Device capabilities<\/li>\n<li>Form factor<\/li>\n<li>Pixel Density<\/li>\n<li>Impact of the network<\/li>\n<li>Device Criteria<\/li>\n<li>your traffic, form factors etc. budget<\/li>\n<li>test w\/o breaking the bank &#8211; brad&#8217;s post from bradfrostweb.com<\/li>\n<li>OpenDeviceLab.com<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In his RWD workshop this last weekend at GiantConf 2014 Brad Frost plowed through the history, current state, best practices and possible futures of the RWD philosophy\/approach. Here are my notes from his talk. June 14, 2014 His experience: web on mobile for 4+ Responsive Design Patterns ThisIsResponsive.com website and github (http:\/\/bradfrostweb.com\/blog\/web\/this-is-responsive\/ &#038; http:\/\/bradfrost.github.io\/this-is-responsive\/index.html) (older &hellip; <a href=\"https:\/\/www.minotaurdesign.com\/blog\/2014\/06\/18\/notes-giantconf-2014s-rwd-workshop-brad-frost\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">Notes from GiantConf 2014&#8217;s RWD workshop with Brad Frost<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[2,4,20,21],"tags":[31],"_links":{"self":[{"href":"https:\/\/www.minotaurdesign.com\/blog\/wp-json\/wp\/v2\/posts\/174"}],"collection":[{"href":"https:\/\/www.minotaurdesign.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.minotaurdesign.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.minotaurdesign.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.minotaurdesign.com\/blog\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":3,"href":"https:\/\/www.minotaurdesign.com\/blog\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"predecessor-version":[{"id":177,"href":"https:\/\/www.minotaurdesign.com\/blog\/wp-json\/wp\/v2\/posts\/174\/revisions\/177"}],"wp:attachment":[{"href":"https:\/\/www.minotaurdesign.com\/blog\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.minotaurdesign.com\/blog\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.minotaurdesign.com\/blog\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}