Responsive Web Design at UCR
Upcoming SlideShare
Loading in...5

Responsive Web Design at UCR



The road to responsive design - how to get on the path to greater usability.

The road to responsive design - how to get on the path to greater usability.



Total Views
Views on SlideShare
Embed Views



2 Embeds 7 4 3



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment
  • % are responders that say yes to use-case questions -Cisco VNI Global Mobile Forecast2012Most people use these devices at homeEmail, twitter, facebook, various apps,
  • Device Sensors include: - Camera including video - Geolocation - Accelerometer - compass -resource access: calendar; contacts; photos; videosScott’s work to deliver our MyUCR mobile to iPhone – used Titanium, but still had to work at devoloping an Android version, not to mention iPad and other tablets….. Would have seriously considered going web w/ RWD and touch interface framework – Jquery Mobile
  • Typography: Large headings can work well on wider layouts, but on smaller screens they can take up a lot of vertical space and therefore require additional scrolling. As line lengths alter, you should consider line heights and other typographic treatments too.Links: How will your design work on touchscreen devices? While we don’t have an easy way to detect these yet (meaning we should take touch into account in all aspects of our design), designing for a narrower screen can give us an opportunity to think about target areas for links and other interactive elements. The iOS guidelines recommend that these be at least 44 pixels/points square, which is a good figure to aim for.Navigation: This will probably be the most awkward component of any responsive design, especially if your site has many sections and a deep hierarchy. Brad Frost has written a summary of some different approaches to navigation currently being considered.Superfluous content: Is some content not required? Does other content only need to be shown in certain scenarios? I don’t advocate hiding content based on what device a user happens to be using, but techniques like conditional loading (which we’ll look at later this week) can help us serve up smaller pages that only load complementary content when required.
  • Responsive images - The goal of this technique is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions.
  • Zurb is the responsive design framework that gives you: - Base CSS styles - Media Queries the drive the transitions - Other Frameworks out there – popular: - 320 and Up - Twitter BootstrapDemo: - First Bit – Global Navigation on Mobile is hidden – using the + button to reveal the categories - Call to Action buttons get full width on mobile screen – by default - 2ndNav goes from horiz tabs to Vertical Nav Bars - Upcoming talks get pared down to the most recent – I would have chosen a slider instead!! - Talks fold into one column - Footer goes from 3-col to one 2ndNav gets stacked – vertical nav bars
  • LukeWroblewski – former head of UI for YahooEthan Marcotte - Over the years his clientele has included New York Magazine, the Sundance Film Festival, the Boston Globe, and the W3C – gBrad Frost – huge RWD proponent: designed for Verizon; Mastercard; Tiffany; Nike Gear-up; Centrum Nutrition

Responsive Web Design at UCR Responsive Web Design at UCR Presentation Transcript

  • Starting a Dialog Responsive Web Design (RWD) 10/2/2013 1Randal Maile - VCSA TS
  • The Device Tidal Wave 10/2/2013 2 GROWTH = OPPORTUNITY Randal Maile - VCSA TS
  • 10/2/2013 3Randal Maile - VCSA TS
  • 10/2/2013 Randal Maile - VCSA TS 4
  • 10/2/2013 Randal Maile - VCSA TS 5
  • 10/2/2013 Randal Maile - VCSA TS 6
  • 10/2/2013 7 The Mobile Landscape - usage  Average smartphone usage nearly tripled in 2011 -Cisco VNI Global Mobile Forecast 2012  Android is now higher than iPhone levels of data use. -Cisco VNI Global Mobile Forecast 2012  “The Number Of Mobile Devices Will Exceed World’s Population By 2012 (& Other Shocking Figures)” -tech crunch – Feb 14th 2012  Avg smartphone user visits up to 24 Web sites visits per day -MobiAD News 2011 Randal Maile - VCSA TS
  • 10/2/2013 8 The Mobile Landscape – U.S. Behavior Randal Maile - VCSA TS
  • 10/2/2013 Randal Maile - VCSA TS 9
  • 10/2/2013 10 at work!! Randal Maile - VCSA TS
  • 10/2/2013 11 REC CENTER Mobile Usage – growth over two years 300% Growth! Randal Maile - VCSA TS
  • 10/2/2013 12 THE WELL Mobile Usage – growth over two years 300% Growth (again)! Randal Maile - VCSA TS
  • 10/2/2013 13 DINING Mobile Usage – growth over two years 300% Growth (WTH)! Randal Maile - VCSA TS
  • The Mobile First Mindset 10/2/2013 14 Why is this important? Randal Maile - VCSA TS
  • 10/2/2013 15 What the tech industry is thinking  We're just now starting to think about mobile first and desktop second for a lot of our products.” -Kate Aronowitz, Design Director Facebook  We really need to shift now to start thinking about building mobile first. This is an even bigger shift than the PC revolution.” -Kevin Lynch, CTO Adobe  “Designing the mobile app first forced us to strip down to essentials.” -Bill DeRouchey, BankSimple "We understand that the new rule is mobile first," Schmidt said. "Mobile first in everything. Mobile first in terms of applications. Mobile first in terms of the way people use things. And it means … that we have a role now to inform, to educate through all these devices." - Eric Schmidt, Executive Chairman Google Randal Maile - VCSA TS
  • 10/2/2013 16 What the web design community is thinking  Mobile First is a major paradigm shift  The tidal wave is coming so make sure your designs don’t loose users in what will become the dominant device category.  Mobile First design forces teams to have a laser like focus – there’s no room for bloated content.  Progressive Enhancement vs. Graceful Degradation  PE = Scaling up { Ensures that your message, content and functionality remain intact as the screen real estate and connection speed increase}  GD = Scaling down { Runs the risk of your core message and functionaltiy getting lost by the time you squish it all the way down to mobile context. Randal Maile - VCSA TS
  • 10/2/2013 17Randal Maile - VCSA TS
  • 10/2/2013 18 APPS APPS APPS – not so fast! No, not always …. Randal Maile - VCSA TS
  • 10/2/2013 19 Pros and Cons – Native vs. RWD Pros of a native app:  Easily monetized  Access to device sensors  Once downloaded, the content is easily accessible  Content available offline  Great is there’s no WiFi or 3G Pros of a responsive site:  Bypass the App Store approval process  No user intervention needed to download an app  Easier to build and less time- consuming  Content distributed cross platform  Better suited for basic web sites Randal Maile - VCSA TS
  • 10/2/2013 20 What is Responsive Web Design (RWD)?  Ethan Marcotte coined the term – boils down to: “Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience. We can design for an optimal viewing experience, but embed standards- based technologies into our designs to make them not only more flexible, but more adaptive to the media that renders them”. Randal Maile - VCSA TS
  • 10/2/2013 21 Great - see it in action?  Media Queries - A collection of inspirational websites using media queries and responsive web design. Low and behold: Randal Maile - VCSA TS
  • 10/2/2013 22 RWD - Basics  Combines fluid layouts, flexible images and media queries to help us build sites that gracefully adapt to any environment they encounter.  Fluid Grids that ebb and flow w/ the devices’ screen size.  Flexible images and media that keep content intact at any resolution.  Media queries allowing designs to adapt by establishing dimensional breakpoints. Randal Maile - VCSA TS
  • 10/2/2013 23 Major Design Considerations  Typography:  Consider creating an adaptive typography layer in your CSS  Basically, you need to think about font sizes and leading so that they are optimized per device.  Links:  Consider optimal target areas on smaller screens  Larger Buttons  Minimum of 9mm / 34 px square  Plain hypertext – line-height is important  Touch Target Sizes  Recommended touch target size is 9mm/34px  Minimum touch target size is 7mm/ 26px  Visual size is 60-70% of touch target size  Navigation: A respectful challenge, especially if there are many sections with a deep hierarchy  Brad Frost has written a summary of some different approaches to navigation .  Superfluous content:  Users are not always “on the go” as the idea in the web community originated – be careful about discarding content. (80% of mobile users at home!)  Having said this, the “mobile first” philosophy, applied intelligently, will tend to produce cleaner websites that have more focus – desktop layouts can then be expanded out. Randal Maile - VCSA TS
  • 10/2/2013 24 RWD Technical Considerations  Reduce Requests and File Size:  Minimize server requests and redirects  Consolidate CSS & Javascript to a single file  Reduce dependencies on heavy JS libraries  Minify your code  Potentially use “Responsive-Images” or server-side solution Randal Maile - VCSA TS
  • 10/2/2013 25 Common Pitfalls  Hiding Content - don’t penalize users for the device they happen to be browsing with  Having said – explore the use cases and the user’s environment – sometimes a site that lends itself to on-the-go browsing will offer up unique content and placement.  Extensive Navigation at the top of the page –  Mobile users want to see content first – have to consider this – make sure nav is either hidden, or minimal if shown.  Take a bloated framework or CMS, too many server requests, large images, uncompressed front-end code and expect an optimal mobile user experience  Time before 74% of all users will bounce from your site = 5 seconds  Consider everything that you and your client are planning on including  Create a hierarchy of importance so that you can trim the unnecessary for the smaller versions.  Relying on device dimensions  We don’t control visitor’s browser sizes. The more devices that come out the wider the screen-size variety. It’s not about what happens at the breakpoints, it’s about what happened between them. Randal Maile - VCSA TS
  • VCSA Tools 10/2/2013 26 Taking the Plunge Randal Maile - VCSA TS
  • 10/2/2013 27 Our Platform  Zurb Foundation – Jonathan Smiley  Front-end framework  Designed to be overridden  Resonable learning curve  Light weight  MVC3  light-weight  modern web standards adherent  completely customizable  Agile  It’s not SharePoint – we can do more and w/ less hassle!  NuGet Package for Foundation w/ Demo site Randal Maile - VCSA TS
  • 10/2/2013 28 More On Zurb  Components:  Global Styles  Eric Meyer’s reset styles  Typography, links, lists, tables, etc base styles  Flexible twelve column grid  Semi-liquid, mobile-scaling  Uses media queries to shift to smaller devices  Buttons that scale / modify on mobile  Forms  Validation styles, custom radio, checkboxes, and select lists (easy to style)  UI Goodies  Orbit – cool slider that scales; supports swipe on touch devices  Reveal – cool modal fly-in box  Horizontal/Vertical Tabs (these get converted automatically!!!)  Tooltips; Pagination; Breadcrumbs  Flexible Images and Video  More on Layout  Mobile Visibility- Want to hide something on phones, or show it only on tablets? :  Show-on-desktops; show-on-tablets; show-on-phones  Hide-on-desktops; hide-on-tablets; hide-on-phones  Mobile Grid – everything doesn’t automatically get linearized:  Block Grids – n-up styles based on unordered lists  Mobile Grid – supports nested 4- column layout  Source ordering – you can change the order in which your columns get ordered (desktop vs. mobile) Randal Maile - VCSA TS
  • 10/2/2013 29 Browser Support Randal Maile - VCSA TS
  • Our Proof of Concept 10/2/2013 30 Culinary Chameleon Randal Maile - VCSA TS
  • 10/2/2013 31 Culinary Chameleon Site Features  Concept: establish a web presence for the UCR Food Trucks  3 “pages”: Food Truck (“Culinary Chameleon”); Coffee Truck (“Bear Tracks”); Request Truck  Features:  Truck Location  Truck Menu  Truck Hours  Google Map – truck location tracking  Google Calendar – upcoming events  Request a Truck web form – reserve either truck for upcoming events  Twitter Feeds: @culinchameleon; @UCR_CoffeeTruck  Responsive web design can be tricky – why CC is a good POC:  Simple site – essentially 3 pages  Fairly simple layout – not too much overriding of the RWD framework  Simple navigation – can use OOTB Foundation features Randal Maile - VCSA TS
  • 10/2/2013 32 Desktop Comp – Food Truck Page Randal Maile - VCSA TS
  • 10/2/2013 33 Mobile Layout Randal Maile - VCSA TS
  • 10/2/2013 34 Why does this matter?  Does the user bounce from your site if not rendered properly?  Does the user bounce from your site if not quick enough?  Is the user frustrated by navigation?  When people land on a site that is tailored for their device, it speaks volumes about your brand. Randal Maile - VCSA TS
  • Resources 10/2/2013 35 Some Hefty Reading… Randal Maile - VCSA TS
  • 10/2/2013 36 Useful Resources – High Regard  Design Blogs  A List Apart  Smashing Magazine  CSS Tricks  .netMagazine  SitePoint  Books  Responsive Web Design (A Book Apart)  Mobile First (A Book Apart)  Marketing Reports  Morgan Stanley – Internet Trends 2010  Equation Research / Compuware – What Mobile Users Want  Cisco Visual Networking Index: Global Mobile Data Traffic Forecast Update: 2011- 2016  Leaders  Luke Wroblewski  Ethan Marcotte  Brad Frost Randal Maile - VCSA TS