Browsing articles in "XHTML/CSS"
Apr
1

Pulp Browsers > Browser Wars

Found this little gem the other day on Twitter. For all of us who enjoy Pulp Fiction as much as we hate broswer testing, I bring you… Pulp Browsers.

Nov
11

Fear and Mystery of Web Design

I presented at AIGA Arizona Say Anything on November 10th. Here is the write up of the talk based on the slides that were presented that evening. I hope everyone got something out of this presentation and please feel free to post comments regarding questions you may have on this material. :) Thank you to AIGA Arizona for the opportunity to present and I hope to be back real soon.

Step 1: What is Web Design?

Often fear is simply a lack of understanding, so to begin this journey, let’s start by defining what web design, as a craft, is. I feel that Jeffery Zeldman of Happy Cog Studios put it best when he summarized web design as:

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

Wow, lots to digest there, let’s break it up a bit.

The creation of digital environments that facilitate and encourage human activity.
So basically all this is saying that web design is design within a digital space (i.e. the web) but more importantly that it’s main purpose is to facilitate and encourage human activity. We want to interact with them, give and get from the user. This allows for a special kind of communication that we haven’t ever seen from media before. Instead of dictating to the consumer, we can now receive and act on information provided to us, very powerful.

Reflect or adapt to the individual voices and content.
While the web is still a relatively new media format in the grand scheme of media and advertising, it’s still very customizable. We should harness this adaptability and use it to the best of our abilities to reflect and present the content in a very specialized manner. The web was created for the purpose of collecting and sharing information; web design cannot forget these roots as we move forward. Content is king, it’s the most important part, and should be treated that way.

Change gracefully over time while always retaining its identity.
Web design is unlike many other forms of media because of the way it can be changed over time. Unlike print, we can continue to add, take away and mold this space over and over again. The tricky part is doing it gracefully and staying true to the original brand and statement. If we change too often or off course of our brand in can alienate our users instead of creating those core connections and communications levels we would like to have.

Overall, web design is very similar to other types of design; there are still guidelines, best practices, and techniques that separate good design from the bad.  Also, just like all other types of media, it’s centered on communication, however there is a new addition that makes this a new frontier, the interactivity of the users who use it.

Now that we know our adversary, let’s delve into those guidelines, best practices and techniques that will allow you to be empowered to go head first into the fight.

Step 2: Knowledge is Power.

The more you know about why and what you’re designing for the web will help you in your quest.

Start with a purpose.
What’s the real reason behind why the design needs to be created? Perhaps it’s to share product information or to be able to process online orders. What ever it is, nail it down and keep it simple. Even if there are a few reasons, keep them concise and in front of you at all times. This will help you stave off the needs for the “wouldn’t it be nice if?” scope creep that can really get you in trouble later.

Define your users and what they need.
Who are your users? What do they want from you? More often than not they won’t need a sales pitch, they’re qualified leads or else they wouldn’t be there. So veer away from the extended sales pitch and instead focus on giving your users the information they need & want about your services or products. Need help figuring out what your users want the most? Check out your current google analytics statics to see what your users are looking for the most, or check out a heat mapping service such as Crazy Egg that will help you visualize what your users are looking for and clicking on.

Communicate to develop correct functionality scope.
Talk with your client, project manager, and development team to come up with a correct scope of functionality. When the client signs off on designs, often they’re not only signing off on look and feel but functional items such as searches, drop downs, user functionality, etc. Make sure that everything that’s depicted within the comps is with in functionality scope and doable.

Collect all content.
This is a tough one to accomplish, but stick in there and this one will pay off! More often than not timelines slip because the client doesn’t realize the scope of content needed to complete a web project. When you focus on getting these items right off the bat it allows the client to become more of an active participant in the planning and will help them understand how much work is involved in the design and development process. It will also keep them busy so they’re not prodding for more features or badgering you about deliverables sooner than the timeline suggests. Collecting all the content also helps you plan out an accurate site information architecture and will help you design with the voice and content already in place.

Step 3: Organize for the user.

Once you’ve got all your parts and pieces remember to organize them keeping the users and their needs in the forefront at all times. Knowing more about usability will help you out here, so check out this definition from Jakob Nielsen.

Usability: the users perception of how consistent, intuitive, and organized it is to accomplish tasks within a system.

Offer the user clear choices.
Don’t overload the user with options, stick to the purposes and users needs that you had outlined earlier. Keep it clear, easy to understand, and if you can make it so easy that the user feels like a GENIUS because it was so easy to use.

Use conventional terms, icons and positioning.
Sure we all want to create something new and fun, but try to stick with the normal terms, icons, and placement on standard web stuff. Such as don’t replace the e-mail envelope with the @ symbol, it will require your users to think, and to break that stream of consciousness enables poor usability.  However, just because you should stick with the standards doesn’t mean you can’t bend the rules, you just have to do it in such a easy way that it can be picked up with minimal effort. Most users scan the page in a F-Shaped eye tracking, so you most likely want to place your most important pieces within this pathing.

Easily digestible content blocks.
Avoid large / lengthy blocks of content if possible. Most web users tend to scan content vs. read it fully so keep it short and concise. If you want to overview content, stick to three to five bullet points with links that go to the full content for those who are interested.

Consider user flow.
Remember for every link you create in your design there must be somewhere that goes to. Remember standard user flows like what are the steps/process when a user registers, signs in, or tries to buy a product? Remembering these steps as you design will help you comprehend the whole flow and layout of the website as a whole.  If you would like help with some of these steps, check out a handy service called Product Planner.

Wireframes are your friends, you can’t have to many.
Wireframes can help considerably when you’re still planning out the placement of major items and user flows, they’re less time consuming and can be really amazing tools when trying to understand what should be the most important elements within a page.

Step 4: Roll up your sleeves.

Alright, with all that collecting and planning I guess you should be ready to actually design something right? Check out some of these tips to make your design to implementation time shorter.

Be smart about imagery/graphics

  • Too many images means it will take too long to load, while it loads it will look like crap. So, be smart and use the less is more approach. Also, all those images won’t have the search engine weight as text would have, so remember that when choosing typefaces as images, etc.
  • If you REALLY want to use a non-standard font face, check out sIFR for your implementation, but a few notes on this, sIFR uses flash to render the font so it will still impede load time. It will be SEO compliant, but it will also require flash.
  • Images can be an accessibility nightmare, if seriously informational text is included in graphics it needs to be in full text as the alt attribute for the image. Instead of having to remember all this, using a regular font and HTML text would be a better decision.

File organization

  • Organize your PSD to have all elements grouped together by area such as header, footers, callouts, etc this will make selecting and merging for cutting easier later.
  • Include on and over states for navigation, since this is an interactive space these styles will need to included so that they can be implemented later.
  • Keep all your layers editable, you never know when you’ll need to change a piece of text or a background color later, instead of redoing the entire PSD, just be smart and don’t merge layers.
  • Create a style guide that outlines all fonts, colors, and styles used so that creation on the CSS style sheet can be easily created without having to re-examine your PSD later

Stay true to the end user
Even though you’ve focused on the users during the gathering and planning processes, you can’t forget about them now. Through out design iterations it’s easy to forget about the end user in hopes to quell the client, keep in mind that this website isn’t for your client to use, its for their customers, so they’re most important.

Jan
11

Links of the Week Vol. 3

Adaptive Path Employees share their new years resolutions with their users. Some of them are very much work related, some not so much, but I thought it would be interesting to see what other web professionals are reflecting on at the beginning of this year.
http://www.adaptivepath.com/ideas/essays/archives/000875.php

This amazing Honda Accord ad required 606 takes, cost $6 million dollars, and took 3 months to complete.
http://www.steelcitysfinest.com/HondaAccordAd.htm

Pretty decent CSS cheat sheet for those of you who want to learn more about the production wonders of the world.
http://lesliefranke.com/files/reference/csscheatsheet.html

Interesting SEO Success Pyramid graphic that highlights some of the key requirements of great SEO success.
http://www.smallbusinesssem.com/img/pyramid-print.jpg

“How many five year olds could you take on in a fight?” Enter your stats and find out how many five year olds it would take to take you down!
http://www.howmanyfiveyearoldscouldyoutakeinafight.com/

Dec
12

CSS Continued… Part 2:Reduce, Reuse, Recycle

By april.holle  //  technology reviews, XHTML/CSS  //  2 Comments

Making the web cleaner, one project at a time…

Remember the Cascade To Reduce Selector Use
Try a minimalistic approach to the number of ids and selectors you create. Use the cascade to your advantage by creating child elements of your current class instead of creating a whole new class to describe what you want that additional element to do. So for instance, you have a main body area, and in that area you have a unordered list that has a new list item style. You can code for this one of two ways. You could make two separate selectors (one for the main content area and one for the ul) and have these be totally unrelated to each other and have to reference the ul selector every time you create a ul in that content area, or you could do this:

#contentMain {float: left; width: 660px; padding: 20px;}
#contentMain ul {list-style: disc;}
#contentMain ul li {padding-bottom: 5px;}

This allows you to declare only the <ul> in your xhtml instead of <ul class="ulMain">. This keeps your code really clean and cascading down from the parent class is great because you’re not stuck using those styles everywhere for each ul. This is extremely handy when your dealing with user entered content from content management systems because they don’t have to remember they have to apply particular styles to these elements during development or even worse, when the client is entering the content themselves.

Don’t be afraid to style base xhtml elements, you can always go back and make it specific to a parent selector, or even add a selector to it if they really are necessary.

Create Reusable Selectors
If you notice yourself reusing a lot of css calls in every single selector you create you may want to make a reusable base class. Got a lot of elements that need to float left? Create:

.floatLeft {float: left;}

Then just double up your selectors to reduce the number of times you have to declare the float: left; CSS call in your stylesheet.

<div id="contentMain" class="floatLeft"> </div>

You can create reusable classes for all kinds of things, aligns, floats, widths, etc.

Make Your Classes Carpool
Doubling up your classes can really give you an upper hand when you have elements that need multiple reusable selectors. Instead of creating a selector that will change one aspect of a current class, try doubling up your classes instead.

.product {width: 150px; color: #666;}
.floatLeft {float: left;}

<div class="product floatLeft">Product details here.</div>

Minimize CSS Class Footprint Using Shorthand
You can shorten up your css calls per selector by taking advantage of some of the great efficiency built right into CSS. To help you remember margin and padding short hand use the word: TRouBled. The uppercase letters stand for Top, Right, Bottom, Left, so for instance you’re declaring padding for an element:

p {margin: top right bottom left;}

or you can even shorten it to two entries if your top-bottom and left-right margins are the same, like:

p {margin: topbottom rightleft;}

Another call that is really handy is the font call. So instead of:

p {
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 1.2em;
line-height: 1.6 em;
font-family: Arial, Verdana, San-Serif;}

you get:

p {font: font-style font-variant font-weight font-size/line-height font-family;}

Another smaller short hand notation is three value hex color codes. So for instance instead of #cc0000 you can do #c00.

Dec
11

CSS Continued… Part 1:Organization Boot Camp

By april.holle  //  XHTML/CSS  //  No Comments

Keep it Together Man!

Always keep your styles in external style sheets when possible.
Inline styles, while they seem handy when you just need to make a quick update, will spell trouble in the future when you need to make full design changes. They also make troubleshooting that much more difficult since you have to remember everywhere you’ve put styles.

Use multiple stylesheets whenever handy.
Don’t be afraid to break your styles out as you see fit. While importing additional style sheets can cause additional server load, the benefit is far greater to break out these styles by relevance. So for instance, you might have reset.css, screen.css, print.css and ie.css all for one project.

Use comments, quick colors and tables of contents.
Make sure to comment all of your css style sheets, if you feel so inclined you can add a bookmark type symbol such as an equals (=) sign. The equals sign is a good symbol to pick since it never occurs in css styles regularly. Then add it to your section comments like so:

/* --------------------------- =header ----------------------------------*/

This allows you to do a find on your document so you can quickly jump from section to section. To make this tip even handier, add a table of contents to your document like so:

/* CONTENTS
=header
=body
=section
=content
=footer
*/

You can also use the top of your document to reference color codes you use quite regularly throughout your document to help you remember.

/* COLORS
Body Background: #2f2c22
Main Text: #b3a576
Links: #9c6d25
Dark Brown Border: #222019
Green Headline: #958944
*/

Thanks to Jina Bolton for all these handy commenting/bookmarking suggestions.

Use consistent organization.
When laying out your stylesheets and styles themselves, try to keep consistent organization project by project, sheet by sheet, style by style. If you work in a larger company, you may want to sit down as a team and discuss how everyone would like to standardize their organization, that way everyone will have the same method to the madness. How you organize your styles is really up to you ultimately, but there are several ways that are common among front end architects.

Sheet Naming and Breakout
Most use the following breakout for their sheets:

  • reset.css,holds the Eric Meyer CSS reset or some variety of it
  • default.css or screen.css, holds all the screen styles, this sheet can also be broken out into the following if you prefer:
    • layout.css, holds all the layout styles
    • typography.css, holds all the typography styles
  • print.css, holds all the print styles
  • ie.css, specific ie style corrections to remain cross broswer compliant, see Conditional Comments on how to implement these

Again, these naming conventions and suggested breakout is just… a suggestion, you and your team can really decide what you want to call these and how many sheets you ultimately end up with. There may be situations in which you want to have a separate style sheet for each theme you use within a site, etc.

Remember the cascade when you import your style sheets, each time a new sheet is called the styles are overridden by the new style sheet if it’s included within. For instance, say you call your ie specific style sheet first, your element style has a width of 200px, and then you call your default.css sheet which has an element style of 205px, the element will pick up the last style it was told, which was 205px from the default, which is not what you want, you wanted the 200px from the ie specific style sheet.

ID vs. Class
I notice that most people who start learning CSS have a tendency to like to use classes more so than ids. When making the choice between using ID or a class, ask yourself one question, “Will this selector appear more than once on a page?” if the answer is yes, use a class, if it’s no, use an id.

Selector Breakout
After you figure out how you want to break your sheets out, take some time to consider how you are going to break out your styles within those sheets. Remember the cascade here too when you’re organizing, since the last style used will be the one the elements pick up. Here’s a sample of how some front end architects organize their styles within each sheet:

  • container styles and parent elements, such as body, wrapper, or containers
  • standard element styles, this includes HTML elements such as h1-h6, p, blockquote, etc
  • global styles, anything that will be used throughout the site such as mastheads, etc
  • section specific styles, anything that changes on a page by page basis

another example would be:

  • parent styles and containing elements, working outside in
  • block-level elements
  • inline level elements

After you layout your styles, you may want to get really picky and organize how each style call is called within a style set. After years of experience, some people just form a natural tenancy to call some styles before others, take for instance the way Jina Bolton does her calls per set:

  • positioning (with coordinates) styles
  • float/clear styles
  • display/visibility styles
  • spacing (margin, padding, border) styles
  • dimensions (width, height) styles
  • typography-related (line-height, color, etc.) styles
  • miscellaneous (list-style, cursors, etc.) styles

I have also personally formed a natural tenancy that goes something like:

  • positioning
  • float/clear
  • display/visibility
  • dimensions
  • margin/padding
  • borders
  • typography
  • misc.

Other front end architects prefer to go another route in hopes to make it easy for others to find things, alphabetically listing their style calls within their sets. At this level, organization might be too obsessive or asinine, but some people consider it helpful.

Also, I’ve noticed two ways of laying out your css sets, some front end architects choose to tab out their calls like this:

.cssSelector {
csscall: option;
csscall: option;
}

While others like to do it all in one line:

.cssSelector {csscall: option; csscall: option;}

Either is acceptable of course, but again, if you’re working in a team environment, you may want to standardize this so that everyone can read it easily. I personally opt for the all-in-one way since I like seeing how many lines of CSS I *didn’t* have to write to make something work.

Selector Naming
CSS selector naming is also very important. When naming selectors remember that your styles may change, so try not to name based on a item’s location within the layout or particular style attributes, such as color or size. Instead, try basing your selector name on the content it holds, Andy Clarke wrote up a great set of examples.

There is also some debate on whither to use camelCase or to separate using the dash (-). Honestly, either are acceptable. Again, perhaps this is something to discuss with your teammates.

So that’s it for this part of CSS Continued… was there something in here you didn’t quite agree with? Perhaps you want to share how you organize your sheets and selectors… leave a comment and we’ll get some sweet discussion going!

Dec
11

CSS Continued…

By april.holle  //  art forms, self-reflection, XHTML/CSS  //  No Comments

CSS is easy enough to start to learn, but it really takes some practice to master and understand the beautiful efficiency it provides. These techniques of efficiency separate the apprentices from the masters in the art of CSS. Now that I know what I know now, I wish someone would have told me these secrets from the beginning. The longer you practice great CSS techniques, the better you’ll be at it, so I’m giving you a head start with my first blog series: CSS Continued…

So listen closely Grasshoppa. ;)

Dec
10

Happy Webbies

By april.holle  //  new idea!, user experience, XHTML/CSS  //  No Comments

Love website design and development? Love the people who make it great? Check out Happy Webbies! It’s like Happy Bunny for web geeks. You can get desktops of your favorite web gurus bashing bad design or better yet, Eric Meyer can span your chest on your very OWN eric meyer happy webbies TEESHIRT! Watch out! **closes her p tag**

Dec
1

Lots to Do This Week

I just wanted to make sure you were invited to all the awesome web and design happenings this week in Phoenix!

Tues, Dec 4th – Refresh Phoenix

Refresh Phoenix meets every first Tuesday of the month to discuss current internet issues and trends. The topics range from becoming your own boss to css frameworks to make your work more efficient. This month the topic is results from the 2007 Web Design Survey that was put out by A List Apart. This should be a very interesting conversation since there really has never been a survey of the internet industry.

When: Tuesday, December 4th 6:30 – 9:30 pm (come early to get some networking in)

Where:
Inza Coffee
8658 East Shea Blvd, Scottsdale

Fri, Dec 7th – 16th Annual AIGA Art Auction

AIGA Arizona is holding it’s annual Art Auction event in Downtown Phoenix at MonOrchid Studios during December First Friday! AIGA Arizona is pleased to present over 100 original works of art (paintings, mixed media, photography, digital art, sculpture, jewelry, and more) displayed on sale in live and silent auction formats. Plus bid on a selection of special packages that include dining, entertainment and recreation. This year’s art auction will also feature the Mohawk Show.

When: Friday, December 7th 6-10 pm

Where:
MonOrchid Studios
214 E. Roosevelt Street, Phoenix

Sat, Dec 8th – BarCamp Phoenix

BarCamp is an ad-hoc un-conference born from the desire for people to share and learn in an open environment. It is an intense event with discussions, demos and interaction from attendees. All attendees must give a demo, a session, or help with one. This is great because you can both speak and be an audience member.

When: Friday, December 8th 9 am – 5 pm

Where:
University of Advancing Technology (UAT)
2625 W. Baseline Road, Tempe

Nov
9

Happy Hyperlinks & Link Love

By april.holle  //  user experience, XHTML/CSS  //  1 Comment

I came across a great article this morning that discusses how to make your links stand out while not making them a pain in the ass to use. Links are great assets that can increase the value of your content by providing supporting material for your discussion and satelliting your topic to similar sites throughout the web. But, if your users can’t find these morsels of greatness or if they get annoyed by the way the links are provided, the whole value is lost. To learn more about the art of hyperlinks check out the full article over at Coding Horror. You may also be interested in a quality assurance article regarding the use of “click here” by the W3C.

Nov
8

Reminder: Facebook Developers Garage

This is just a happy little reminder about the Phoenix Facebook Developers Garage event!

What is a Facebook Developers Garage? It’s an opportunity for developers, marketers and any one else to learn more about Facebook, Facebook applications, marketing through Facebook applications, building applications and everything in between. Highlights of the event include a presentation by Dave Morin of Facebook on Platform and a detailed look at the evolution of the Red Bull Roshambull application by Nate Warner of Red Bull. Seating is limited to the first 150 that RSVP to this event, so if you have interest be sure to get in early! Click here to RSVP


Date: Wed, Nov 14th, 2007

Time: 6-9 PM

Location:
Tempe Center for the Arts,
700 W. Rio Salado Parkway,
Tempe, AZ

Agenda:
6:00 pm – Networking & Refreshments
6:30 pm – Keynote Speaker: Dave Morin, Facebook
7:15 pm – Marketing Facebook Applications – Chris Johnson, Terralever
7:30 pm – Application Presentation: ‘Roshambull’ presented by Nate Warner, Red Bull
7:40 pm – Facebook Application Development, presented by Scott McAndrew & Joel Neubeck, Terralever
7:50 pm – 5-minute Apps and Ideas mini-presentations (If interested, contact one of the Event Admins)
8:30 pm – Live Social Networking
9:00 pm – Let the afterparty begin (location TBD)

What is this?

This little blog happens to be the personal ramblings of one April Holle - I'm female, outspoken, webbie, a community evangelist, and Principal of Made Better Studio. Check out the about section for more info.

What People Are Saying…