O SlideShare utiliza cookies para otimizar a funcionalidade e o desempenho do site, assim como para apresentar publicidade mais relevante aos nossos usuários. Se você continuar a navegar o site, você aceita o uso de cookies. Leia nosso Contrato do Usuário e nossa Política de Privacidade.
O SlideShare utiliza cookies para otimizar a funcionalidade e o desempenho do site, assim como para apresentar publicidade mais relevante aos nossos usuários. Se você continuar a utilizar o site, você aceita o uso de cookies. Leia nossa Política de Privacidade e nosso Contrato do Usuário para obter mais detalhes.
Everything You Know is Not Quite Right Anymore: Rethinking Best Web Practices to Respond to the Future
We’ve entered a new era where an increasing number of devices with wildly divergent features— including phones, tablets, game consoles, and TVs—are connected to the Internet. As the way people access the Internet changes, there is an urgent need to rethink how we use the web to communicate.
This doesn't mean creating separate solutions for each device but rather preparing our existing content to meet an unpredictable future. Responsive web design means changing how we plan and evaluate performance. Dave Olsen and Doug Gapinski share and examine examples to help institutions rethink and adjust for the future-friendly web.
Professional Technologist, West Virginia University
100% SUCCESS RATE FOR SELLING JUST BY TALKING ABOUT IT Responsive Redesigns in Progress Retrofits in Progress UC Hastings University of Rochester Webster University Manhattan College Drake University Miami University Whittier CollegeSpring Arbor University Herzing University St. Joseph’s College
PLANNING FOR FUNDAMENTALS A flexible The design has fluid layout elements grid that change based on browser size.Conditional The design uses one or more techniques images and to scale images and media so that theother media design performs well across devices. Media Conditional code that changes items on a queries page based on device detection or browser width.
PLANNING FOR ADVANCED FUNDAMENTALS Advanced A basic fluid grid is the priority; but to be fully elements responsive we must often cover slideshows, tables, tabs, multi-column type, custom widgets, forms, and more. Touch Touch input is a critical development input component as we move away from a mouse- first model of human-computer interaction RESS and Heavy lifting for user agent detection and server-side conditional media deployment is done by theconditionals server, not the device.
Planning: full wireframes for each breakpointPros: Cons• most thorough method • takes the longest• no page element left unexplored • in some cases, wireframes don’t• may be the best solution for retrofitting preclude the group changing their mindbecause it provides the most detail later • with a slow-decision group, can bog down length of process
Planning: responsive prototypesPros: Cons:• gets specific about repositioning and • requires someone on the team havecontent without promising every detail front-end skills• one asset per template instead of three • may not preclude the need for moreor four detailed wireframes
Styletiles: for when moodboardsare too vague and comps are too precise Source: styletil.es
86%RWD sites whosesmall screen designweights the same asthe large screen.Source: Podjarny
71%Users expect yourmobile site to loadas quickly as yourdesktop site.Source: Gomez
“ The way in which CSS mediaqueries have been promoted for mobile hides tough problems and gives developers a falsepromise of a simple solution for designing for small screens.” Source: Jason Grigsby on Speakerdeck
Mobile first meansperformance first(start thinking about performance at the design stage)
PRIMARY PERFORMANCE ISSUES FOR RWDOver Downloading Poor NetworksDownload & Hide High LatencyDownload & Shrink Variable Bandwidth Excess DOM Packet Loss
THE LATENCY EFFECT The average web site requires 85 requests... Cable Modem Cell Network (20ms latency) (200ms latency) http://ﬂic.kr/p/6xQPdi 0.4 seconds 4.2 secsSource: Guy Podjarny & HTTP Archive 10 times slower!
http://ﬂic.kr/p/a4VsPvRESS* can be a scalpelfor your responsive designs.REsponsive Design + Server Side Components
THE ULTIMATE MOBILE PERFORMANCE BOOKMARKLET mobile bookmarklet
SLOWING THINGS DOWN Charles Throttlecharlesproxy.com
EMULATING MOBILE DEVICESBrowserStack Emulatorscharlesproxy.com
GET YOUR HANDS ON REAL DEVICESeBayMobileKarma.comCellphone store leftoversOpen device labs http://ﬂic.kr/p/7972f6
HOW TO DECIDE WHICH TO GET Base on: Example: WiFi-capable, Analytics Rank, OS, Screen iPod Touch Dimensions, & Cost Samsung Fascinate + HTC Thunderbolt + Suggested focus: iPod Touch, mid-levelAndroid, high-end Android, a tablet, Blackberry, $438 Windows Phone 7
ADOBE EDGE INSPECT(THE APP FORMERLY KNOWN AS ADOBE SHADOW)
Higher education professionals need to think & behave in a future-friendly way. Visit: futurefriend.ly