Written by Katherine Giron Pe
on 

Bootstrapping Design with CSS Frameworks

This is a recap of things learned and discussed for a simple tech meetup focused on web design.

Date of the event: Feb. 9, 2013

Mentors: Jolo Santos (Senior UX developer, currently working for Citrusbyte) & Katherine Pe (Ruby on Rails developer, currently working for Assembla, Inc.)

Thanks to those who attended and to Arkhe Salcedo whose car is far from being dirty.

What we learned:

  1. HTML always starts with a Doctype declaration. We’ve seen quite a few sites that didn’t have it. They still render properly on some modern browsers but usually not on IE as Arkhe mentioned.
  2. Use Photoshop for designing but do not start with a blank canvas. Download the PSD of the 1140 CSS grid framework.
  3. Semantic markup for layout, typography and forms.
  4. Why logos should use a heading (h1) and be replaced by an image using CSS (SEO reasons).
  5. Testing HTML and CSS using Firebug.
  6. Various SEO plugins for Chrome.
  7. Meta tags and basic rules.
  8. Some HTML5 tags like section and article.
  9. How to create a conventional blog layout using 1140 CSS grid framework.
  10. Workflow for designers: wireframing with Balsamiq and developing a style guide.
  11. Vimeo vs. Youtube Design: To shout or not to shout?
  12. Other interesting things that should not go into this blog.

Semantic Markup

CSS Frameworks

Debugging and Testing Tools