5 Responsive Techniques for your Responsive Headache – part 1

Designer Developer

By Posted On: Sep 30, 2014

Every developer and designer has those days that no matter what you try or imagine, it just doesn’t work for your responsive site. Your idea may be a great solution for mobile devices but, it is not as user-friendly on desktop and vice versa.  You use all of your progressive enhancement knowledge and yes, it is functional but does it really meet the need of the user?  Does it really fit with the flow of the site? At times, the answer is no.

Here are a few techniques and plugins that I have found that have helped cure my…well, responsive headache. Some I haven’t used yet but I now know there is a solution to the problem I’ve had in the past.  I hope you find them as useful as I do.

  1. Responsive Tabbed Navigation – http://codyhouse.co/gem/responsive-tabbed-navigation/

    One of the greatest content organizational tools is also one my biggest headaches to design responsively.  Here is a great solution that accommodates all browser sizes and works pretty well.

  2. Responsive Typography – http://tympanus.net/codrops/2013/11/19/techniques-for-responsive-typography/

    Sara Soueidan wrote this very timely article about responsive typography. A must read for that particular headache when wanting readable text on all devices.  I use Zurb’s Foundation 5 for a lot of my development and the framework already has a number of these techniques built-in but, the article is a great read all the same.

  3. Responsive Carousel – http://sorgalla.com/jcarousel/examples/responsive/

    All carousels are not created the same! Finding a responsive carousel that is easy to customize, that will change the amount of items based on screen size, and will actually work is really rare! I almost passed over this gem but I stumbled across the link that said “Responsive…” in the examples and I’ve used it ever since. Customize everything with CSS! Great tool for responsive articles listings, galleries, etc.

  4. Expanding Search Box – http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

    What do I do with that search box?!? I don’t want to hide it in the menu because it is really important but having it just sit there is not visually appealing…what do I do?  Here is a solution I have seen on a number of sites and it is both cool, functional and user-friendly.  Mary Lou from Codrops has a great article explaining how to accomplish this or just download the source and use it.  Web Designer Wall also has a great article about it as well: http://webdesignerwall.com/demo/expandable-search-form/

  5. Equal Columns – http://css-tricks.com/fluid-width-equal-height-columns/

    Equal columns are always a problem!!  You have three columns and you want them all the same height; what do you do?  Chris Coyier explored some well known tricks and some not-so-well-known tricks to accomplish the elusive equal column layout.  He doesn’t really talk about them in terms of responsive layout, but the concepts and the techniques are the same, just apply it to the media queries you want to have equal columns.  Check them out and see which is best for you.

Bonus Cool Tool: Frame – http://frame.lab25.co.uk/

Not going to describe this one, just click the link and you will bookmark it immediately!  Trust me!

Back to top

Back to top