How to manage a big scale HTML/CSS project

How to manage big scale HTML/CSS project

How to manage a bigscale project


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

Contents1


• 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


More than 150 websites3


Some of them were web apps4


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


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


7The project


8The project


9The project


10

How?


Steps to manage

1. Gather visual elements as a "Reference"

11

… you know, screenshots of different UI elements of the 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


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.


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


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


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


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


Be ready to re-learn My best advice

Seriously.

Get better, while working! 18


Some examples?

19


Some examples 20

Create the main layout defined with programmers


Some examples

Find visual patterns and normalize markup

21

• Same markup• One differentiation factor• Theme comes later


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?


What we get 23

… Things can break


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


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


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


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

How to manage a big scale HTML/CSS project

Technology

best markup

set of standard markup

reference rendering

buildthe markup html

html programmers

best advice

best thing

css specific