This is a quick recap of an Adobe event on June 21, regarding responsive web design and PhoneGap. Open source links and related documents will be attached within the article.
“Responsive Web Design” (RWD) is becoming a topic people keep talking about. Why is responsive design beneficial to your business? How to utilize this approach to maximize your website exposure in the mobile world? This blog will give you an idea.
This is the Ethan Marcotte article that gave designers a comprehensive introduction of the RWD concept. If you don’t have time for a thousand-word article, here are some quick notes on RWD features:
- 1 code base running on multiple devices
- Supports multiple resolution and orientation
- Constant responsive UI
- “Width” aware grid
A visual explanation of Responsive Web Design
Tips and Tricks
- Minimal Viable Product – design for mobile first
- Use MVC – that would save you a lot of time
- Static File Client – cheap CDN hosting, fast JS execution
- Minimize HTTP requests – they kill performance in mobile environment
- Minify – combine all files to one
- Webkit – is great but keep in mind: it’s not everything
- Internet Explorer – meh, but html 5 and Chrome frame
- Mandible – elegant output to production in seconds
- Visual explanation of RWD (the calendar) & its complete source code
- Mandible2 – a web application build and development toolset + project template
- Some additional articles: Why We Shouldn’t Make Separate Mobile Websites; Responsive Web Design: What It Is and How to Use It
Thanks Ippei for taking notes!