50 fantastic tools for responsive web design
on .net magazine
Anyone who works with building the web for multiple devices should check out Responsive.is, a nifty tool that helps show sites at different sizes. Drop a URL in the box at the top right and click through the icons in the top middle to explore the design on different devices sizes and orientations.
Awwwards: 50 examples of responsive web design
Navigation patterns for responsive web design by @brad_frost
- Top Nav or “Do Nothing” Approach
- The Footer Anchor
- The Select Menu
- The Left Nav Flyout
- The Footer Only
- The “Hide and Cry”
Initializr Start an responsive HTML5 project in 15 seconds via @brad_frost
"The “key ingredient” to our new design. The answer is simple: all design decisions have been dictated by our pursuit of optimal typographic measure (45–90 characters per line) for a convenient reading experience on every screen resolution. We’ve worked very hard to achieve optimal typography first and then built the layout around that. It was important for us to increase usability, visibility and accessibility for our content."
- Smashing Magazine on their new responsive design
Gridless is a “HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.”
GridPak - the responsive web design grid generator. Generates PNGs, CSS (+LESS, SCSS), Javascript.
The new web typography - wow - amazing site! via markwyner (in a great post)
You need to view this site in Internet Explorer 10+ (preview) or Firefox 8+. IE10? WTF? Yep, this site was developed to showcase the power of Microsoft’s OpenType font format.
Smashing Magazine’s brand new shiny responsive website. via stylethatfker
Web design trends in 2012
Great article by @jakerocheleau
1. Responsive web design
2. Fixed position navigation
3. Circles
4. Big vector art
5. Multi-column menus
6. jQuery / CSS3 / HTML5 animation
7. Ribbons & Banner graphics
8. Custom font faces
9. Infographics
10. Focus on simplicity
