Layout

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: , , , ,

jul 10 2009

Dagens linkhøst, 10. juli

Bog­mærker ind­sam­let den 10. juli fra 08:04 til 09:03

Design­ers Tool­box: Design Resources
10. juli
Col­lec­tion of tools and graphic ele­ments for designers.
Four Meth­ods to Cre­ate Equal Height Columns | Build Internet!
10. juli
This arti­cle dis­cusses some meth­ods to cre­ate equal height columns that work on all major web browsers (includ­ing the infa­mous IE6). All of these meth­ods show how to cre­ate a three col­umn layout.
Color Scheme Designer 3
10. juli
Another appli­ca­tion for mak­ing color schemes.

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

jul 8 2009

Linkhøst fra 2. juli til 8. juli

Bog­mærker ind­sam­let fra 2. juli til 8. juli

Advanced Word­Press — Cat­e­gory Based Nav­i­ga­tion Instead of Page Based | Intel­li­gent Web­site Wid­get Deploy­ment Strategies
8. juli
Most Word­Press themes use pages for nav­i­ga­tion. This is fine for most sin­gle user blogs, but when you want to really start expand­ing what Word­Press can do, look at using cat­e­gories for your main navigation.
Pat­tern­Cooler | Cool Seam­less Back­ground Pat­tern Designs for Web and Graphic Projects, Blogs, Twit­ter, MySpace, Mobile Phone Wallpapers,
4. juli
Add your own col­ors to con­tem­po­rary and retro pat­tern designs, or browse from thou­sands of pre-colored pat­terns in the seam­less pat­tern back­ground library.
Cre­ate a Clean and Col­or­ful Web Lay­out in Pho­to­shop — Tutorial9
2. juli
In this tuto­r­ial I am going to show you how to cre­ate a clean cor­po­rate lay­out in Photoshop

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

nov 27 2008

Runde hjørner med jQuery

jQuery logoPænt afrund­ede hjørner i web­de­sign laves på klas­siske vis med grafik­s­tumper i top og bund af de bokse, der ønskes afrund­ede. Denne metode har imi­dler­tid ofte den ulempe, at den kræver ekstra opmærkn­ing, der ikke nød­vendigvis giver mening, skaber rod i koden samt kræver indlæs­ning af ekstra grafik, som er med til at sløve indlæs­ningsti­den af websitet.

Slip for unødig grafik og HTML
Med javascript kan man imi­dler­tid undgå både ekstra opmærkn­ing og grafik. Dave Methvin har lavet et plu­gin til javascript-biblioteket jQuery, som kan netop dette. jQuery er et glim­rende letvægts-javascript frame­work, der gør det nemt for designere med begrænset kodeer­far­ing at lave rel­a­tivt avanceret funk­tion­alitet i et website.

Fra grafik-pest til javascript-kolera?
Skal man så rode sin kode til med javascript i stedet for grafik og opmærkn­ing, bare for at få runde hjørner? Som sagt kan jQuery bruges til rigtig mange ting. Har man i forve­jen brug for noget af jQuery’s funk­tion­alitet, er det oplagt at anvende til også at lave visse grafiske effek­ter og vil klart være at fore­trække frem­for den ekstra opmærkn­ing og grafik. Jeg vil helt sikkert gøre brug af dette plu­gin i frem­tidige projekter.

Der er en demo af Round Cor­ner plugin’et samt link til down­load af scriptet her.

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