Subscribe via RSS Feed Connect with me on Google+ Connect with me on Pinterest

20 Amazing Responsive Websites + Tricks to Make your Own

[ 0 ] Posted by on December 18, 2012

responsive web design

Responsive design is not the future of web design. It is the now. It’s important that we recognize this distinction, and stop imagining that making our websites responsive is something that we can leave till next year…or some other time in the future. We can’t afford to – not now that we have reached the mobile tipping point. If you’re not catering for mobile, you’re missing out on huge amounts of traffic and exposure, and you’re also making Google mad.

If you haven’t gotten around to it yet, then I am hoping that the following showcase of amazing responsive websites will motivate you to get started. The websites in this feature have taken responsive design to the highest standard. To fully appreciate them, try viewing them on your pc / laptop as well as on your smartphone or tablet (I’m assuming you have access to the latter). If you don’t have a smartphone or tablet, then resize your browser window to see these websites dynamically resize themselves to match the ‘screen size’, or check out this website to test multiple screen sizes at once.

This is what the modern web looks like.

1. http://css-tricks.com/

2. http://reverseburo.com/

3. http://foodsense.is/

4. https://www.fundraise.com/

5. http://jessicahische.is/

6. http://www.fork-cms.com/

7. http://www.unitedpixelworkers.com/

8. http://www.inflexioninteractive.com/

9. http://oliverrussell.com/

10.http://www.denisechandler.com/

11. http://colbowdesign.com/

12. http://stephencaver.com/

13. http://findbacon.com/

14. http://hicksdesign.co.uk/

15. http://thisisyoke.com/

16. http://earthhour.fr/

17. http://10k.aneventapart.com/

18. http://forefathersgroup.com/

19. http://owltastic.com/

20. http://clearairchallenge.com/

Tricks to make your own Responsive Website

If you checked out those websites and are feeling inspired to make your own, you’ll need some of the following tools to get started:

Fluid Grid

A fluid grid is a blueprint for a responsive layout that is built to allow your page to scale dynamically to different screen sizes (without having to serve separate CSS or HTML). Here are some (free!) grids to get you started:

1.) http://cssgrid.net/

2.) http://960.gs/

3.) http://gumbyframework.com/

Media Queries

In order to have your website respond to the different screen sizes it’s presented with, you’ll need to add Media Queries into the HTML.

Flexible Images

One key feature of responsive web design is for pages to contain images that can scale based on the size of the screen that they’re displayed on.

Once you’ve checked out some of those resources, and you’ve had a look at some of the best examples of responsive design, you should be ready to start moving on revamping your own site. Don’t wait – the sooner you jump on board the responsive web design train the better!

The aim of a responsive website

The way in which everybody searches online is changing and increasingly mobile devices are becoming the number one device to access the internet on. That means smartphones, tablet computers, portable gaming consoles plus many more devices are being used by people to access websites. The one thing all of these devices have in common is the one thing that makes them different, their display size, and the point to any responsive website is to format itself in a way so that it is easy to read, navigate and interact with on any display, no matter its size.

Do you already have a responsive website? Did you use a template or create your own? Let us know in the comments, we’d love to hear from you!

Jacob E. Dawson works with Delivery Hero and is an entrepreneur and inbound marketing consultant with a passion for creating value! Follow Jacob on twitter @jacobedawson and on Google+.

Image credit.

PS: Digging this story, news or review? Let us know! Comments open.

About Jakk: Jakk Ogden is the founder of Technology Blogged. 23, with a love for good writing, you'll find Jakk playing 'Drag Racing' on his Nexus 5 and rocking a pair of Grado headphones. If you love technology, be sure to subscribe to his feed for unique editorials. Find me on . View author profile.

Leave a Reply




If you want a picture to show with your comment, go get a Gravatar.

CommentLuv badge
© 2009-2013 Technology Blogged. DMCA.com.