How to manage big scale HTML/CSS project 

How to manage a bigscale project  

How to manage big scale HTML/CSS project 

• My experience • What I learned from all this • The project • Steps to manage• Build the markup• Get Better • End result

Contents1

How to manage big scale HTML/CSS project 

• Web developer since 1998 • Entrepreneur since 2003 • Training in Web Content Accessibility • Co-Founder Evocatio Solutions

technologiques  • Member of the board of directors

W3Québec • Member of the Organization team at

ConFoo Web Techno Conference

Hello world, my name is Renoir(… yes, the painter)

I contribute to...

February 29 - March 2, 2012

2

How to manage big scale HTML/CSS project 

More than 150 websites3

How to manage big scale HTML/CSS project 

Some of them were web apps4

How to manage big scale HTML/CSS project 

What I learned with all this5

• Abstract presentation CSS with a "theme" layer

• Progressive enhancement is the best thing next to CSS3

• Learn from existing tools

• Browser war is over!

0

How to manage big scale HTML/CSS project 

In an ideal world...

6

• Programmers should not create HTML

• Programmers and Integrators must work together fullfilling each other's needs

• Integrators should be the architect of the markup

Because...• SEO, Microformats, Open Graph • Accessibility, Progressive enhancement • Cross browser, Media queries... AND • Comply with the designer's design• It's what's we are best at

What I learned with all this

How to manage big scale HTML/CSS project 

7The project

How to manage big scale HTML/CSS project 

8The project

How to manage big scale HTML/CSS project 

9The project

How to manage big scale HTML/CSS project 

10

How?

How to manage big scale HTML/CSS project 

Steps to manage

1. Gather visual elements as a "Reference"

11

… you know, screenshots of different UI elements of the project.

How to manage big scale HTML/CSS project 

Steps to manage

2. Organize and do sketches 

• Make a list of all similar visual elements and figure out its best markup

• Compare with the "reference"

12

How to manage big scale HTML/CSS project 

Steps to manage

3. Organize and do sketches Landmarks, for example:

13

• Where to put class names or id's

• Naming convention and standards

• Make sure both programmers and integrator knows which "what", "when" to use

• Work out a way to define assets (js, css) specific to modules.

How to manage big scale HTML/CSS project 

Build the markup

Choose your base to build uponA good starting point...

14

• Something that defines a set of standard markup.

Twitter's Bootstrap is my favourite

• Elicit patterns, Create basic, then add switches.

• Each CSS should be separated Basic, Adaptation(s), Theme

How to manage big scale HTML/CSS project 

Build the markup

• HTML element has 3 basic display typesblocks, table, inline

• Try to NEVER set absolute size/positioningIt's like programmer's goto

• Use tags for what they were designed for

• Markup should be used for its semantic

• Don’t overdo not using tables

Don't forget the basics

15

How to manage big scale HTML/CSS project 

Get better, while working!

Be ready to re-learn

• Have a look at the HTML5Boilerplate, read the comments They are VERY educative!

• Read W3C documentation, specifically CSS selectors.

• Have a look at A list apart, Smashing Magazine, and @SnookCa's SmaCSS

• Follow some blogs, such as CSS-Tricks, Robert Nyman's blog

16

How to manage big scale HTML/CSS project 

Be ready to re-learn My best advice

Write your code by hand. It makes you get better, understand what you do, and in the long run train you to code faster.

Get better, while working! 17

How to manage big scale HTML/CSS project 

Be ready to re-learn My best advice

Seriously.

Get better, while working! 18

How to manage big scale HTML/CSS project 

Some examples?

19

How to manage big scale HTML/CSS project 

Some examples 20

Create the main layout defined with programmers

How to manage big scale HTML/CSS project 

Some examples

Find visual patterns and normalize markup

21

• Same markup• One differentiation factor• Theme comes later

How to manage big scale HTML/CSS project 

What we get

A reference rendering, with screenshots

22

A reference rendering, with screenshotsA reference rendering, with screenshots

During the project, some modifications broke the reference?

How to manage big scale HTML/CSS project 

What we get 23

… Things can break

How to manage big scale HTML/CSS project 

The end result

• Framework compatible partials that the programmers can use to create loops

• Code re-usability for future projects

• Solid markup base to build later on

• Separate responsibility in a team

24

How to manage big scale HTML/CSS project 

One last thing

After creating my own framework on this project.

Twitter's Bootstrap, And @Snookca'sSmaCSS

Already do all this.

Take a look!

25

How to manage big scale HTML/CSS project 

Questions

Slides availableslideshare.com/renoirb

Code I published on GitHub : github.com/renoirb

My del.icio.us feed, lots of stuff:del.icio.us/inexisdotnet

26

How to manage big scale HTML/CSS project 

Thank you!

On Twitter, GitHub, Forrst  @renoirbMy blog (in french)  http://renoirboulanger.com/ 

Where I work http://evocatio.com/

Geeks, unite!

27

February 29 - March 2, 2012