17 Mar 13
Responsive Web Design Sucks: Image & Text Tools
Nearly three years ago an article on A List Apart titled “Responsive Web Design” sparked an absolute storm in the web design community. The increased difficulty and time required to accomplish responsive web design is why it sucks! Responsive web design is probably here to stay at least in the foreseeable future, this series of posts provides some insight into useful resources that hopefully aid designers and developers. What you really want to look for are ‘truly responsive websites‘, that are able to adapt seamlessly across all screen dimensions, and not just a set few. You can find part one here: Responsive Web Design Sucks.
On fixed width web designs, images and text were all completely static and required relatively little to no effort during implementation. Not so with responsive web design! Here are some helpful tools.
Adaptive Images by Matt Wilcox detects your website users’ screen size and automatically creates, caches, and displays device and screen-size appropriate versions of your web page’s images. The great part is there is no mark-up changes needed.
Alternatively if you require a plugin that serves up appropriately-sized versions of an image to a user’s device, negating the need for mobile phone users to download unnecessarily large assets. Picture Fill by Scott Jehl is very useful, all markup pattern and explanations included.
Displaying images edge-to-edge can be a real pain when creating a responsive website, especially when the images are different sizes but need to maintain their aspect ratio. Here’s the perfect tool from CSS Tricks – Seamless Responsive Photo Grid.
When it comes to image sliders the web is saturated with them, but there are currently only a handful of free responsive image sliders. Our favourite is definitely FlexSlider 2 from woothemes as its complete with slide effects and fade animations, works with all major browsers.
This tool by Jeremy Worboys is an absolute must when listing tools for responsive web design currently. It serves different images based on the device (retina screens) being used. The setup is simple and fallback regular images are displayed with high-res isn’t available.
Viljamis is well known in the web design community, this instructional article is more of a resource rather than a tool. Very detailed article that has many great tips about choosing font faces, font scales, sizing type, leading and white space.
This script uses the above FitText plugin, but splits headlines into rows before resizing each row to fill the available space. It calculates the ideal number of characters to set on each row by dividing the available width by the css font size. It all sounds very complex, but it really is a simple solution to big, bold and responsive headlines – see the SlabText demo or download SlabText.
Responsive Images and Text
Utilising responsive images and text to its fullest can deliver some of the most stunning websites on the web, I recently showcased 26 awesome examples of responsive web design on noupe.com. Did I miss out one of your favourite responsive image and text tools? Let me know what you found helpful.