Responsive Design for your Website
Jump to navigation Jump to search
facilitated by John Emerson and Rabble Evan Henshaw-Plath
- Moving/scaling elements based on device width for to accomodate mobile devices.
- An explosion in mobile device use, and not just iPads. Even with the desktop, there isn't just one screen resolution any more.
- Golden Grid
- Many popular content management systems have responsive themes/templates that can be modified
- Other tools:
- Rafael and Snap for SVG
- D3 for data vis/mapping
- Flex Boxes? A CSS3 feature that allows you to define the page into grids
- Noun Project for SVG icons
- Mozilla developer demo for HTML5
- Sass for CSS (use FireSass instead of Firebug)
- Mobile first
- What is the most important part of the page? What's the core functionality/content?
- Then add elements to that.
- Design for phone width, then minimum and maximum widths (e.g. breaking at 360px wide) with media queries in the css.
- Ems/Rems (Root ems) for fonts.
- Responsive images
- No consensus yet, but...
- One option: Use an image that's 2.5x resolution but low quality
- Source set
- Lazy loading images
- Use SVG vector images as icon fonts (Fontella, Font Awesome)
- Potential issues
- Load time/heaviness of frameworks
- Support of older browsers
- Just drag the browser, use browser developer tools
- Adobe Browser lab
- For Macs: Xcode has a simulator
- Trying to do it yourself from scratch rather than using a framework.