Cool Responsive Mobile Web Site Tools

Cool Responsive Mobile Web Site Tools

A selection of tools for developing and testing websites for Mobile. Including: Fit TextBootstrapWirefyGridsetInterface Sketch,  Responsive WireframesRetina Images and others

Fit Text

Fit Text is a jQuery plugin that allows text to scale according to the device it’s being viewed on. It resizes text based on ratios and is intended for use with headlines only.

fittextjs

 

Bootstrap

Built by designers at Twitter, Bootstrap is designed to make prototyping easy and relatively painless.

Using the Customize feature, you can pick and choose the different responsive elements that make up a page, then download a finished version with compiled and minified CSS, jQuery plugins, and other neatly packaged goodies to simplify your work.

getbootstrap

Wirefy

For designers and developers who focus on “content first,” Wirefy is a terrific solution.

Simple and elegant in its presentation, Wirefy lets you plan and structure your content. You can also use these fully-functional wireframes to show clients how their new responsive site will look and work.

getwirefy

 

Gridset

Gridset works with different content management systems, including Joomla, Drupal and WordPress, as well as working in popular graphics applications like Photoshop and Fireworks.

gridsetapp

 

Interface Sketch

Do you yearn for the “good old days,” when you’d sketch a layout in a notebook with those archaic tools, pencil and paper? Fear not! Interface Sketch understands.

This option offers printable PDFs for a wide range of devices, from desktop browsers to generic tablets. Plus, they’re free!

interfacesketch

 

Responsive Wireframes

Responsive Wireframes, created by James Mellers of Adobe, offers desktop and mobile varieties of common wireframe mockups, including homepage, guided entry,  promo entry, product detail and comparison pages.

responsive-wireframes

 

Retina Images

Retina Images is an easy-to-setup system that displays high resolution images as alternatives on devices that support them.  Only one image is ever downloaded at a time, so there’s no excess load time on your server for images that won’t be displayed.

retina-images

 

Responsive Web Design Testing Tool

This tool will help you in testing your responsive websites while you develop and design them.  However, in order to benefit from it, it is important that you host the testing tool on your website’s own hosting.

 

mattkersley

Screenqueri.es

This particular tool is there to help you with the pixels of your website. Again, one of the best tools this is. It helps you in testing your website on more than 30 difference resolutions. You can even resize the window and check the pixels with custom resolution. Also, you can easily change the orientations – by just a single click.

screenqueri

StudioPress Responsive Testing Tool

This tool is again very useful for designers and developers. One a single screen, this tool will show you how your website looks on various devices. It will show you your website’s layout on mobiles, tablets and other relevant devices. Not only this, you can also view your website’s layout for various browser windows.

studiopress

Viewport Resizer

Viewport resizer is basically a bookmarklet and some have declared it as one of the best responsive design tools. Thanks to Viewport resizer, you will not have to manually resize your browser windows. You can configure it according to your own requirements.

viewport-resizer