Content

There is front-end and there is real front-end

It sounds the same but there is a world of difference. The 'real' defines the line between the work of simply transforming a layout to (X)HTML and actually relate visual elements to semantic structured logic with the use of web standards

If any of the below-mentioned bullets match your profile, it seems you lack an understanding and interest in what you’re doing – you might even want to consider if front-end developing really is your mission in life.

  • Headings for headlines? I just through in a ‘span’ and style it!
  • I have no clue about the difference between a ‘block’ and an ‘inline’ element and it’s never been a problem
  • Contextual menus are cool when editing CSS, so Dreamveawer (or whatever application providing me options related to each element) is my best friend
  • Structure reflecting the visual purpose? – Hey, I’m just the HTML-dude!
  • My first priority is to transform a design pixel-perfect – I don’t have to think usability
  • I always optimize for Internet Explorer
  • If it validates, it’s perfectly usable and accessible

The good thing is, real front-end and working with web standards is far from rocket science – actually getting familiar with available HTML elements and corresponding CSS properties makes development more efficient and a lot more fulfilling on a personal level. Apart from personal satisfaction you’ll end up with an easier-to-maintain solution that provides actual value to your client and more importantly users and visitors.

Even though there will never be just one solution to a web project, there are definitely ways to go wrong. Usually the use of web standards will result in less inconsistency and bugs across browsers and platforms – even your CSS will benefit in size and become more manageable, as you are able to rely on default properties to a larger extent.

Why it matters

To ignore the concept of real front-end and working with web standards is simply saying you rather do it the wrong way, thereby to a degree ignoring all of the below-mentioned benefits, which again to a certain extend equals to the phrase I always optimize for Internet Explorer.

Unfortunately the We optimize for Internet Explorer 5.x and 6.0 sentence is much too often part of contracts or solution specs, which to me translates into We strive to bypass known standards by optimizing to non-standard based browsers. Being the number one browser in the market you can’t ignore it when composing commercial websites, meaning your layout has to render correctly – but that’s not at all the same.

What are the benefits

There is no reason whatsoever not to do real front-end. None. Working with web standards in just a few web projects will result in a reusable initial setup – over time you’ll discover that close to all commercial websites are based on that very same initial structure with some slight variations.

Benefits are endless and include:

  • Improved performance (Less markup will result in smaller documents leading to faster loading and typically your CSS will be chached)
  • Improved index and ranking in search engines, such as Google
  • Maintainable code that you can actually share with a team, dig up and understand at a later point
  • Accessible to everyone and not just what you think is the target audience. Remember, Google is just another blind visitor!
  • Design updates/brush-ups in a flash, as all layout is (or should be) globally defined in CSS
  • Standing ovations from clients and ecstatic response from excited users

So where do I start?

You start by investing in CSS Mastery by Andy Budd and if you are unfamiliar with Jeffrey Zeldman I recommend you get yourself a copy of Designing with Web Standards.



Comments

1. October 17th, 2007 (12:24), by Jacob Hage

Sooo true! …and yet sooo sad that many major backend platforms still influence the frontend sourcecode in a very negative way – why oh why!?

What’s your opinion?

Enter your details and comment below

Comment on “There is front-end and there is real front-end”






Some HTML including "<a>, <abbr>, <acronym>, <blockquote>, <code>, <em>, <strike> and <strong>" is allowed - anything else will be wiped. But hey, Markdown is enabled so why don't you go syntax beserk...


Latest postings

View all postings
The Copenhagen Metro. Take 2
Today is a day to remember for commuters, turists and the like around Copenhagen as well as frontend savvies around
Shiny new Royal Copenhagen
More than 230 years in business, now with a brand new digital identity and online strategy
There is front-end and there is real front-end
It sounds the same but there is a world of difference. The ‘real’ defines the line between the work of
You see my horze?
The undefined line between inspiration and design plagiarism
Usability at it’s worst
This weird beast of an application is a usability nightmare, but a perfect example of how to not do it.

Inspiration pool

View entire set on Flickr

Bookmarks (del.icio.us)

View all bookmarks

Personal

Profile

What's with the vest? More about this site and author and feel free to get in contact.

On weekdays I spend time with talented folks at Copenhagen based web agency Creuna. Do check out our company blog.

I throw my images at Flickr and keep the videos at Vimeo.