Category Archives: web design

accessibility, css, web design, webstandards

Designing for cross browser compatibility

One of the best and worst things about the web is the fact that when it comes to your choice of web browser the program you use to access and view the internet – you have multiple options. From the standard Internet Explorer (PC) or Safari (Mac) to open source projects like Firefox to outsiders like Camino and Opera.

The problem is that all of the browsers interpret (X)HTML – the code websites are written from – very differently and all of them have their own internal style sheets and form controls. What this basically means is that a site designed in one browser can look vastly different in others especially older or non-standards compliant ones like IE6.

There are 3 main ways to deal with browser compatibility issues – having the right tools, designing with web standards, and utilizing filters or conditional statements to feed alternative styles to less compliant browsers.

Tools

The first step to dealing with cross browser issues is to design in a compliant browser. In most cases, the best one to start with is Firefox. The simple reason for this is the vast tools it gives a web designer to pinpoint problems and quickly debug code. Two of the best are the Web Developer’s Toolbar and Firebug.

The Web Developer’s Toolbar gives you the ability to edit CSS on page to test fixes quickly, to outline specific elements, disable cache easily to enable testing (since CSS is cached naturally) and many other useful features outside the scope of this article. Firebug is one of the best design tools available allowing you to inspect elements on the page, see the cascade of styles applied to that element to narrow down bugs or rendering issues, and even allows you to edit the (X)HTML on page so that you can quickly test for different scenarios. Both of these will save you a great amount of time while you are designing your site.

Web Standards

Web standards is the practice of writing (X)HTML using standards compliant code – basically utilizing correct tags for elements, using CSS for presentation, markup for content, and limiting the amount of markup to the least amount necessary to complete the task and provide enough “hooks” for your CSS. Some of the benefits include improved Search Engine Optimization and the ability to re-design your site later on simply by editing the style sheets. The other benefit is the fact that you use CSS for presentation – allowing you to deal with presentational issues relating to browsers easily.

After getting your markup done it’s time to style your site. The easiest way to avoid compatibility issues later is to reset the styles on all elements. This is done because different browsers use different styles for elements. One might naturally put 10px of padding on a p tag and another might put 10px of margin. This is the root cause for many rendering issues found later. A good reset style sheet was posted recently on Eric Meyer’s site.

If you’ve done both of the above then you are now setting yourself up to have the least amount of issues possible. Depending on the complexity of your site it might look exactly the same in most of the browsers – Firefox, Safari, IE7 and (hopefully) IE6. If not, the next step is to utilize filters and conditional statements.

Filters and conditional statements

Filters should only be used when nothing else can. If you have designed in Firefox then at this point you should have no issues in that browser. Internet Explorer will be covered in the next paragraph. Opera has no way to filter CSS to it. It typically has few rendering issues that do not pop up in Firefox though and any that do typically you must live with. The only browser not mentioned is Safari which does have a large user base. In your main style sheet you can define styles to target only Safari by using the following rule:

:: root (parameters) { styles }

So now you’ve covered the most compliant browsers: Firefox, Safari and Opera. The only one left is IE. IE has it’s own set of filters but utilizing them is not advised because they get messy as you have to override main styles for IE6 then in many cases re-override those for IE7. The best practice is to use conditional statements. You simply define additional style sheets – for example looking at the source of this site you’ll see a sheet called mainIE6.css – and put the rules for those browsers in them. Microsoft has defined conditional statements that can then feed those styles to whatever IE version you define and only IE. The standard way to do this follows:

<!–[if IE 6] (style sheet link) <![endif]–>

Other operators beside if include lt (less than), gt (greater then), lte (less than or equal) and gte (greater than or equal). So lte IE6 would target IE6 and below. The operator gte IE7 would target IE7 and above – and so on.

Now you have the tools to correct any rendering issues that might pop up.

In conclusion, the best way to deal with cross browser compatibility issues is to limit the chance for them to appear by using the right tools, standards compliant markup and CSS. Some issues will always appear and the few that do can then be handled by using either filters or conditional statements. Remember always to test in multiple browsers to find the issues. At a minimum your suite should include IE6, IE7 and Firefox. If you have access to a Mac then Safari should be included as well.

Random Tidbit: I really like SEOmoz. I like their article on getting traffic from Digg comments even better – though I’m a bigger fan of Reddit personally.

css, web design, webstandards

Modular Web Design

So I’ve been reading a lot about modular web design. Basically what it stands for is creating a web site – essentially a template – in such a standards compliant and well thought out manner that redesigning the site later on requires you to only modify the CSS file. It’s not a new concept – it’s something that was introduced when CSS was created and made famous by the CSS Zen Garden. Recently sites have been recreating their own personal zen gardens allowing for quicker redesign turnaround.

It’s a process I’ve used since I read up on the Zen Garden. The last 3 sites I’ve done – including my own – were done off a basic template. In essence it was a wire-frame design. And now, if I wanted to update any of them – and I’ve done small ones from time to time – I have enough hooks typically to just add or modify CSS rules. Though this doesn’t work if you go from a simple design, like my site, to a more complex design – with things like rounded corners especially. In those cases you will have to modify the XHTML.

Though it’s simple it’s not a process all beginners can copy though. And it’s an excellent learning tool. So later this week I hope to upload 2 templates – one being the wire-frame and one a more meatier zen garden-esque template. Stay tuned.

Random Tidbit: Along with Web 2.0 has come a new workplace. An article I saw on A List Apart talked about the “Long Hallway” – basically it talks about how in the new workplace designers/developers can collaborate from home offices around the world, building a team with no set office.  It’s something I’ve been thinking about for awhile and very interesting.

SEO, web design, webstandards

The Basics of SEO

I’ve done a few SEO posts lately, but I got to thinking of another quasi beginner’s guide – similar to the one I posted awhile back. I think this is a little more clear as I have gained more information, insight and confidence with regards to the subject.

Search Engine Optimization (SEO) is comprised of 3 basic elements: good site design, site age and trust, and link popularity.

Good site design basically means two things: designing with web standards and utilizing good keywords and content in SEO important tags.

Designing with web standards means using semantic tags – p for content paragraphs, ul/ol for lists, h1-6 for headers and so on. It also means using the least amount of non-semantic tags like divs and spans to provide hooks in order to style your site with CSS. Ideally, you want to have the least amount of tags possible because a large amount of non-semantic tags makes it harder for search engines to “read” your site and find content, as well as the fact that they only index so much of a page, so if a page is too large and your content too far down it might not be seen at all. Many standard tags like headers, p and lists are block level elements anyways and can by styled with borders, padding, margins and background images eliminating the need for extra divs for all but the more complex designs like rounded corners.

Utilizing good keywords and content is a major part of SEO. First, you must decide what your site is about and what you are looking to provide to users. That will determine your content and what searches you should (and can) optimize for. Second, you must place those in SEO important tags. The highest level and most important is the page’s title tag which displays at the top of the browser. For example, in this article (at the time of this writing at least) the title tag of this page reads “The Basics of SEO.” Having relevant, clear, concise and individual title tags is one of the most important parts of SEO. Each page should ideally have a unique title – for example your home page might be “YourSite.com” and your about page might be “About YourSite.com”, etc. Second is a page’s h1 tag(s) which should be, ideally, similar to the title tag but not exactly the same. Some repetition is good but you don’t want to keyword stuff. Finally, at a much lower level, are h2-h3 elements and, on a much broader level, the actual content of the site. While the actual content is not in important tags, this allows search engines to figure out what your page is about, what keywords you really are targeting, and what should be displayed in search result snippets.

Site age and trust are harder to quantify. Site age refers not to how old the domain name is but how long it has been in the search engine’s index. This is why older, popular domains can fetch a decent price at sale and can unfortunately be, at least for a short time, abused to spam search engines for profit. Trust is typically related to Google and deals with link popularity as well. Most assumptions are that trust is derived from the trust of the site plus (or minus) the trust of sites that link to and from them. The biggest factor here is black hat strategies like link rings having a lot of links to you from sites that aren’t trusted can significantly lower your own trust.

Finally, we talk about link popularity. Besides the negative effects I mentioned before this can actually provide significant and quick returns for SEO. One of the simplest things is to institute social bookmarking/networking icons on your site – digg, del.icio.us, reddit, furl, ma.gnolia, blinklist, etc. These sites, especially del.icio.us, are becoming the new search engines of choice. They are gaining trust because actual humans build the indexes and the tags associated with sites as part of the Web 2.0 movement think of them as social search engines. Many of these sites have high level of trusts so links coming from them, especially if many people bookmark you, are highly valuable. Adding these buttons simplifies the process for your users to help you out and can expose you to new users who might be using those sites to search for tags relevant to you.

Providing high quality content in your niche can also boost SEO because search engines give additional value to links to your site from other sites in the same niche. If you are seen as an authority on that subject, you will naturally gain more trust and move up in the rankings.

Sites that rank high typically do because a search engine can trust them. They have been around for awhile, have lots of links from other sites that are relevant to the terms being searched for, have lots of inbound links total, and have content that is designed to be easily understood by search engine spiders. A good analogy is to think of a search engine like word of mouth advertising. If someone asks you for the best pizza place in town you’re going to recommend places you trust. And if some place you usually recommend changes their recipe or gives you a bad experience, they will lose your trust and not be as highly recommended by you. The same with search engines – if you use black hat or spam techniques, you could hurt your trust for a long time and potentially even be banned. However, if you provide good content and are popular for that niche, then they will recommend you more and more.

Random Tidbit: A neat article on how to make a six figure income while blogging.

accessibility, css, web design, webstandards

Merits of Good Web Design

Good web design is about reaching the widest possible audience. To reach the widest possible audience you must design with two thoughts in mind web standards and accessibility.

Accessible designs allow users to resize text even non-compliant browsers like Internet Explorer 6. They provide alt tags for images, in case someone is using a text browser, and those alt tags are descriptive of the images so that those users can gain value from them. They offer a design in which the user can skip navigation and get right to the content both for ease of use and for someone using a text browser. Many people don’t realize when they’re designing a site that the source code is how text browsers will read their site so if you have the header, navigation ads and all other non-content related items before the content in the source code than people using those browsers will have to navigate through that on each and every page. Offering them an alternative to that is one of the keys to accessibility.

What many people don’t realize is that is also how search engines read their sites. So by making your site more accessible you are making it easier for search engines to decipher what exactly is important on your site increasing your rankings and making it easier for them to understand the keywords that your site should rank for.

Web standard based designs function in much the same manner. Designing with web standards means separating content from appearance. Anything that does not deal directly with the content or present some semantic value to your site should be relocated to the CSS. You place all your non-semantic images backgrounds, bullets, etc, colors, font sizes and faces into the CSS. Then your (X)HTML contains only the relevant markup in semantically correct tags H elements for headers, strong for important text, p for paragraphs, em for text you want emphasized, ul/ol for lists, li for list items, dd/dl for definition lists and items, etc. You can then use additional classes and ids on those elements to style your site and match almost any design you can come up with typically with additional div and span tags used sparingly to help provide additional hooks for your CSS.

Designing with web standards also allows you to optimize your site for search engines since you are now declaring to them what your header elements are including hierarchy, what the title of each individual page should be using the title tag, one of the highest ranking SEO tags; and laying out the content with semantic tags so it is able to electronically “read” your content and make keyword associations like the human eyes does naturally.

So by practicing good design you are not only naturally increasing your audience by allowing the largest number of users to view your site but also helping to improve your rankings in search engines for terms relevant to your content. In addition, by separating content from appearance you can easily update the look of your site by changing the CSS and potentially adding a few more hooks cutting redesign time drastically.

In conclusion, good design means using accessible designs and standards compliant code. This brings you the largest possible audience, the lowest possible redesign time for future updates, lower bandwidth (because CSS is cached), and search engine optimized code.

Random Tidbit: The Google maps flight sim is pretty cool.  Though I wish they had more cities.

life, web design

Great Geek Job

I had seen a recent article about 8 things intelligent people, geeks and nerds need to work and I began to realize that my job has nearly all of them.  They’re pretty flexible as long as you get your work done, they have good benefits, most of us share our iTunes (legally on the local network) so we can jam while we work – though some of my co-worker’s collections are questionable, they let us work from home when we need to – the big winter storms we had for example, and they dress code is pretty lax.  Plus it’s a small company, so you pretty much know everyone else and I can’t name one person that I don’t like.

So if you’re a developer looking for a great company, feel free to come on over.  We could use the help and we’re definitely going places.  You won’t be sorry you did.

Random Tidbit:  I found an interesting article about how Microsoft is dead after fighting with a Vista box that wouldn’t behave (or maybe it was and the behavior it’s supposed to have is illogical, who know’s right now.)  This article takes a different slant than others in that they still make a lot of money, but they’re no longer the big scary monster they used to be – Google is – and the only way to get back up there is to acquire a lot of the top quality startups.  Pretty interesting.