How to manage a big scale HTML/CSS project

Uploaded on


More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    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'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 "Legal" 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' 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's exactly the same. Next:  Steps to manage "Gather... "
  • Cover:  Why rebuilding?   - The actual version was not scalable   - Wanted to make it future compliant - We had to make it look as it's exactly the same. Next:  Steps to manage "Gather... "
  • 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'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'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 "real work". Next: Don'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's worth it!! Next: ... While creating html, don'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!


  • 1. How to manage a  big scale project   
  • 2.
    • My experience
    • What I learned from all this
    • The project
    • Steps to manage
    • Build the markup
    • Get Better
    • End result
    Contents 1
  • 3.
    • 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
  • 4. More than 150 websites 3
  • 5. Some of them were web apps 4
  • 6. What I learned with all this 5
    • Abstract presentation CSS with a "theme" layer
    • Progressive enhancement is the best thing next to CSS3
    • Learn from existing tools
    • Browser war is over!
  • 7. 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
    • 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
  • 8. 7 The project
  • 9. 8 The project
  • 10. 9 The project
  • 11. 10 How ?
  • 12. Steps to manage 1. Gather visual elements as a "Reference" 11 … you know, screenshots of different UI elements of the project.
  • 13. 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"
  • 14. 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.
  • 15. Build the markup Choose your base to build upon A 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
  • 16. Build the markup
    • HTML element has 3 basic display types blocks, table, inline
    • Try to NEVER set absolute size/positioning It'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
  • 17. 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
  • 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. Be ready to re-learn  My best advice Seriously . Get better, while working! 18
  • 20. Some examples ? 19
  • 21. Some examples 20 Create the main layout defined with programmers
  • 22. Some examples Find visual patterns and normalize markup 21
    • Same markup
    • One differentiation factor
    • Theme comes later
  • 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. What we get 23 … Things can break
  • 25. 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
  • 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. Questions Slides available Code I published on GitHub : My feed, lots of stuff: 26
  • 28. Thank you ! On Twitter, GitHub, Forrst   @renoirb My blog (in french)  http:// /  Where I work http:// / Geeks, unite! 27 February 29 - March 2, 2012