Here at Untame, we focus our design and development strategies around a holistic approach to the web, across any web-ready device. After all, web usage on phones and tablets is growing more every day; that’s why a highly responsive internet is so important. We want to deliver great web experiences to as wide a swath of visitors, no matter how they access the web.
Featured below are just a few incredible resources that may just help web designers or developers solve a few tricky responsive design problems.
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. FitText provides a responsive solution to text size. No more fussing with 52px headlines on the iPhone version of a website, pretty sweet!
Perhaps the single most simple solution to developing a responsive website or project. Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.
We’ve professed our love for Bootstrap more than a few times on the site. However, did you know that Twitter Bootstrap does not only include the ability to design a fixed width responsive site. Bootstrap also includes a Fluid grid layout designed to fit any screen at all.
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.
Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design. If you require a folding grid system. Golden is a great place to get started.
Now 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16 columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels.
FlexSlider is an awesome, fully responsive jQuery slider plugin that is being cared for by the WooThemes crew. FlexSlider is easy to use. Even better, FlexSlider provides or hardware accelerated touch feedback where available.
The go-to slider for web developers and designers around the world is now fully responsive. It very simply just does not get any more simple than Nivo.
Often responsive design simply does not mean exacting PhotoShop design placement. Styletiles provides a method in which a designers can communicate the “atmosphere” of a design.
If you are a LESS or SASS user, then you might want to take a long look at the Semantic Grid System. Tired of using unsightly layout classes throughout html markup? Semantic provides for pre-processed methods in which to apply relevant styles to semantic elements.
Being responsible about responsive design can mean cutting down on download times at every corner. A great way to cut down on HTTP requests is to place commonly used images within a sprite image. Spritepad makes it easy to create a sprite and even helps provide the relevant CSS code to render your sprite correctly.
The Filament Group is at it again, delivering on a quick and simple method in which to query the relevant pixel density of a device and serve up a perfect image.
When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.
TinyNav.js is a tiny jQuery plugin (362 bytes minified and gzipped) that converts <ul> and <ol> navigations to a select dropdowns for small screen. It also automatically selects the current page and adds selected=”selected” for that item.
As you can see, the responsive web is growing every day. Choosing the correct tools can make a web crafter’s job a whole lot easier. Take a look at a few of the resources above and let us know what your favorites are in the comments below.