we are architects

Have you ever wanted to be an architect?

and how that relates to html/css

CREATED BY ANTHONY CACCESE1Monday, April 19, 2010

• The blueprint of a house is an important component of development

• If that blueprint is not “solid” then the house will be unstable.

• This makes the house difficult to maintain and makes it difficult to add new additions in the future

• The blueprint is similar to the underlying html markup of a website

HAVE YOU WONDERED “HOW IS THAT BUILT?”


IS THAT AN HTML VERSION OF THE HOUSE?

• The markup is similar to the studs in the walls of a house. Those studs wrap its functionality (i.e. plumbing/electric). In addition they are a base for a designer to be able to decorate.

• If we make our markup “solid” then it is easier for an electrician to run power lines and for a designer to paint and hang artwork

• If our markup is messy then the house becomes unstable and the functionality and design can become unstable as well


Our html markup must be “Solid”


HOW I MAKE MARKUP “SOLID”#1 DRAW LIKE I DID WHEN I WAS 5

• Print out a design

• Get a few different colored markers

• Draw on the design to cut up modules and take notes

• This allows me to see a micro & macro view of a design and helps me plan out a good way of laying things out in my markup

• In this process I typically come up with a base naming scheme and see where I can create global styles (i.e. where I should think abut using a class vs. an ID)


HOW I MAKE MARKUP “SOLID”#2 STUDY THE LANGUAGE AND KNOW THAT I DON’T KNOW EVERYTHING

• I recently looked at markup I had coded 10 years ago vs markup I am coding now.

• Its interesting to see how I learned to utilize tags back then vs. today

• Also to see what tags I didn’t use (either because I wasn’t aware of them or because I misunderstood their use)

• For example the <dl> tag has been in the specification since 2.0 but I haven’t really started using it until the last few years. Understanding what it can do has cleaned up my code a lot.

• Our language improves so we have to improve too

• with HTML5 coming into light we should be taking the time to learn what new tags it has to offer and how those can improve our markup as well

• We can find ways to use them in our code now too even though browser support is still in progress.

• The point is to remain up to date

• As architects we have to constantly hone what we know and be open to learn new techniques that will improve our markup


HOW I MAKE MARKUP “SOLID”#3 KEEP “TABS” ON EVERYTHING

• Tab your markup

• Trust me

• Just do it

• Ok... Why?

• It allows you to quickly get a sense of the hierarchy that you have created.• Have you noticed I have tabbed everything on this slide so far?

• Makes other developers lives easier when trying to understand how items in your markup are related


HOW I MAKE MARKUP “SOLID”#4 CONTINUE THE LOVE/HATE RELATIONSHIP WITH IE6

• I remember at my old office someone had written “IE SUX” on a whiteboard

• Yes we all know how terrible IE6 was/is...

• Its not modern friendly!!

• It doesn’t embrace standards!!

• YouTube is cutting support for it!!

• I treat it like “coding in notepad”

• I do not “code for IE6”. I code for all browsers and IE6 gives me perspective on that goal.

• It forces me to think...

• “can I make this markup even simpler?”

• I am then able to build a foundation that is easy to “add to” instead of one that i have to “take away from” or “patch”


HOW I MAKE MARKUP “SOLID”#5 CREATE SNIPPETS AND THEN DEDUPE AFTERWARDS

• Remember when I told you that I print out designs and draw on them?

• One of the benefits I gain from that approach is seeing items on a page as modules

• So I code them out individually and create html snippets

• It may take a little longer at first this way but it allows me to focus.

• Rather than worrying about the entire page (which will come later in the dedupe process) I can instead focus on making a module as “solid” as possible

• If you can get an specific module “solid” then it will work in the greater page all the time. The added bonus is that it will probably work on other pages you have not considered yet.


HOW I MAKE MARKUP “SOLID”#6 MICROFORMATS ARE BLUEPRINTS FOR “SIMPLICITY”

• So what are microformats?

• I look at them as a set of guidelines for structuring markup

• The structure they provide helps...

• organize code

• SEO

• parsers and modern browsers to interpret our code better

• Why should I be using them?

• They take a lot of the guesswork involved with coming up with naming conventions for elements. That guesswork has led me in the past to overcomplicate markup

• They give us great hooks for creating global styles

• Markup because much more readable to a human eye

• Examples?

• hcard for agent contact information on a property listing

• hlisting for a property detail page


HOW I MAKE MARKUP “SOLID”#7 CUT “CLASS” BUT REMEMBER MY “ID”

• In the past I would put class on everything. In going through old code I found that approach made me use classes more like IDs and it caused unnecessary bloat to the markup.

• There are places to use class and places where ID would make more sense.

• I break it down to...

• Is this an element that I want to be able to create a base style for?

• Do I only need to style it right here in the current module?

• Examples?• A design has a tabbed navigation on a few of its modules. In that case I would create a “tabs” class

with some base style rules such as floats, borders, selected states, etc.. Then if needed I can override some of those style by referencing the module’s ID

• a global-navigation doesn’t necessarily need classes on its contained elements because I can style everything once off if the main ID. And since the styles are mostly exclusive to that navigation it doesn’t matter if those styles are available to other elements on the page.


HOW I MAKE MARKUP “SOLID”#8 UNDERSTAND WHAT IS POSSIBLE IN CSS3

• Border Radius

• Rounded corners without using images

• Works in latest versions of Mozilla and Webkit Browsers

• Box Shadow

• Drop shadows without using images

• Works in the latest versions of Mozilla and Webkit

• RGBA

• Stands for Red Green Blue Alpha

• Instead of setting colors in HEX you can define them as RGB values and then set a level of transparency

• We will take a VERY deep look into CSS3 in a later session

• Can we use it today? Yes we can and I will explain why and how.


HOW I MAKE MARKUP “SOLID”#9 RESET STYLESHEETS REMOVE WORRY OF BROWSER HANDLING

• We all know that different browsers handle displays on certain elements differently

• An example is how <li> tags are handled in IE vs Firefox (hint think margin vs padding)

• A reset stylesheet allows us to baseline those values so we don’t have to worry about them when coding. It can be real easy way to simplify our css because it removes a lot of the duplication we end up writing (i.e. margin: 0; padding: 0; almost every time we put a tag on a page).

• This can be useful if we are coding in someone else's wrapper as well when we have markup created for our elements but there are conflicts with their styles.


HOW I MAKE MARKUP “SOLID”#10 USE SPRITES TO DE-CLUTTER THE /IMG/ FOLDER

• Have you ever seen an image folder that looks like this?

• Sprites can help us manage that better

• We can avoid creating an image for each individual icon

• If we structure our sprites well we can even use them to hold gradients and header graphics that we have from our designs

• Why?

• Easier to maintain

• Makes us think about structure as well

• Speed! Browser/User has less to download if there are less individual images

• Bonus: Also consider “placeholder” images for prototyping

• prefix images that are being used for prototyping with “placeholder-” that way they are easier to spot and delete when the project is complete


So remember...

You are an architectPlease keep your markup “solid”


we are architects

Technology