QUICK TIPS ON
FRONT-END DESIGN/DEVELOPMENT
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

HI MY NAME IS NICK
Nick Looijmans
twitter.com/nilo
Master student Communication & Multimedia Design
Looking for a job soon, contact me: nick@nilo.be
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

1 SHARE, DON’T CARE
Share your knowledge (blogs, Twitter, barcamps)
➡
Nick Looijmans
Don’t care about people “reading” your code
➡
blog www.nilo.be
twitter.com/nilo
“We all benefit from a healthy internet”
➡
Nate Koechley, Yahoo senior front-end developer
Masterstudent Communicatie & Multimedia Design
Learn from others, read your heroes’ source
➡
Looking for a job soon, contact me: nick@nilo.be
code
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

2 USE GRIDS
Nick Looijmans
blog www.nilo.be
twitter.com/nilo
Masterstudent Communicatie & Multimedia Design
Looking for a job soon, contact me: nick@nilo.be
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

2 USE GRIDS
Nick Looijmans
blog www.nilo.be
twitter.com/nilo
Masterstudent Communicatie & Multimedia Design
Looking for a job soon, contact me: nick@nilo.be
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

2 USE GRIDS
Foundation of easy-to-scan websites
➡
Forces you to think about your site structure
➡
in a design phase of good modular source
code
Brings a lot of advantages to slicing (cfr.
➡
modular layout)
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

2 USE GRIDS - EXAMPLES
960 Grid System - www.960.gs
➡
Blueprint CSS - www.blueprintcss.org
➡
MYO - www.makeyourown.now
➡
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

2 USE GRIDS - EXAMPLES
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

3 USE RESET.CSS
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

3 USE RESET.CSS
Better control of your HTML elements
➡
See for yourself what an element should look
➡
like or how it should behave
Some browsers have a different basic
➡
interpretation of a HTML element
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

3 USE RESET.CSS - EXAMPLE
YUI Library Reset
➡
Yahoo! User Interface Library
➡
http://developer.yahoo.com/yui
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

4 KEEP YOUR CSS CODE CLEAN
Use different sections
➡
Basic body
➡
Headings
➡
Links
➡
Header, Navigation, Content, Footer, etc.
➡
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

4 KEEP YOUR CSS CODE CLEAN
.footer ul li a {
font-size: 14px
margin-bottom: 5px
text-decoration: underline;
font-weight: bold;
color: #0073;
text-transform: uppercase;
float: left;
background: #f;
}
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

4 KEEP YOUR CSS CODE CLEAN
.footer ul li a {
background: #f;
color: #0073;
float: left;
font-size: 14px
font-weight: bold;
margin-bottom: 5px
text-decoration: underline;
text-transform: uppercase;
}
Alphabetical order
➡
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

5 MAKE YOUR CSS REUSABLE
Define as much global classes as possible
➡
.column, .sidebar-box, sidebar-box h3, etc.
But wait... don’t overuse classes
➡
cfr. sidebar-box h3 vs. h3.sidebar-title
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

5 MAKE YOUR CSS REUSABLE
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

5 MAKE YOUR CSS REUSABLE
.header { width: 940px; }
.column { float: left; margin-right: 10px; width: 300px; }
.column-last { float: left; width: 300px; }
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

5 MAKE YOUR CSS REUSABLE
.header { width: 940px; margin-left: 10px; margin-right: 10px; }
.column { float: left; margin-left: 10px; margin-right: 10px;
width: 300px; }
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

6 WRITE YOUR HTML FIRST
Think about how you will build up your site
➡
Think about which elements you are
➡
going to use
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

6 WRITE YOUR HTML FIRST
Make sure your core functionality works with
➡
HTML only
Enhance your layout through CSS
➡
Enhance behavior through Javascript
➡
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

6 WRITE YOUR HTML FIRST
Layer 3: JS
Layer 2: CSS
Layer 1: HTML
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

7 GOOD TYPOGRAPHY MAKES GOOD DESIGN
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

7 GOOD TYPOGRAPHY MAKES GOOD DESIGN
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

8 WATCH THIS VIDEO
Nate Koechley on Professional Frontend Engineering
➡
http://video.yahoo.com/watch/4671445
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009

THANKS
QUESTIONS? REMARKS?
BARCAMP ANTWERPEN MARCH 21ST 2009
Sunday, March 22, 2009