(:Summary:Contains the 'action' links (like Browse, Edit, History, etc.), placed at the top of the page, see site page actions:) (:comment This page can be somewhat complex to figure out the first time you see it. Its contents are documented at PmWiki.SitePageActions if you need help. :) * View * Edit * History * Print

(:nl:)!! Responsive Web Design


''This seminar is a one-day, hands-on intensive focused on responsive web design. This is a design class, not a coding class, though familiarity with HTML and CSS is strongly recommended.'' * We will discuss how to approach a Responsive Web Design (RWD) project, how to identify breakpoints, and how to plan and design for web sites that will work across multiple devices. * This is a lab class and will include both discussion and design exercises. We will be using Adobe Creative Suite and/or web-based tools for the in-class design project. *We cannot install software on the lab computers, so if you want to use your own tools, please bring your own laptop. There may also be some free or beta tools available online that you could download and install on your own laptop if you want to use them. * Prerequisites: ** Information Design 1 or equivalent experience (required) ** Information Design 2 and/or Interaction Design or equivalent experience (preferred) ** Familiarity with Adobe Creative Suite and other common design software and tools * Some responsive design tools: ** Webflow (HTML) ** Responsive Wireframes - BETA (HTML) ** Adobe Reflow - BETA (Installed) ** DivShot ** UXPin ** Wirefy ** Easel ** Antetype (Installed) * Some responsive frameworks and grid systems: ** Bootstrap (HTML) ** Foundation (HTML) ** Skeleton (HTML) ** HTML5 Boilerplate (HTML) ** Initializr (HTML) ** Base (HTML) ** Susy CSS Grids (HTML) ** Responsive Grid System (HTML) ** Responsive.gs Grid System (HTML) ** Golden Grid System (HTML) ** The Semantic Grid System (HTML)


'''1. Introduction'''

''Discussion:'' * Introductions, background, and expectations of the class * Smartphones, tablets, televisions, smart watches, and other Internet-connected devices have complicated the way we design web pages and applications. * Users expect the same content and functionality no matter what device or screen size they are using, but "one design / one size fits all" does not work. * How do we create designs that respond to the device or screen size so that users have optimal experiences no matter what they use?

Responsive Web Design on A List Apart (the article by Ethan Marcotte that started it all)

Responsive Web Design by Ethan Marcotte (the book that first described it)

''Case Studies:'' * Mojo Motors Responsive Redesign Case Study (Part 1) (HTML)


'''2. Responsive, Adaptive, Liquid, Fluid, Static, RESS, Native... Help!'''

''Discussion:'' * There are many ways to design for multiple screens, and "responsive" is just one of them. * The essential concept behind "responsive web design" (RWD) is that a single web page or URL can be displayed on any screen size in an appropriate and usable way that adjusts layout, structure, and interactivity as needed for that screen size and device. Code once, display any. * There are, however, several different ways to accomplish this - "responsive" is just one: ** Responsive ** Adaptive ** Liquid / Fluid / Stretch-y ** RESS ** (Static is an option but rarely a solution...)

Compare the Methods (HTML)

Sample Responsive Wireframes from Podluzny on Flickr (HTML)

RWD Wireframes

* What are the difficulties of using traditional wireframe and design comp methods for responsive web sites?

''Readings:'' * The State of Responsive Web Design (HTML)

* Responsive vs. Adaptive (and others): ** Comparison of Techniques from Treehouse (HTML Video) ** Adaptive vs. Responsive: What's the Difference? (HTML) ** The Difference Between Adaptive, Liquid, Responsive, and Static Web Design (HTML) * Beginner's Guide to Responsive Web Design (HTML) * Responsive Web Design Techniques, Tools and Design Strategies (HTML) * The Ultimate Responsive Web Design Beginners Resource List (HTML) * Responsive Web Design Guidelines and Tutorials (HTML) * RESS: Responsive Design + Server Side Components (HTML) * RESS Multi-Device Design Resources (HTML) * Which One: Responsive Design, Device Experiences, or RESS? (HTML)

''Resources:'' * Sample Responsive Web Sites (HTML) * AWWWARDS for Responsive Web Sites (HTML) * Zurb's Gallery of Responsive Web Sites (HTML) * Sketchsheets for Responsive Web Design (HTML)

''Essential RWD Patterns and Tools:'' * This is Responsive from Brad Frost (HTML) * RWD Bookmarklet (HTML) This is a great tool for quickly seeing layout changes at common screen sizes)


'''3. Grids, Layout, and Breakpoints'''

''Discussion:'' * Just like nearly all web sites, the core of responsive and adaptive web sites is a grid system that defines layout organization and structure. * The difference is that responsive and adaptive web sites use media queries to adjust the grid size and layout rules based on screen size. * Layout changes occur at "breakpoints", and breakpoints should be selected based on optimizing the presentation of the content, not on specific devices or screen sizes.

''Readings:'' * How Responsive Grids Work (HTML) * Responsive grid systems; a solution? (HTML) * Media Queries: ** Introduction to media queries – Part 1: What are media queries? (HTML) ** Introduction to media queries – Part 2: Building a responsive design (HTML) ** How to create media queries in Responsive Web Design (HTML) ** CSS Media Queries & Using Available Space (HTML) ** Proportional Media Queries (ems not pixels) (HTML) ** How To Use CSS3 Media Queries To Create a Mobile Version of Your Website (HTML) ** CSS Media Queries from Mozilla (HTML) * Finding Breakpoints: ** Logical Breakpoints for your Responsive Design (HTML) ** Device-Independent Design Strategy: Looking Beyond Common Media Query Breakpoints (HTML) ** Devising a Strategy for Responsive Design from UIE (HTML) ** Fanfare for the common breakpoint (HTML) ** Re-thinking Breakpoints in Responsive Design (HTML) ** Deciding what Responsive Breakpoints to Use (HTML)

''Resources:'' * Responsive Grid Generator (HTML) * Responsive Frameworks: ** Zurb Foundation (HTML) ** Bootstrap (HTML) ** HTML5 Boilerplate (HTML) ** Responsive Grid System (HTML) ** Skeleton (HTML) ** Responsive.gs (HTML) ** Golden Grid System (HTML) ** The Semantic Grid System (HTML)


'''4. Navigation and Text'''

''Discussion:'' * Traditional navigation bars on web sites do not scale down to small screens very effectively, so we need new design patterns to handle the navigation at different screen sizes. * Although text usually flows automatically into adjusted layouts, we sometimes need to adjust font size and weight to optimize legibility and readability as well as to maintain the integrity of an adjusted layout. * We also need to be careful about using fixed measurements in pixels when designing responsively, so be certain to understand how to use ems, rems, and percents.

''Readings:'' * Responsive Navigation Patterns from Brad Frost (HTML) * Responsive Navigation on Complex Web Sites (HTML) * Adventures in Responsive Navigation (HTML) * Responsive Menu Concepts (HTML) * Code a Responsive Navigation Menu (HTML) * Is There Ever A Justification For Responsive Text? (HTML) * CSS Font-size: em vs. px vs. pt vs. % (HTML) * Responsive Web Typography with Flow.js (HTML) * Responsive Text with FitText.js (HTML) * Responsive Web Design: Using Fonts Responsively (HTML) * Five steps to gettin’ flexy in responsive web design (HTML) * The EMs have it: Proportional Media Queries FTW! (HTML)


'''5. Images and Video'''

''Discussion:'' * Images and video are among the most difficult to handle responsively, because the CSS and HTML specifications have not yet caught up to the demand and use cases. * The primary concern is bandwidth and page weight: large images are expected on laptops and tablets with WiFi broadband connections, but they are too big and heavy for smartphones on cellular networks. * We should be striving to deliver light-weight pages with media optimized for the destination screen size (which is one reason why RESS is a popular option.)

''Readings:'' * Images: ** Responsive Image and Media Patterns from Brad Frost (HTML) ** Responsive Images: How they Almost Worked and What We Need (HTML) ** Which responsive image solution should you use? (HTML) ** Mo' Pixels, Mo' Problems (HTML) ** Ughck. Images. (HTML) ** Responsive Images: Performance Problems and Case Study (HTML) * Video: ** Responsive Video (HTML) ** Fluid Video Width (HTML) ** Fluid and responsive YouTube and Vimeo videos with fluidvids.js (HTML) ** Creating Intrinsic Ratios for Video (HTML) * Responsive content in iframes: ** Responsive Google or Bing Maps (HTML) ** Responsive iFrames (HTML) ** Responsive Embeds (HTML) ** Making an iframe Video Responsive (HTML) ** Responsive iFrames on GitHub (HTML)


'''6. Tables and Forms'''

''Discussion:'' * Tables often require more "screen real estate" to display potentially large sets of data, so new display patterns are evolving that allow us to display that information efficiently and meaningfully. * Responsive forms have generally settled into a stacked pattern with the label above the form field. However, mobile devices have additional input methods available (e.g., iPhone date picker) that we need to design for. Make certain you are familiar with input field types available across devices.

''Readings:'' * Tables: ** Responsive Table Patterns from Brad Frost (HTML) ** Responsive Tables (HTML) ** Responsive Data Table Round-Up (HTML) ** Responsive Tables (HTML) ** Responsive Tables Demo (HTML) ** Complete Guide to the Table Element (HTML) * Forms: ** Responsive Forms Patterns from Brad Frost (HTML) ** Super Simple Responsive Forms (HTML) ** Creating Stylish Responsive Form With CSS3 And HTML5 (HTML) ** Responsive Multi-Column Form (HTML) ** Adaptive Vs. Responsive Layouts And Optimal Form Field Labels (HTML)


'''7. In-Class Project'''

''Method:'' * Choose your preferred software tool: ** Dreamweaver or other code editor ** Reflow or other RWD design and code tool ** Webflow or other web-based RWD design and code tool ** InDesign, Illustrator, Fireworks, Photoshop, or other visual design tool

* Find a partner and work in pairs. ** Try to work with someone who brings different, complementary skills to the project. ** Review the project documents so that you understand the scope of the site and the content and functionality to be delivered. ** Sketch first, design and code second.

'''''Old Oakland Farmers' Market'''''

Design a responsive, '''single-page''' web site for the Old Oakland Farmers’ Market. Customer research (via surveys and interviews of visitors to the market) has determined that the most important features of this web site are:

* List of vendors who will be at the market: ** At least for the current week, but a few weeks into the future would be better ** Categorized and/or able to be sorted by vendor type ** Vendor photo (may be of the vendors or their farm) * List of products, prepared foods, and in-season produce available at the market ** For the current week ** Categorized and/or able to be sorted by type * A map of the market showing: ** Location in downtown Oakland ** Locations of vendors at the market ** Nearby parking ** Nearby public transportation * Contact information: ** Street address of market: *** Ninth Street between Broadway and Clay (downtown Oakland) ** Hours of market: *** 8.00a to 2.00p every Friday (all year) **Contact information for the parent organization: *** Urban Village Farmers’ Market Association *** urbanvillage@earthlink.net *** 39210 Argonaut Way #780, Fremont CA, 94538 *** (510) 745-7100 * Event calendar for the market: ** Chef’s demonstrations **Performing artists ** Special events * Ability to easily share market, vendor, product, and event information with friends and family

Download project information and sample content.

''Information and Assets:'' * Market Photos (ZIP) * Personas (PDF) * Market Icons (ZIP)

Market Logo
Street Map
Vendor Location Map(:nl:)
Design by N.Design Studio, adapted by solidGone.org and IDUX
Powered by pmwiki-2.2.86