Responsive Design for your Website
Jump to navigation
Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.
facilitated by John Emerson and Rabble Evan Henshaw-Plath
What
- Moving/scaling elements based on device width for to accomodate mobile devices.
Why
- An explosion in mobile device use, and not just iPads. Even with the desktop, there isn't just one screen resolution any more.
How
- Frameworks:
- Bootstrap
- Foundation
- PureCSS
- 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)
Best Practices
- 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
- So many different javascript libraries
- Lazy loading images
- Use SVG vector images as icon fonts (Fontella, Font Awesome)
- Potential issues
- Load time/heaviness of frameworks
- Support of older browsers
- Testing
- Just drag the browser, use browser developer tools
- Screenfly
- Adobe Browser lab
- For Macs: Xcode has a simulator
Worst practices
- Trying to do it yourself from scratch rather than using a framework.