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 30 2012

Style Tiles and Responsive Web Design

I used to start out my web design comps in Pho­to­shop. How­ever, design­ing for respon­sive­ness makes it a bit of a chal­lenge. Because what do you do, when your design needs 5 or 6 break­points? Do you make 5 or 6 dif­fer­ent comps of every page? And what about the states between the breakpoints?

Design­ing in the browser
Some would argue that you should start your designs directly in the browser. A ratio­nal approach, which also does a bet­ter job of elim­i­nat­ing the trou­ble with explain­ing, why your pixel-perfect design does not look the same in every browser. How­ever, design­ing in the browser is also an approach that may some­what limit cre­ativ­ity.

Start­ing out with Style Tiles
So before you even start your comp, maybe you should start some­where else. Get­ting the look and feel right before design­ing a full page lay­out may be helpful.

Saman­tha War­ren pro­poses using “Style Tiles” as a tool to help with team and client com­mu­ni­ca­tion. A Style Tile is a design deliv­er­able con­sist­ing of fonts, col­ors and inter­face ele­ments that com­mu­ni­cate the essence of a visual brand for the web:

Style Tiles are sim­i­lar to the paint chips and fab­ric swatches an inte­rior designer gets approval on before design­ing a room.
 An inte­rior designer doesn’t design three dif­fer­ent rooms for a client at the first kick-off meet­ing, so why do Web design­ers design three dif­fer­ent web­page mockups?

Saman­tha Warren

Go check out Saman­tha Warren’s clever take on design­ing for the web at Styletil.es. You can also grab a neat pho­to­shop tem­plate for mak­ing your own Style Tiles.

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

mar 28 2012

Luke Wroblewski on Mobile First at Drupalcon Denver

Are you still won­der­ing why you should design and develop for mobile first? If you can spare the best part of an hour, it is worth check­ing out Luke Wroblewski’s keynote at Dru­pal­con Den­ver 2012. It is both infor­ma­tive and enter­tain­ing, and I am shure, it will kill your doubt instantly.

Luke Wroblewski’s keynote on Mobile First

By Morten Brunbjerg Bech • Web Design • 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: , ,

feb 24 2012

Invaluable online CSS generators

CSS3 lets us build really nice look­ing things, but let’s face it, the code does tend to get at bit bloated, when we have to repeat every­thing for each ven­dor pre­fix. Appar­ently, ven­dor pre­fixes are also hard to remem­ber, given the cur­rent debate on cer­tain browser ven­dors’ plans of imple­ment­ing the –webkit pre­fix. Or maybe some devel­op­ers are just too lazy writ­ing all that code? Nonethe­less, some parts of the CSS3 syn­tax is also really hard to remem­ber. At least I have a hard time remem­ber­ing the syn­tax for CSS3 gradients.

How­ever, I am get­ting really good help from a hand­ful of online tools. They do a great job of remem­ber­ing the syn­tax for me and mak­ing other tasks a bit eas­ier as well. Here is a list of the online CSS gen­er­a­tors, I use the most.

Pre­fixr and –pre­fix– my css

Repeat­ing every prop­erty for every browser ven­dor can be a pain in the neck. Just write the stan­dard CSS3 prop­er­ties and then paste them into either Pre­fixr or –pre­fix– my css. They both take care of the nec­es­sary pre­fixes, out­putting the code for you to copy and paste.

CSS3Generator

Don’t remem­ber which pre­fixes are nec­es­sary for box-shadow or border-radius? Try cre­at­ing your CSS3 effects with this handy tool.

ColorZilla’s Ulti­mate CSS Gra­di­ent Generator

This gra­di­ent gen­er­a­tor makes it really easy to cre­ate gra­di­ent back­grounds, min­i­miz­ing your need of Pho­to­shop for the same pur­pose. It includes all the nec­es­sary pre­fixes. Copy and paste, and you’re good to go.

0 to 255

This color gen­er­a­tor actu­ally does noth­ing in terms of CSS3. It just makes life a lot eas­ier, when it comes to find­ing lighter and darker hues of a cer­tain color.

Animate.css

If you are not yet ready to write your own or just want to make it easy, Dan Eden’s Animate.css is a col­lec­tion of CSS3 ani­ma­tions for you to pick and choose from. If there are none you like, he has even made it easy to cre­ate a cus­tom build, so you don’t even have to write a sin­gle char­ac­ter by hand.

Grid­pak

Grid­pak is a repon­sive grid gen­er­a­tor for mak­ing fluid lay­outs, com­plete with media queries and ready for mobile. Math­e­mat­i­cal skills are not needed here, because it cal­cu­lates the gut­ter– and col­umn widths on the fly.

Do you use any great online CSS tools or gen­er­a­tors, you would like to share? I’d like to hear about it.

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

feb 7 2012

Icon Fonts

Webfont specimenRespon­sive Design is the new black for web design­ers. But with respon­sive design comes a lot of chal­lenges. One of them is to make ui icons scale with the rest of your lay­out. How­ever, icon fonts is a promis­ing solu­tion in its infancy.

Icon fonts are vec­tor based graph­ics and are able to scale indef­i­nitely with­out los­ing qual­ity, as opposed to the more well known and com­mon pixel based icons. But icon fonts are also tied to char­ac­ters and this is where the chal­lenges come in, when we want them dis­played cor­rectly with­out mak­ing too much trou­ble in screen read­ers or screen scrapers.

I have been col­lect­ing a few resources on the topic.

Using Icon Fonts
Besides being a ser­vice, that offers a nice col­lec­tion of scal­able icons, Pic­tos also has a great arti­cle on the pros and cons of icon fonts and how to use them.

Icon Fonts are Awe­some
Chris Coyier of CSS-tricks.com has put together a nifty exam­ple, where he demon­strates how easy it is to scale, col­orize and shape the shadow of icon fonts with plain and sim­ple CSS.

How to make your own icon web­font
Over at Web­de­signer Depot, Hey­don Pick­er­ing has writ­ten a tuto­r­ial on what makes a good icon and how to turn it into a webfont.

Icon Fonts
Finally, if you are not yet ready to make your own icon font, Font Squir­rel has a small col­lec­tion of free icon fonts, also avail­able as @font-face kits. Go grab ‘em and try them out.

By Morten Brunbjerg Bech • CSS, Icons, Web Design • 0 • Tags: , , , , ,

feb 2 2012

Respond.js bug?

I ran into a strange bug today.

I recently launched Krimimessen.dk where I have used a small poly­fill script writ­ten by Scott Jehl, respond.js, to make the site’s respon­sive­ness work in older ver­sions of Inter­net Explorer.

But then one of my col­leagues made me aware of a bug that seemed to trig­ger when click­ing on links in Inter­net Explorer 8. Not in everybody’s Inter­net Explorer 8, oh no. Only in Inter­net Explorer 8 on cer­tain machines. Well, who said it should be easy to test for bugs?

Instead of going to the desired des­ti­na­tion, the browser went to a URL with this pat­tern:
res://ieframe.dll/acr_error.htm#the-url-without-http

I have done a lit­tle search­ing on the issue, and gen­er­ally peo­ple say the prob­lem goes away if you delete the browser cache or dis­able browser exten­sions. How­ever, that solves no prob­lem, because I can’t ask my users to delete their cache.

Then I stum­bled upon some­one in the Drupal.org forum who had had the same issue and one of the pro­posed fixes was to move respond.js to the footer.

And there you go. It seemed to work. At least the bug disappeared.

But accord­ing to the Respond usage instruc­tions, the script ought to be loaded as quickly after the CSS file as pos­si­ble to avoid glimpses of “unre­spon­sive­ness” in ie.

So now I won­der if this is a bug in ie8 bug can be fixed within respond.js? Or is it some­thing else, that trig­gers the bug? Or am I just using respond.js wrong?

By Morten Brunbjerg Bech • Web Design • 2 • Tags: , , , , ,

feb 1 2012

Styling images with CSS3

Pimp­ing images with rounded cor­ners, box shadow and other CSS3 eye candy can be a pain in that part of the body, you nor­mally sit on, because browser sup­port is really lousy.

Until now. Because Nick La from Web Designer Wall has a nice lit­tle trick up his sleeve, which involves wrap­ping the image in an HTML ele­ment and mak­ing an over­lay for styling with a CSS pseudo-selector.

Go check out Nick’s tuto­r­ial here

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

jan 31 2012

The 1000px grid

Elliot Jay Stocks, Bris­tol based web designer and illus­tra­tor, recently pro­posed on his blog a 1000 pixel grid as the base for lay­out pro­to­typ­ing in Pho­to­shop, instead of the more com­mon and defacto 960 pixel grid, we have all become so used to.

The rea­son? The math is so much eas­ier to do, when trans­form­ing the grid from pix­els to per­cent in respon­sive web design.

It is such a sim­ple and obvi­ous approach, I’m almost embar­rased, I haven’t thought of it before.

Elliot Jay Stocks: A bet­ter Pho­to­shop grid for respon­sive web design

By Morten Brunbjerg Bech • CSS, Photoshop, Quick tips, 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: , , , , , ,

1 2 3