Responsive Web Design

maj 16 2012

A Bunch of Responsive Tools

Respon­sive Menu
Design­ing nav­i­ga­tion with more than 4 links on mobile devices will quickly prove to be a chal­lenge if you try to set­tle with CSS and media queries. In “Adap­tive Web Design” Aaron Gustafson pro­poses trans­form­ing the usual ordered or unordered list of nav­i­ga­tional links into a <select> drop down menu with JavaScript. Matt Ker­s­ley has turned that approach into a very use­ful jQuery plu­gin, which turns an ordi­nary list of links into a drop down below a spec­i­fied screen size.
You can get it on Github here: jQuery Respon­sive Menu Plugin

Test your respon­sive design
Also, if you want to test your respon­sive web design, you can try it out in Matt Kersley’s Respon­sive Web Design Test­ing Tool. Other than it’s test­ing abil­ity, this tool is a great ref­er­ence for remem­ber­ing the most com­mon breakpoints.

Dynamic Carousel
There are lots and lots of jQuery carousel, image slid­ers and gallery plu­g­ins out there on teh inter­webs, but they are rarely respon­sive. Mat Mar­quis has made a respon­sive one, which scales beau­ti­fully and works pretty well.
You can get it on Github here: Dynamic Carousel 

By Morten Brunbjerg Bech • Links, Web Design, Web Development • 0 • Tags: , , , , ,

mar 7 2012

Navigation patterns in mobile web design

When design­ing for mobile, size mat­ters. You have a lim­ited amount of screen real estate to work with on small dis­plays, mak­ing it impor­tant to free up as much space as pos­si­ble to con­vey your mes­sage. Thus, nav­i­ga­tion should not take up too much space. So where do you put that navigation?

Brad Frost has done a lit­tle research on dif­fer­ent approaches to design­ing nav­i­ga­tion for respon­sive web sites. In “Respon­sive Nav­i­ga­tion Pat­terns” he takes a look the pros and cons of these, giv­ing exam­ples and links to use­ful resources.

Go read “Respon­sive Nav­i­ga­tion Pat­terns” here.

By Morten Brunbjerg Bech • Links, Web Design • 0 • Tags: , ,

jan 31 2012

Krimimessen 2012

Screen dump of Krimimessen 2012

I have just launched a re-design of Krimimessen.dk. Krim­imessen is the biggest fes­ti­val about crime lit­er­a­ture and crim­i­nal fic­tion in Den­mark. A fes­ti­val which is arranged by Hors­ens Pub­lic Library, where I work. The site is designed so it resizes to fit the screen it is being viewed on, also known as respon­sive web design.

This is the first respon­sive site, I have cre­ated. It is built in Word­Press on a base of the awe­some HTML5 Boil­er­plate frame­work, which makes it eas­ier to build a mod­ern web site from scratch.

I learned a lot from read­ing Ethan Marcotte’s “Respon­sive Web Design” prior to this project. Marcotte’s “tar­get ÷ con­text = result” tech­nique, a way to cal­cu­late dimen­sions from pix­els into per­cent, was an invalu­able tool in the process. In fact, and very unusual indeed, it wasn’t even nec­es­sary to test a lot in Inter­net Explorer.

By Morten Brunbjerg Bech • CSS, Portfolio, Web Design, Web Development, Wordpress • 0 • Tags: , , , , , ,