Responsive Design, not just on the front end
This week we see another great contribution from the guys and gals over at .net magazine. Backing up from their Responsive Design Week they have published another corker of an artilce on RESS (Responsive Design + Server Side Components).
The idea behind it is that responsive web design techniques and server side techniques are combined to serve an optimal experience for each device. This means that we will serve slightly different requests to some devices for a given URL, but we still use responsive techniques for whatever ends up on those devices.
It’s an answer to some issues that are faced, but is it the answer to it?
Without further ado, Week #4.
Headlines
RESS (Responsive Design + Server Side Components) - The idea behind it is that responsive web design techniques and server side techniques are combined to serve an optimal experience for each device. This means that we will serve slightly different requests to some devices for a given URL, but we still use responsive techniques for whatever ends up on those devices.
Goodbye waterfall, 5 Steps to building responsive web designs - In this article from RWW they look at the responsive approach to getting your team building the responsive design. The look at planning, requirements, analysis, design, implementation, deployment, testing, and evaluation.
Deciding what break points to use - When you start to think in terms of device dimensions, you’re not thinking responsive. Responsive Web Design is fluid and flexible; something that adapts to the surroundings it happens to inhabit.
Javascript, jQuery & pollyfills
Some times we just need the browser to do a little bit more than it will naturally allow us to do (looking at your IE). In those cases we need a little help from our friend Javascript.
Below I have included a few items that might come in hand when trying to get that experience and design just right for the user.
Typography
Slab Text - Put simply, the script splits headlines into rows before resizing each row to fill the available horizontal space. The ideal number of characters to set on each row is calculated by dividing the available width by the CSS font-size – the script then uses this ideal character count to split the headline into word combinations that are displayed as separate rows of text.
Fit Text - 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.
Pollyfill (gettin’ it done is older browsers)
Respond.js - Brainchild of Scott Jehl, the goal of this script is to provide a fast and lightweight (3kb minified / 1kb gzipped) script to enable responsive web designs in browsers that don’t support CSS3 Media Queries – in particular, Internet Explorer 8 and under.
CSS3-Mediaqueries.js - by Wouter van der Graaf is a JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+, Safari 3+ and Chrome already offer native support.
Image Carousels & Photogrids
Photoswipe - PhotoSwipe is an HTML/CSS/JavaScript-based image gallery specifically targeting mobile and touch devices. All modern mobile and touch devices, as well as the desktops and laptops, are supported.
Flex Slider - Flexslider is a lightweight, fully responsive jQuery slider plugin. It has simple, semantic markup, slide and fade animations, and is supported by all major browsers so you won’t have any compatibility issues.
FitVid.js - FitVids.JS is a lightweight, easy-to-use jQuery plugin for responsive width video embeds. It automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design.
Grid Layouts
jQuery Masonry - Masonry is a dynamic grid layout plugin for jQuery. Whereas floating arranges elements horizontally then vertically, Masonry arranges elements vertically, positioning each element in the next open spot in the grid.
Isotope Dynamic JS Layout - An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts. This demo shows you what you can do, or you can go straight to GitHub.
Conferences & Workshops
Ampersand Conference – A conference focussing on web type, which are the individual elements that help drive responsive design. The conference looks a doosey, and the site is VERY well put together.
Creating Web Content – Web content is essentially what Responsive Design allows us to focus on. Why worry about focussing on the content if it’s rubbish! Relly’s online course provides you with the tools and techniques to need to deliver amazing contnet for your own site and provide clients with some direction.
And finally…
We’ve once again been humbled by the good feedback and increasing subscriber rates. If you want us to focus on anything in particular to do with responsive design be sure to get in touch with us.
Thanks for reading Responsive Design Week #4. We have just got the first cut of the new responsivedesign.is site and I must say, our designer freaking rocks! I’m pouring more and more content into the site & setting up an interesting navigation method based strongly around the search results.
See you next time for week #5
No related posts.