Responsive design posts are always popular on the Econsultancy blog. That’s because people enjoy looking at beautiful things.

We’ve previously rounded up some of the best sites of 2013. We’ve also looked at the ins and outs of RWD and at some examples of responsive email.

I thought I’d add to our roundups and look at a brief selection of agencies with responsive sites.

Do have a play around with them by resizing your browser or accessing on mobile. There’s a few screenshots for each and you can click through from the desktop images.

Foolproof

This site was the best I found. It has some really beautiful micro-UX touches such as a green block with added info that slides in when you scroll over a case study. 

This was one of the sites that appeared to be designed mobile-first. Everything is ncie and chunky on desktop to begin with. On mobile it’s visible and clickable, too. 

The menu text becomes icons on the smaller screen which is a great touch that more should use. 

One can even switch between menu styles on mobile, from list to tiles to filter.  

 

Precedent

Much like Foolproof, using flat design is handy when it comes to being responsive.

The scaling and resizing works well when block flat colour is used.

Use of some full width straps and some nicely symmetrical square portraits works very well on desktop and mobile alike.

Cognifide

This is one of my favourites because it works and it works quickly.

There’s plenty of text but it’s well sized and there’s still plenty of white space. 

It’s not flashy, as far as responsive goes, but it does the job.

 

Realise

The site loads quickly and resizes quickly. I like the way that the main agency pitch is always front and centre.

The header stays with you as you scroll down on small screens.

The white space is very effective at making the site easy to understand and navigate.  

 

Rufus Leonard

This felt like one of the most radical designs or at least truest to its concept. The tiles take up the entire desktop, aside from contact info, a big features slide which loads quickly and works well, and the five options in the header menu.

Scroll over of images reveals more about the content ‘within’.

The tiles resize predictably on mobile and the top menu becomes a burger. The size of the pages on mobile is fairly small, which is a really good thing, it feels nicely contained and was probably the easiest to use.

 

Agency Republic

Agency Republic is another website that has the right size pages, not too much scrolling.

The design is again a nice compromise between funky tiles and more traditional text and images. 

On mobile it’s pretty flawless with the menu following the user and no clunky or slow loading.

Code Computer Love

I found this site a bit sticky on mobile. My phone’s Safari browser seemed to have difficulty when scrolling back to the hero image on the top of the home page. 

The large images at the top of most pages are also a bit distracting from the other content on the site.

However, scrolling past these, the design is still good and displays nicely on desktop and mobile.

 

Jam

The Jam site is beautifully balanced, somewhere between tiles and more traditional web design.

It’s easy to interpret and look fun without being lightweight.

 

Red Web

This site was notable because I found the information easy to digest.

The site in desktop wasn’t particularly wide, which helped to focus.

The menus are clear and again it scales well. Nice and reliable.

TH_NK

Try changing the width of your desktop browser window, the website has a funky way of resizing, images shooting off and others shooting in.

I found it to be a little temperamental and on mobile the home page had some blank space under the menu, but the information is perfect in volume for the mobile screen.

The buttons are big and text isn’t overwhelming. I’m not sure how quickly it would load on the cellular network, but I enjoyed using the site.

One thing that’s perhaps needed is an anchored  header on mobile as I had to scroll quite a bit to get back to the menu.