Содержание
Responsive web design has been a trending topic for a little while now, plenty of tools have been developed around this technique to help designers and users to get the most out of their mobile and tablet browsers. Even if responsive design is not limited to small devices, most of the resources published today target the mobile and tablet world and try to provide easy ways to build beautiful and flexible websites. When dealing with responsive design, the first thing most designers think about is media-queries.
5
In this article, we will go far beyond the media queries, and showcase a list of pretty useful tools and resources everybody could use to improve the display of their website for mobile, tablet, and of course desktop browsers.
Resources for Responsive Web Design
Dealing with Touch Events
Everybody has figured it out now: there is no mouse with mobiles / tablets browsers. Dealing with the touch event has therefore become a very important part of the adaptation of the website for mobile browsers. Some developers have created plugins to make our lives easy.
Hammer.JS
A JavaScript library to handle gesture events. It currently supports tap, double tap, hold, drag and transform. This is a stand-alone library that does not require anything else, but is available as a jQuery Plugin.
jGestures
A jQuery Plugin to create gesture events such as pinch, rotate, swipe, tap and detect the orientation change of the device.
Touchy
A very tiny JavaScript library (less than 2Kb) that helps in dealing with touch events. This is a stand-alone library with no dependencies (such as jQuery).
::__IHACKLOG_REMOTE_IMAGE_AUTODOWN_BLOCK__::2
Creating Responsive Grids
Grid layout has been around for a while, and with the rise of responsive design, some new tools have appeared to help developers create flexible grids.
Gridpak
An online tool to create custom flexible grids. Number of columns, padding and gutter can be changed, some breakpoints can be added, and the CSS is generated, ready for download. The plus of the tool : it provides a PNG grid template that can be used for design in Photoshop for example.
FluidGrids
Another tool that will generate a responsive grid layout CSS.
Responsive Calculator
An online tool that will help you when you want to turn pixel design into responsive percentage ones.
Creating Flexible and Complex Layouts the Easy Way
Creating layouts that will fit in the page can be very complicated without the help of some JavaScript goodness. Here is a list of three plugins that master the grid layout flexibility.
Masonry
A jQuery Plugin to create dynamic and adaptive grids. The Plugin will re-arrange elements to make them fit in open spots on the grid.
Isotope
Another JavaScript plugin that does the same re-arranging of the elements on a grid, but also provides a way to filter those elements.
The Wookmark jQuery Plugin
A jQuery Plugin that will automatically arrange and organize elements into columns on a grid.
How to deal with navigation on smaller screens can present a huge question. Here are some resources and articles that attempt to answer this question.
Responsive Navigation Patterns
This is not a tool or a script, but an article every designer should read that sums up most common trends when dealing with responsive navigation, with pros and cons for each solution.
TinyNav
A jQuery Plugin, that will simply convert the navigation lists into select dropdowns for smaller screens.
Mobile Navigation jQuery Plugin
Another Plugin that will convert the navigation links into a dropdown list for smaller screens.
Responsive Sliders (without swipe)
Having a nice slideshow can really add some interactivity on a website, it’s a nice way to display work in a portfolio, products, or simply images. Some nice solutions have been developed to now allow mobile users to have nice slideshows too.
Responsive CSS3 Slider
A CSS3 slider that will adapt to the browser size. The nice trick with this slider is that the arrows go inside the slideshow on smaller screens. Since it’s CSS3, there is no JavaScript needed (but a JavaScript fix for browsers that don’t support CSS3 is provided).
ResponsiveSlides
A tiny JavaScript based on jQuery that will create a little responsive slider, using unordered lists.
Blueberry
Another JavaScript jQuery based slideshow that will adapt to the browser size.
Panoramica
A JavaScript Plugin that will enable web designers to create beautiful sliders, with customizable image and text content.
Touch Swipe Sliders
Responsive sliders are great, but a little bit frustrating on a mobile or tablet when most users are used to swiping in the native application among image galleries. So some developers have created some sliders that will work with the «swipe» gesture.
Swipe JS
A very simple JavaScript slider Plugin that enables the user to swipe between different panels. You can put images, text, and any HTML in those panels.
Sutunam Swipe Slider
This slider comes in a slider, and full screen slider version. Users can either swipe, or use the arrows to navigate.
PhotoSwipe
The best known JavaScript Plugin for creating image galleries and sliders that works on mobiles, this Plugin is inspired by iOs native gallery but supports Android and BlackBerry as well.
Image Solutions for Retina Display Devices
With the new retina display on iPad 3, serving quality images to devices that can display them has become more and more important. The following tools provide easy solutions to target those retina devices, and serve them better quality images.
Adaptative Images
A JavaScript based solution that is able to detect the visitor’s screen size and serve the right image, without requiring any code change. This script requires htaccess access.
Retina Images
A JavaScript based solution that will switch the current image for a @2x one if provided when the user has a retina display device. Here again, no need to change the HTML code.
Retina.js
Another JavaScript solution that will switch images for @2x ones for users with retina devices. This script also comes with LESS integration.
Testing the Design
Having some great resources to work with is great, but not everybody has got mobiles and tablets to test the design, so I’ll finish this showcase with some useful tools for responsive testing.
Resizer Bookmarklet
This is a bookmarklet to drag and drop in the bookmark bar, that will then create a drop-down menu, with mobile browser functionalities and screen sizes.
Screenqueri.es
A pretty new tool that enables you to test designs using a pixel perfect interface and some default mobile and tablet browser sizes.
Responsivepx
This is a tool to help you find the tricky breakpoint you’ve been looking for.
Conclusion
That’s it for today, you don’t have any excuse any more not to adapt your website to different screen sizes, whether it’s mobile, tablet, desktop or even bigger ones, who knows.
Of course this is a non exhaustive list purely subjective and based on the tools I use the most. I highly encourage you to share with us the tools you use in the comments section below.
