Sami Greenbury
Technology, Teaching & Travel

Draft: Coder requests for Graphic Designers / How to design for code

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.

Category:

Leave a Reply

Your email address will not be published. Required fields are marked *

 

000-017   000-080   000-089   000-104   000-105   000-106   070-461   100-101   100-105  , 100-105  , 101   101-400   102-400   1V0-601   1Y0-201   1Z0-051   1Z0-060   1Z0-061   1Z0-144   1z0-434   1Z0-803   1Z0-804   1z0-808   200-101   200-120   200-125  , 200-125  , 200-310   200-355   210-060   210-065   210-260   220-801   220-802   220-901   220-902   2V0-620   2V0-621   2V0-621D   300-070   300-075   300-101   300-115   300-135   3002   300-206   300-208   300-209   300-320   350-001   350-018   350-029   350-030   350-050   350-060   350-080   352-001   400-051   400-101   400-201   500-260   640-692   640-911   640-916   642-732   642-999   700-501   70-177   70-178   70-243   70-246   70-270   70-346   70-347   70-410   70-411   70-412   70-413   70-417   70-461   70-462   70-463   70-480   70-483   70-486   70-487   70-488   70-532   70-533   70-534   70-980   74-678   810-403   9A0-385   9L0-012   9L0-066   ADM-201   AWS-SYSOPS   C_TFIN52_66   c2010-652   c2010-657   CAP   CAS-002   CCA-500   CISM   CISSP   CRISC   EX200   EX300   HP0-S42   ICBB   ICGB   ITILFND   JK0-022   JN0-102   JN0-360   LX0-103   LX0-104   M70-101   MB2-704   MB2-707   MB5-705   MB6-703   N10-006   NS0-157   NSE4   OG0-091   OG0-093   PEGACPBA71V1   PMP   PR000041   SSCP   SY0-401   VCP550   ICGB   CAP   JN0-102   70-486   1Z0-051   220-801   70-980   EX200   70-346   400-051   70-412   1Z0-144   70-480   300-075   EX300   1Z0-051   HP0-S42   MB5-705   70-411   PR000041   300-208   500-260   ICBB   70-410   70-483   000-017   350-029   350-080