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

4,766 views

Published on

Published in: Technology, Design
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,766
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
35
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • Next:   How it starts
  • Next:   My introduction
  • Next:  More than 150 websites
  • Cover: -  I created websites for various organizations as a freelance / entrepreneur  - from 2002-2006 Next:   Some of them were web applications
  • Cover What&apos;s interresting about web apps: - We can guess the outcome - Separation between the markup - Lots of opportunity to have standardized markup Here: ~ Next: What I learned
  • Recreating always the same made me think there must be a way Cover: - the layer - Progressive enhancement, responsive design - Learn from existing tools - Browser war is over finished with conditional jQuery, Modernizr But there is still something missing. Next:  ... In an ideal world...
  • Cover: - Impact - Work together - Architect of markup and missing link with UX and Designers Next: The project (before)
  • Cover: - First version was old  - We were asked to work with the marketing agency to change the image - From this &amp;quot;Legal&amp;quot; image to one about the most important thing. The artists. Next: ... present
  • Cover: - Each artists has a profile - Artists can showcase lots of details - Transformed it as a usable platform - Agents can do castings - UDA can manage business issues - Commerce to sell artwork - Agents can do custom search on the numerous details - Search within all site and attached documents ... Major business logic changes ... into... Warning: Dont&apos; blink Next:  Future
  • Cover:  Why rebuilding?   - The actual version was not scalable   - Wanted to make it future compliant - We had to make it look as it&apos;s exactly the same. Next:  Steps to manage &amp;quot;Gather... &amp;quot;
  • Cover:  Why rebuilding?   - The actual version was not scalable   - Wanted to make it future compliant - We had to make it look as it&apos;s exactly the same. Next:  Steps to manage &amp;quot;Gather... &amp;quot;
  • Cover: - Take all screenshots you can - Enumerate them in sequence to refer to them - Put together things that you assume is the same visuall y If it&apos;s a mint project: - Work with the designer... all possible views - Work with the programmers team ... contexts (service failure, application error, etc) Important:   This will be used throughout the static code process   Next:  2. Organize
  • Cover: Get a hardcover book - timestamp  - illustrate possibilities with programmers - refer to it later - Organize ... estimated markup ... similaritude  - Sketch everything - Use it as your project reference for all your markup as a draft This is what will create the landmark to follow. Next: ... Organize and do Sketches
  • Cover: - Reconcile w/programmers where to put what id&apos;s and classes - Convention, less pollution and tagsoup - Define w/programmers to be able to require different assets (js, css files) specific to modules Landmarks are important because you can make sure the application will put the switches on the correct places. Next: Build the markup
  • Cover: I tried many 1. Blueprintcss 2. 960gs 3. HTML5Boilerplate 4. Compass w/ SASS 5. Went creating my own Before starting the &amp;quot;real work&amp;quot;. Next: Don&apos;t forget the basics
  • Cover:  Just a reminder:   - HTML has its own verbs without any tagsoupization required   - Use tags for what they were designed for   - Same structure for what is the same   - Markup should be used for it’s semantic. Look is what’s CSS’s for.   - Don’t overdo not using tables, sometimes it’s still the best way to go. Next: ... my best advice
  • Cover: - This is one of the most important part - If you are using a new set of tools than your usual. - Better read a bit more on your spare time. It&apos;s worth it!! Next: ... While creating html, don&apos;t forget
  • Cover: ~ Next: Seriously.
  • Cover: ... Next: Some examples
  • Cover: ... Next: Create the main layout
  • Cover: - The landmark is applied here - You set the main zones - The essential skeleton Next: Find visual patterns and normalize markup
  • Cover: - Create all views elements you sketched in your notes - Create static views - Pay attention to the switches - Refer to the references (screenshots) Example of form permutations with only 1 CSS class name. Next: A reference rendering with screenshots
  • Cover: - Create links with reference screenshots - Use it as validation that the markup and CSS is not affected later Next: … Things can break
  • Cover: - This is your security to know if the programmer followed the guides set - It helps you make sure you dont break something while adjusting Because we always have to :( Next: The end result
  • Next: One last thing...
  • Cover: When I started this project, I did not knew about Bootstrap.  - Almost everything you want to be covered is covered. Next: Questions?
  • Next: Thank you!
  • 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

    ×