Responsive web design is an exciting new trend that is quickly becoming the new industry standard as smaller devices become more popular for browsing the web. An explosive growth in palm-sized internet browsing has introduced new challenges for web designers. The fluid grid, a system in which the size of a website adjusts in proportion to screen specifications, does not provide enough flexibility for the smallest screens. Responsive web pages are created to adjust automatically in both size and layout to fit any of the commercially available screen resolutions. From mobile phones to big screen TVs, responsive sites can modify themselves to fit the medium you’re using to view them. The following examples provide a brief look into the creative vision of responsive web design. Make sure to adjust your browser size to see the responsive design in action.
1. Clean Air Challenge http://clearairchallenge.com/
Images move gracefully from a horizontal arrangement to vertical.
2. Bill Brown http://b.illbrown.com/
Optimization of space occurs by a shift of image placement.
3. Fork CMS http://www.fork-cms.com/
Graphics take a back seat when less space is available.
4. More Hazards http://morehazards.com/
Repositioning the page elements can make all the difference.
5. Warface Digital Designer http://www.warface.co.uk/
Interest is added by going beyond a change of size.
6. Teixido http://teixido.co/
A large logo makes way for clear, concise copy.
7. Stephen Craver http://stephencaver.com/
Heavier elements that bring balance to a large screen disappear when scaled down.
8. Ethan Marcotte http://ethanmarcotte.com/
Ethan Marcotte, the creator of responsive design, simply removes design elements.
9. The Boston Globe http://bostonglobe.com/
The newspage changes from what looks like a front page to a scroll headline view.
10. St. Paul’s School http://www.stpaulsschool.org.uk/
The menus on the page move fluidly to fit the whole screen as you adjust the window smaller.
11. Garret Keizer http://garretkeizer.com/
Books are the author’s main focus when space is limited.
12. Nicely Replayed http://nicelyreplayed.com/
Cross-fading images continue at every size.
13. Hard Boiled Web Design http://hardboiledwebdesign.com/
Other than size, the only necessary change occurs in the menu options.
14. White Lotus Aromatics http://www.whitelotusaromatics.com/
A background image adjusts to screen size in order to avoid becoming obtrusive.
15. Reverse Buro http://reverseburo.com/
A simple, three-dimensional quality creates visual appeal.
16. Progetty Studio http://www.progettystudio.com/
This site lets you play space invaders in order to earn apsects of their portfolio. Since the game is space sensitive, it resizes to fit your browser size but never loses its shape.
17. Bloom http://bloominteriordesign.com.au/
The cross-fading imagery takes center stage.
18. Yoke http://thisisyoke.com/
All screens display a clear menu.
19. Francesca Nini http://www.francescanini.com/
This whimsical design maintains its character throughout three layouts but the website becomes more and more minimalist as you size smaller.
20. Stonehendge Veterinary Hospital http://stonehengeveterinaryhospital.com/
The phone number is displayed front and center on a mobile device while all the other elements are neatly aligned on a scroll page.
21. Frontend 2011 http://www.frontend2011.com/
This whimsical design changes from being centerstage to a playbill design.
22. Zedd Mobile http://www.zeddmobile.com/
The position of menu options make all the difference.
23. PAWS Chicago http://briandrum.net/team-paws/
This bold statement maintains its impact in every size.
24. East Readers http://easy-readers.net/
A clean, simple image works well on a small screen.
25. Art Equals Work http://artequalswork.com/
The scaled-down version draws focus to the posts.
26. Thibaut Sailly bureau.tsailly.net
The image stays fixed as the background changes in size.
27. Think Vitamin http://thinkvitamin.com/
Design elements disappear to provide a simple layout.
28. Splendid http://madebysplendid.com/
A simple layout that goes from four columns to one.
29. The Sweet Hat Club http://sweethatclub.org/
The design may change dramatically from browser to mobile but it still maintains the same feel and simplicity.
30. Sleep Street http://sleepstreet.be/
Images and prices remain the main focus in all sizes.
The popularity of mobile internet browsing has escalated dramatically over the years, and shows no signs of slowing down. New developments have generated unique challenges for web designers. Responsive design provides the ability to stay ahead of the curve, and the freedom to create beyond the constraints of device limitations. Ethan Marcotte accurately describes the role of his groundbreaking innovation: “Responsive web design offers us a way forward, finally allowing us to ‘design for the ebb and flow of things.
Great article! I found the information I was looking for 🙂
Agree, The Web Design must be simple with a concise message and linking structure. The images in the websites design must also convey the sites message efficiently.
Hello, Incubasys website is responsive and equally good!!
Please Include
likes.. great design inspirations..
Thanks for the feature 🙂
Thanks for mentioning Zedd Mobile. It was a really interesting opportunity for me to do a responsive layout. Experimental and fun.