Responsive Design Testing

Screenfly

resizeMyBrowser

Responsivepx

Responsive Design Bookmarklet

Code Bomber // Resizer

ProtoFluid

StudioPress – Responsive Design Tester

Mobile Emulator

iPad Peek

Your website has to be user friendly. If your website usability is poor and your site is hard to use, customers are more likely to bounce off the site, reducing your chances for success. This means that it is important to make sure that your website usability is tested with easy to navigate and to use architecture, after all you want an intuitive website. The good news is that there are online web design tools that can help you figure out how others see your website which will help improve your websites usability.

Evaluating User Experience

One of the best things you can do is make sure your user is getting the experience he or she expects – and wants. You can do this with the help of the tools on this list:

Feedback Army

Allows you to ask users open-ended questions. Their responses can give you a feel for their experience.UserVoice: Manage feedback from your web visitors. It’s even possible to publicly display information so that your community members can vote on suggestions.

Page Speed Online

Load time is huge. If your visitors become frustrated with slow load times, it’s game over for you. Use this tool to help you determine how to speed things up.

Pingdom Tools

A great, basic speed test for your website.

Check My Colours

How often have you visited a website, only to find that the contrast was insufficient, and it was difficult to read? This usability tool will test the colors used, and help you tweak your design to provide better readability.

Readability Test from Juicy Studio

Can people actually read your website? Find out if you’re making things too complex for visitors.

WordsCount

Before you put something on your website, test out with this usability tool. It will help you figure out how many words you have – and how many might be too big. Also evaluates how easy your text is to read.

W3C Markup Validation Service

Ensure that your website is properly accessible. This web usability tool will help you double check your xHTML markup.

Browsershots

With so many options available for browsers, you need to make sure your website visitors can properly view your pages. Use this tool to see how your website looks in different browsers, and let it guide you to make appropriate tweaks.

Vischeck

How does your site look to someone with color blindness? Find out, and fix weaknesses in color selection so that more people have a better experience.

WebAnywhere

More and more people are using assistive technology to help them experience the web. This tool helps you find issues with your site when someone who uses assistive technology for the blind, or other assistive software, accesses your site.

How Are People Using Your Site?

Another important part of user experience is how people actually use your website. How are they getting around? Are they able to complete their desired tasks? The following website usability tools can be quite instructive:

Navflow

Use this tool to watch how users move on your website. Provides path analysis that can help you tweak your navigation.

WriteMaps

Create a site map that can better guide your web visitors.

OptimalSort

Use this tool to help you sort cards, and help you tweak the navigation on your site.

Websort.net

Another card sorting tool, you can use this one remotely, helping you improve your website’s ease of use from anywhere.

Treejack

Test your trees to make sure that the information on your site is intuitively organized.

PlainFrame

After you have used other navigational tools to tweak your site, this site will test its efficiency and usability in real time.

Intuition HQ

Record how quickly web visitors complete tasks, and then make changes that can help them see better results.

Loop11

Make use of this remote test to set up different task analysis reports. Perfect for pinpointing problem areas.

Usabilla

Target specific tasks with this website usability tool, figuring out which might be most frustrating for visitors – and how to fix them.

FiveSecondTest

Quickly assess which interface elements on your website are easy to use.

With a little help from the right usability tools, you can learn what problem areas might be frustrating your users, and find solutions that will ensure users have a good experience, and keep coming back.

Last week DesignWoop published a post providing a selection of tools to help you create a responsive design, today we will look at a selection of websites that are responsive and immaculately designed.

Jones Film and Video

Wooly Robot

Thirst Studios

Asbury Agile

The Blog of Jon Phillips

space150

Paul Hayes

Adaptive Images

Future Friendly

10k Apart

Reveal

Grido

Elemin

Minblr

Garrett Winder

Palantir

Facts regula

Geek in the Park

But there is a solution. Responsive design is all about adjusting designs to accommodate screens of different sizes. If you want to create a responsive web design you should use fluid grids, images and queries. In this post you will find 20 useful tools for creating responsive web design.

Golden Grid System

Golden grid system is a folding grid for responsive design. It has four main features: columns, gutters, a baseline and a script.

Lettering.JS

A jQuery plugin for radical web typography. With Lettering.js you can work with kerning type, editorial design, manageable code and you’ll have complete control.

FitText

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

Fluid 960 Grid System

The Fluid 960 Grid System templates have been built upon the work of Nathan Smith and his 960 Grid System using effects from the MooTools and jQuery JavaScript libraries.

Gridless

Make future-proof responsive websites with ease. Gridless is an optioned HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Responsive Design Testing

Simply enter the url of your website and test it in different browser resolutions.

PX to EM

Here’s a calculator for your custom EM needs. Just select your body font size and you’ll get conversions based on your body font size.

BluCSS

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you’re working on your next project, you don’t have to worry about the essentials.

Seamless Responsive Photo Grid

Let’s say you have a bunch of images you want to display, and the goal is to get them edge-to-edge on the browser window with no gaps. Just because you think that would be cool. They are of all different sizes. Here you’ll see how to do that.

SimpleGrid

SimpleGrid is prepared for 4 distinct ranges of screen size: screens 720px, screens 720px, screens than 985px, and screens than 1235px. This means that people visiting your site will receive a layout that’s tuned to the size of their browser window. Say goodbye to horizontal scrollbars.

Adapt.js

Adapt.js is a lightweight (826 bytes minified) JavaScript file that determines which CSS file to load before the browser renders a page. If the browser tilts or resizes, Adapt.js simply checks its width, and serves only the CSS that is needed, when it is needed.

Fluid Images

In this article you’ll fin a lot of useful information and code examples related to fluid images.

Convert a Menu to a Dropdown for Small Screens

When the browser window is narrow, the menu in the upper right converts from a regular row of links into a dropdown menu. In this article you’ll learn how to do this.

resizeMyBrowser

Perfect tool for testing your responsive web design, resizeMyBrowser let’s you easily resize the browser to most popular or custom sizes.

Responsive Table

Responsive design is all about adjusting designs to accommodate screens of different sizes. While data tables can be really wide you will definitely find this solution useful for your project.

Columnal

The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs. Columnal makes responsive web design a little easier. It is 1140px wide, but since it is fluid, will respond to the width of most browsers.

1140 CSS Grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

Mobilize.js

A HTML5 and Javascript framework to transform websites to mobile sites. Mobilize.js allows web developers create mobile sites out of existing websites with little effort. It automatically detect mobile browsers, supports iPhone, Android, Blackberry, Opera Mini and many other browsers and devices.

Adaptive Images

Deliver small images to small devices. A drop-in solution that automatically creates, caches, and delivers device-appropriate versions of your website’s images. No mark-up changes needed.

Quick note regarding the making of the extension, I was suprised how easy it was to get something simple up and running, there are some good articles on the web which helped me off and also Google’s own documentation is very handy. Here are two links to get you going:

http://code.google.com/chrome/extensions/getstarted.html
http://tutorialzine.com/2010/06/making-first-chrome-extension/

The Dribbble side of things was a little trickier! At the moment an API for Dribbble is in coming one day soon stage but for now I had to parse the RSS and I was limited to what I could actually achieve with the extension. At the moment the extension allows you to:

• View the latest debut shots
• View Everyone’s latest shots
• View the shots of people you are following
• The option to customise which user’s following you are seeing

I have had a request to be able to customise how many shots are been displayed at a time and this is on my growing list of to-do’s and should be done shortly! Anyways I won’t go on but here is the link you need to download my extension:

https://chrome.google.com/extensions/detail/gfkbkddclngipjikfhaaicpcpcdhgmai

I would love to hear your feedback and any further requests!

I’d given up hope that would happen and that I’d have to wait till early next year when Google pull there finger out, but I am happy to say I have found a solution and you can have extensions working in no time!

The Steps

First you need to head over to here and download the latest build of Chromium (At time of writing I am using 34164) and then install it to your Applications folder.

Next run Chromium and enter the following in the Search/URL bar:

chrome://extensions/

You will be redirected to the extension page which will be looking pretty boring right now. To find some extensions to install go to this website:

https://chrome.google.com/extensions

Once you reach an extension that you want to install you will notice that the ‘Install’ button is greyed out. Open another tab and head over to:

http://grack.com/blog/2009/12/08/re-enable-install-button-for-mac-chrome-extensions/

Scroll down to where it says ‘Enable Extension Install’ and drag this to your Bookmarks toolbar. Now flip back to the Extension you just found and click on the bookmark you just dropped. This will enable the ‘Install’ button at which point you can install the extension!

You will have to do this for each extension as Google will disable the ‘Install’ button but thats a fair price to pay for a working Chrome!

Bookmarks Synching

Another nice little treat is that the latest Chromium build has Bookmarks Synching as you will probably have seen on Windows versions which means for someone like me, you can Sync your bookmarks between both operating systems Boom!

You can find this option by clicking on Chromium in the top left and then ‘Bookmarks Synched…’ at which point it will ask you for your Google username and password.