With more people surfing the web from their mobile devices, designers and developers have been trying to figure out the best way to cater to visitors on both mobile devices and computers. When internet capable phones first began gaining popularity the method was to have two separate sites, a mobile site and a \u201cfull\u201d site. But that would limit the mobile viewers’ experience because the site would be so basic it would cause you to wonder if it was coded by chisel and stone. That was then, now everyone is jumping on the \u201cResponsive Web Design\u201d bandwagon and finding it to be a rather happy median.<\/p>\n

I like sites that maintain their appearance, at least to some degree, all the way down the resolution latter. But I also understand that specific industries and target audiences come in to play. In some industries, a person may only be viewing a site from their mobile device to find that companies contact info. In those instances, it is probably best that\u2019s what they get from your mobile sized home page as soon as it loads, you can always include links at the bottom to everything else. I would encourage you to help your clients figure out what\u2019s best for them, and keep all monitor sizes and internet browsing devices in mind as you\u2019re developing your next project.<\/p>\n

Responsive web design refers to a site that is developed to degrade nicely across multiple screen sizes and resolutions, from the largest Mac display down to the minutest mobile device. It also works wonders on frame size, square or widescreen, as well as window size, as not everyone prefers their browser to be full screen. There are three key factors to developing a responsive website, flexible layouts, flexible images, and media queries. Let\u2019s take a look at 10 excellent examples of responsive web design.<\/p>\n

Sony<\/a><\/h3>\n

<\/a><\/p>\n

Sony is a big brand that has embraced responsive web design. You\u2019ll notice there\u2019s not much of a difference between the widescreen and traditional square screen versions other than everything looks a little more compact on the square screen. But if you start with it out wide and squeeze your browser window in, you\u2019ll notice that the main image actually resizes itself to a smaller version. It resizes itself again once you get down towards mobile device width as well.<\/p>\n

Gravitate Design<\/a><\/h3>\n

<\/a><\/p>\n

It\u2019s no surprise that a design studio such as Gravitate Design features a responsive website design on their own site. Whether you are a freelancer or a large design studio, you always want your website to display the full extent of your design prowess and knowledge. I really like Gravitate\u2019s site not only because it\u2019s responsive but because it\u2019s very clean and simple. Their color palette compliments itself nicely and they didn\u2019t go overboard on shadowing, borders or putting all their content in boxes.<\/p>\n

Spark Box<\/a><\/h3>\n

<\/a><\/p>\n

Spark Box is another web design studio that knows a good thing when they see it and doesn\u2019t hesitate to implement it on their own site. One thing I really like about their website is how they use the width when they have it, but gracefully adjust when they don\u2019t have it. Their little text blurb to the right of the monitor icons on the home page is a great example. It doesn\u2019t look out of place aligned to the right in widescreen mode, nor does it look out of place centered underneath in square mode and mobile mode.<\/p>\n

Food Sense<\/a><\/h3>\n

<\/a><\/p>\n

Food Sense is another great example of responsive web design. They use the width when they have it, but when they don\u2019t they adjust without losing any of the clean look or flow to the site. The only unfortunate thing about the site is that once you leave their widescreen parameters you lose their latest tweet and Facebook plug that\u2019s on the side column under the navigation. They still have links to both social networks in the footer, so it\u2019s not a huge deal. But still would have been nice to see those features appear elsewhere in the skinnier designs.<\/p>\n

Warface<\/a><\/h2>\n

<\/a><\/p>\n

Warface\u00a0is the real deal.\u00a0 It\u2019s creative, extremely fluid and if you stretch and squeeze the width you\u2019ll notice that it\u2019s not one flat image, but in fact, several stacked on top of each other.<\/p>\n

Clean Air Challenge<\/a><\/h3>\n

<\/a><\/p>\n

Last week I talked about sites with parallax scrolling and this Clean Air Challenge site just barely missed making my list. The site itself isn\u2019t totally parallax scrolling, just the clouds in the background are. However, the site is an excellent example of responsive web design. Another aspect of this site that I liked was that the only images that you lose once you hit the mobile sized version of the site is the repeat of the main navigation icons that appear in the footer.<\/p>\n

Sasquatch Music Festival<\/a><\/h3>\n

<\/a><\/p>\n

Sasquatch is an annual music festival in my neck of the woods featuring some big name artists. When I came across their site and saw that it\u2019s as fun to look at as the bands they book are to listen to, I was quite excited. This site sticks out from a lot of the others for me because of all the colors, images, icons and overall sense of style it has to offer. A lot of the responsive websites I come across seem to be heavy on text, light on imagery, and only two or three colors throughout the site.<\/p>\n

Andersson-Wise<\/a><\/h2>\n

<\/a><\/p>\n

Andersson-Wise\u00a0is an Austin, Texas based architect and design firm.\u00a0 Antialiasing jQuery scripts help this site maintain its responsiveness, regardless of how big your display is, this site will keep up.\u00a0 A very simple, modern, clean and classy look, perfect for an architect and design firm.<\/p>\n

The Cacao Trail<\/a><\/h3>\n

<\/a><\/p>\n

I can only imagine that The Cacao Trail website is almost as enjoyable to navigate as the actual trail is. You lose the main image on this site as soon as you go from widescreen down to a more traditional sized monitor, which I don\u2019t mind as the image doesn\u2019t really do too much for me and it would certainly save you a lot of load time on a mobile device. I do like how the main navigation links enlarge once you hit the mobile sized version, it can get to be a bit of an annoyance trying to touch tiny words to navigate a site on your touch screen mobile device.<\/p>\n

Alsacreations<\/a><\/h3>\n

<\/a><\/p>\n

Alsacreations took another interesting approach to their responsive web design. Rather than worrying about keeping all aspects and elements of their site intact between different resolutions, they simply focused on what was important and dropped the bells and whistles. From widescreen to square they dropped their image slider, then from square to mobile, they dropped all elements except their \u201cAbout\u201d blurb and their email form while including links to everything else.<\/p>\n

Yoke<\/a><\/h2>\n

<\/a><\/p>\n

Yoke\u00a0is a fluid site thanks to a bit of javascript and its WordPress platform.\u00a0 A well organized and structured layout keeps all of the animations and imagery from giving the site a cluttered look but keeps the site looking fun and creative.<\/p>\n

Spigot<\/a><\/h2>\n

<\/a><\/p>\n

Spigot Design\u00a0is yet another design firm who showcase their responsive abilities on their own website.\u00a0 The overall look and layout of the site is very clean, almost minimalist, but a decent amount of color and creativity provide a nice balance and accent where it\u2019s needed.<\/p>\n","protected":false},"excerpt":{"rendered":"

With more people surfing the web from their mobile devices, designers and developers have been trying to figure out the best way to cater to visitors on both … Continue \u2192<\/a><\/p>\n","protected":false},"author":30,"featured_media":50570,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[46,47,49,2552,30],"tags":[],"aioseo_notices":[],"yoast_head":"\n