Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
How to manage a  big scale project   
<ul><li>My experience  </li></ul><ul><li>What I learned from all this  </li></ul><ul><li>The project  </li></ul><ul><li>St...
<ul><li>Web developer  since 1998  </li></ul><ul><li>Entrepreneur  since 2003  </li></ul><ul><li>Training in  Web Content ...
More than  150 websites 3
Some of them  were web apps 4
What I learned with all this 5 <ul><li>Abstract presentation CSS with a &quot;theme&quot; layer  </li></ul><ul><li>Progres...
In an ideal world... 6 <ul><li>Programmers should not create HTML  </li></ul><ul><li>Programmers and Integrators must work...
7 The  project
8 The  project
9 The  project
10 How ?
Steps  to manage 1. Gather visual elements as a &quot;Reference&quot; 11 …  you know, screenshots of different UI elements...
Steps  to manage 2. Organize and do sketches   <ul><li>Make a list of all similar visual elements and figure out its best ...
Steps  to manage 3. Organize and do sketches  Landmarks, for example: 13 <ul><li>Where to put class names or id's  </li></...
Build  the markup Choose your base to build upon A good starting point...  14 <ul><li>Something that defines a set of stan...
Build  the markup <ul><li>HTML element has 3 basic display types blocks, table, inline  </li></ul><ul><li>Try  to NEVER se...
Get better,  while working! Be ready to re-learn <ul><li>Have a look at the  HTML5Boilerplate, read the  comments  They ar...
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 ...
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 <ul><li>Same markup </li></ul><ul><li>One differentiation fact...
What we  get A reference rendering, with screenshots 22 A reference rendering, with screenshots A reference rendering, wit...
What we  get 23 …  Things can break
The end  result <ul><li>Framework compatible partials that the programmers can use to create loops </li></ul><ul><li>Code ...
One  last thing After creating my own framework on this project. Twitter's  Bootstrap,  And @Snookca's SmaCSS Already do a...
Questions Slides available slideshare.com/renoirb Code I published on   GitHub :  github.com/renoirb My del.icio.us feed, ...
Thank  you ! On Twitter, GitHub, Forrst   @renoirb My  blog  (in french)  http:// renoirboulanger.com /  Where I work http...
Upcoming SlideShare
Loading in …5
×

How to manage a big scale HTML/CSS project

5,047 views

Published on

Published in: Technology, Design
  • Be the first to comment

How to manage a big scale HTML/CSS project

  1. 1. How to manage a  big scale project   
  2. 2. <ul><li>My experience </li></ul><ul><li>What I learned from all this </li></ul><ul><li>The project </li></ul><ul><li>Steps to manage </li></ul><ul><li>Build the markup </li></ul><ul><li>Get Better </li></ul><ul><li>End result </li></ul>Contents 1
  3. 3. <ul><li>Web developer since 1998 </li></ul><ul><li>Entrepreneur since 2003 </li></ul><ul><li>Training in Web Content Accessibility </li></ul><ul><li>Co-Founder Evocatio Solutions technologiques  </li></ul><ul><li>Member of the board of directors W3Québec </li></ul><ul><li>Member of the Organization team at ConFoo Web Techno Conference </li></ul>Hello world, my name is Renoir (… yes, the painter) I contribute to... February 29 - March 2, 2012 2
  4. 4. More than 150 websites 3
  5. 5. Some of them were web apps 4
  6. 6. What I learned with all this 5 <ul><li>Abstract presentation CSS with a &quot;theme&quot; layer </li></ul><ul><li>Progressive enhancement is the best thing next to CSS3 </li></ul><ul><li>Learn from existing tools </li></ul><ul><li>Browser war is over! </li></ul>0
  7. 7. In an ideal world... 6 <ul><li>Programmers should not create HTML </li></ul><ul><li>Programmers and Integrators must work together fullfilling each other's needs </li></ul><ul><li>Integrators should be the architect of the markup </li></ul>Because... <ul><li>SEO, Microformats, Open Graph </li></ul><ul><li>Accessibility, Progressive enhancement </li></ul><ul><li>Cross browser, Media queries... AND </li></ul><ul><li>Comply with the designer's design </li></ul><ul><li>It's what's we are best at </li></ul>What I learned with all this
  8. 8. 7 The project
  9. 9. 8 The project
  10. 10. 9 The project
  11. 11. 10 How ?
  12. 12. Steps to manage 1. Gather visual elements as a &quot;Reference&quot; 11 … you know, screenshots of different UI elements of the project.
  13. 13. Steps to manage 2. Organize and do sketches   <ul><li>Make a list of all similar visual elements and figure out its best markup </li></ul><ul><li>Compare with the &quot;reference&quot; </li></ul>12
  14. 14. Steps to manage 3. Organize and do sketches  Landmarks, for example: 13 <ul><li>Where to put class names or id's </li></ul><ul><li>Naming convention and standards </li></ul><ul><li>Make sure both programmers and integrator knows which &quot;what&quot;, &quot;when&quot; to use </li></ul><ul><li>Work out a way to define assets (js, css) specific to modules. </li></ul>
  15. 15. Build the markup Choose your base to build upon A good starting point... 14 <ul><li>Something that defines a set of standard markup. Twitter's Bootstrap is my favourite </li></ul><ul><li>Elicit patterns, Create basic, then add switches. </li></ul><ul><li>Each CSS should be separated Basic, Adaptation(s), Theme </li></ul>
  16. 16. Build the markup <ul><li>HTML element has 3 basic display types blocks, table, inline </li></ul><ul><li>Try to NEVER set absolute size/positioning It's like programmer's goto </li></ul><ul><li>Use tags for what they were designed for </li></ul><ul><li>Markup should be used for its semantic </li></ul><ul><li>Don’t overdo not using tables </li></ul>Don't forget the basics 15
  17. 17. Get better, while working! Be ready to re-learn <ul><li>Have a look at the HTML5Boilerplate, read the comments They are VERY educative! </li></ul><ul><li>Read W3C documentation, specifically CSS selectors. </li></ul><ul><li>Have a look at A list apart , Smashing Magazine , and @SnookCa's SmaCSS </li></ul><ul><li>Follow some blogs, such as CSS-Tricks , Robert Nyman 's blog </li></ul>16
  18. 18. 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
  19. 19. Be ready to re-learn  My best advice Seriously . Get better, while working! 18
  20. 20. Some examples ? 19
  21. 21. Some examples 20 Create the main layout defined with programmers
  22. 22. Some examples Find visual patterns and normalize markup 21 <ul><li>Same markup </li></ul><ul><li>One differentiation factor </li></ul><ul><li>Theme comes later </li></ul>
  23. 23. What we get A reference rendering, with screenshots 22 A reference rendering, with screenshots A reference rendering, with screenshots During the project, some modifications broke the reference?
  24. 24. What we get 23 … Things can break
  25. 25. The end result <ul><li>Framework compatible partials that the programmers can use to create loops </li></ul><ul><li>Code re-usability for future projects </li></ul><ul><li>Solid markup base to build later on </li></ul><ul><li>Separate responsibility in a team </li></ul>24
  26. 26. One last thing After creating my own framework on this project. Twitter's Bootstrap, And @Snookca's SmaCSS Already do all this. Take a look! 25
  27. 27. Questions Slides available slideshare.com/renoirb Code I published on GitHub : github.com/renoirb My del.icio.us feed, lots of stuff: del.icio.us/inexisdotnet 26
  28. 28. Thank you ! On Twitter, GitHub, Forrst   @renoirb My blog (in french)  http:// renoirboulanger.com /  Where I work http:// evocatio.com / Geeks, unite! 27 February 29 - March 2, 2012

×