WORK IN PROGRESS – this is a work in progress, if you have anything to add let me know here: contact me!
Design is important, really important. Making things look right has an incredible impact on how visitors use our creations.
But not all design is essential, and not all styles are fixed.
Over many years of coding designs from mockups I’ve come across many habits graphic designers have which are very complicated to code.
So in my quest to ease Designer/Develoepr relations I’m compiling here a list of tips for designers to help them create designs which are easy (or not very messy) to code.
Naturally, if a design is wanted it can be coded. The Internet is magical like that – but if it doesn’t really matter if the logo is 2% larger on tablets than mobiles, lets keep them the same and keep the code sane.
Do use Rows
Everything on the web is either a rectangle or sits inside a rectangle.
You cannot see the rectangles which are responsible for layouts, but they’re still there. Making them overlap is possible, but not easy to do right.
Keeping things aligned in these invisible rows and columns makes coding life much easier.
Don’t make small changes
Every tiny visual change requires code to make the change and define when or where to apply the change. Having a button be 3px taller on the newsletter signup form than on the contact form requires about an extra 6 lines of code.
Don’t mix percentage and fixed widths
Having the form-labels be a fixed 150px wide and the form element take up the rest of the page is not fun to make happen in code. Either use percentage widths, or use fixed widths (which can be defined differently at different overall widths, but see “Don’t make small changes” above.