Six years is a long time to wait. But after all that time we are finally on the verge of a major change in how the web works. Later this year, if all goes to plan and the published schedule holds, HTML5 will finally be recommended by the W3C and be supported in most major/modern browsers (sorry IE8, you don’t count). This 5th revision of the core language of the World Wide Web introduces new features based on researched and prevailing standards and practices. Special attention has been given to making HTML5 have clear conformance criteria, laying out clear guidelines for modern and future browsers to follow.

The aim of HTML5 is to streamline markup and to add new functions that will reduce development costs by making precise rules on how to handle HTML elements. Some of the most exciting features will include:

 

  <article>

Defines external content. It could be an external news article, blog, forum post or any other content coming from a third party.

 

  <audio>

Supports music and streaming audio. Also supports attributes such as autoplay which will play the audio once it is ready in the browser;  controls will display standard pause, stop and play functionality; and preload that loads audio on page load rather than after it.

 

  <canvas>

Already supported in Firefox, Chrome and Opera, the <canvas> tag is used to display and draw graphics. Inside the tags, variables, dimensions, and animations can be defined.

 

  <header> <nav> <footer>

Simplifying the usual coding for HTML seems simple enough, but these additions go a long way to standardizing how coding is done across the board. These elements can also be used multiple times in the markup without ID duplication errors, making designing subsections with their own <header> and <nav> elements much simpler.

 

  <video>

Similar to the <audio> tag, the <video> tag comes with a library of attributes that handle embedding video onto a page a snap. Instead of using a third-party tool, like Adobe Flash, to present videos, HTML5 puts the functionality right into the browser. You can specify multiple video files, and browsers that support HTML5 video will choose one based on what video formats they support. This solution uses no JavaScript whatsoever, and it works in virtually every browser, including mobile browsers.

 

What is nice about HTML5 is that the team that has been working for the better part of a decade to create it had the AMAZING initiative to make it backwards compatible. Unlike the XHTML2 that the W3C was working on before jumping on the HTML5 bandwagon, this new markup language won’t break older markup.

Now, if you look around the internet and search for “HTML5 release date” you’ll see a lot of articles saying that it won’t be fully supported until the year 2022. While this date seems a bit far-fetched it is important to note that HTML5 is being rolled out incrementally and will continue to be developed in the years to come. Look at it like the continued development of Jquery or Ajax scripts. They continue to rollout new versions that support more elements and variables, but degrade well for older versions that people may be using. HTML5 is by no means a complete project, but modern browsers are already supporting many elements and there is a time in the not so distant future when HTML5 will be much more the standard then the exception. 

 

 

Web designers are always looking for a simple ways to speed up design processes and improve their code in general, and one of the best ways to start is with a solid HTML/CSS framework. When designing a website from scratch there is a lot of extra time needed for creating the html markup and semantic styling. Fortunately for us designers, there is a plethora of great frameworks already out there that are based upon a well developed understanding of web design and web standards. Here are three of the best found on the web:

EASY

This framework, developed by user interface expert and self proclaimed “front-end ninja” Alen Grakalic, is an amazingly diverse framework that not only sets a solid foundation for HTML markup and CSS, but also for javascript. It includes built-in (jQuery powered) interactive functions that are so easy to use that you really don't have to know first thing about JavaScript. It also includes a library of preformatted and precoded CSS/HTML content blocks that you can simply paste into your master template. You don’t have to worry about browser rendering issues for certain elements in your code; Easy takes care of it for you.
The website has a lot of documentation and demos as well to help in cases where you need to go beyond the default settings. You can check it out here: http://easyframework.com.

960 Grid System

960px wide design has become more and more common in modern web design as web users have switched over to wide screen displays. What 960 Grid System does is give the designer an editable CSS and HTML framework that is contained within this web standard dimension. On the site, www.960.gs, there is a custom CSS generator as well as a HTML layout generator. Designers can walk through their designs on a wireframe basis, adding elements and containers, and then have 960 generate their custom HTML that can be placed into the master template for the site. The same goes for the custom CSS generator. Once dimensions and number of columns are chosen, 960 generates the CSS using easy to use semantic markup that is cross browser friendly. And if the design changes and element dimensions are altered, a few changes to the CSS are all that is needed.

 

Blueprint

One of the most widely used frameworks since Web 1.0, Blueprint fulfills all of the same CSS and HTML standards that the previous frameworks have but also includes a reset and print style sheets that are extremely helpful. All web designers know that a solid reset.css file can make all the difference when trying to get good cross browser styling. Older browsers that aren’t built upon new web standards need to have this “reset” so that they act appropriately when designers start adding their own styles. Blueprint also adds a print.css file that is often overlooked by many designers. Without it, printing a page from a website will pull all the “screen” styles from the browser and waste a lot of space and ink, which can be pretty annoying. The print style sheet removes all the background images and colors, resets widths and heights to ensure quality margins on the printed page, and has a solid cross browser performance (Yes, different browsers don’t just display website differently, they print them differently as well… go figure.)

You can find Blueprint here: http://www.blueprintcss.org.

These are only three of the vast amount of frameworks that are out there, but they are the ones that I’ve personally used on projects and have found extremely useful. Other frameworks include:

• YUI Grids
• YAML
• CSS Boilerplate
• Tripoli
• Molio

If you’re not sure which framework to use, I would suggest just trying them out. Each has a lot of good qualities and will get you farther, faster than if you didn’t use them. Play around and find a framework that you like the best. Once that is done, you’ll find that your design times can be cut in half and the quality of your work will vastly improve. 

Since 2004, when the phrase was first coined, Web 2.0 has been the buzz word of the entire internet community. We’ve heard how it will make the internet better, faster and more collaborative than we ever thought possible. But what is Web 2.0 exactly? If you ask 10 different online professionals you’ll probably get 10 different answers. The reason why is that Web 2.0 is still a developing idea--a mixture of many ideas and interactions for where the internet is moving. In this blog, I want to give an overview of this transition process and look at the progress of Web 2.0 over the past few years.

To understand where the web is going, we first need to understand where the web has been. Back in the late 1990’s and early 2000’s, the web was mainly used as an information gathering tool. This web, Web 1.0, was accessed through dial-up modems with 50k bandwidths. Websites were static advertisements for themselves, rarely updating their content and functioning very similar to the billboards we drive by every day. Essentially the traditional approach to print marketing and advertising was applied to the web in a “top-down” approach.

 
Users were going to websites to consume content rather than being an active participant in creating it. What user controlled sites there were manifested as “personal” sites, where <blink> and <marquee> tags were the norm (Remember Angelfire? Geocities? Don’t deny having one. We know you’re lying). This was the “Old Web” and nearly every site created during this time period was entrenched in it.

Web 1.0 was about:

• reading
• corporate sites
• dialup
• top-down
• home pages
• structure and labels
• being edited and produced
• banner ads

With the advent of Web 2.0, the web was completely flipped upside down. The transition began as a result of technological improvements in connection speeds (broadband) and web browsers. It was further pushed on by the wider use of Flash applications and the invention of Ajax. Within the past few years, applications like Facebook, Twitter and YouTube have revolutionized how people experience the web. Websites are no longer static for months at a time but constantly shifting based on what users want. (Sites like Digg.com create their content completely based on user input and what is important to them.) Personal sites have been replaced by Facebook profiles and Twitter accounts that allow users to connect with people from around the world in real time. Instead of the top-down approach of the old web, content today grows organically from everyday users, posting on message boards and blogging from home. Users like you and I have become the chief content writers on the web. Web 2.0 has moved the internet from only an information-gathering tool to an interactive community experience that we control.

 

This movement is not done yet. As I wrote earlier, Web 2.0 is still a developing idea. While many large corporations have taken hold and used the new web to their advantage, we are just now seeing the mid-sized and smaller companies take steps to bridge the gap. And as new technologies continue to develop the web experience and integrate it even further into our daily lives, there will be a growing demand from these smaller businesses to get in the 2.0 game. 

Web 2.0 is about:

• collaborative writing
• blogs
• sharing ideas and content
  
• web applications
• broadband
• communities
• bottom-up

 

 

A few months back I was privileged enough to attend “An Event Apart- Chicago”, a two-day conference centered around learning new and upcoming techniques to, in short, make websites function and work better. Speakers ranged from content strategists and CSS3 styling gurus to hard-nosed database developers and CMS programmers. These are the guys that literally wrote the books on how I design for the web (not ironically I have 4 of those books sitting next to me as I write this).

One of the speakers at the conference that weekend was Eric Meyer, a leader in web design and CSS, who used his time to talk about how “Javascript will Save Us All”. His point was two-fold:

1. First off, we designers can stop waiting around for browser makers to give us what we want. We can use javascript and start using the advanced CSS we’ve been hearing about for years.
2. Secondly, we can accelerate the process of weeding out elements that don’t work or aren’t applicable in real world situations.

The brilliance of this idea is obvious. For designers, javascript WILL save us. Adding a couple of scripts to our code can dramatically improve how we go about our day to day work.  What is less obvious, however, is how javascript will save the internet in general and help improve the thin

gs that are important to our clients; i.e.  search engine optimization, user interface design and mobile web applications just to name a few.

What’s amazing to many people is that these technologies are already being widely used, they just never realized it. Javascript, itself, dates back to the mid-1990’s, and has been an integral part of websites since. It has gone through multiple enhancements and revisions throughout the years (JScript, Ajax, etc.), but it has only been in the last few years that it has become more mainstream and widely used by front-end designers.

Wait a minute, that isn’t flash?

Only a few years ago, Flash websites were all the rage. Since browsers couldn’t support the design and function that we wanted, we turned to out-of-the-box programs like Macromedia/Adobe Flash that enabled us to get the dynamic interaction we were looking for. The problem was that unless you went to extreme measures and took a lot of extra time; most of the flash we were creating was dead space to search engines, leaving our clients with a slick looking site that no one could find. 

Enter jQuery and Mootools. Both are javascript libraries that are designed to make it easier to navigate a document, select DOM elements, create animations, handle events, and develop Ajax applications. jQuery is the most widely used, with about 20% of the top 10,000 websites in the world using the library in some form. The best part about these tools is that they are extremely light-weight and easy to customize. Data can be retrieved from the server without having to reload the page, which decreases lag and helps boost site performance. Advanced styling and animations are contained in a few lines of code and can be changed quickly without the hassle of reworking an entire flash file. Using javascript, content isn’t hidden from search engine crawlers, giving a huge boost in site searchability. The content is also accessible to web users with visual impairments who use screen-readers, where before they were left out.  And just in case you’re worried about these libraries working in older browsers? Don’t be. They even work in Internet Exployer 6+. 

As an added bonus to clients, using these javascript libraries allows them to easily interact with Content Management Systems (CMS). A client with little to no experience in the web can now enter in their content through their CMS tool, save it, and javascript takes care of the rest. Dynamic features are handled inside the browser itself, and clients don’t have to get their hands dirty with writing markup, letting them focus on the most important part of their site: the content. 

The mobile revolution is at hand…

As long as javascript has been around for the web, to mobile-web devices it is still a relatively new feature. New libraries are being developed, many within the past year, that enable designers to incorporate javascript based, mobile applications into our sites. However, these tools are still in their infancies. Many new devices coming out have javascript support, but code has to be specially customized to work inside mobile technology and significantly slow performance when enabled. 

But help is on the way. Mobile development communities are springing up everywhere. The “Web App” craziness surrounding the iPhone has pushed the development of the mobile-web farther in just the past year than it did the nine years before, and javascript has had an integral role in moving the ball forward. Within the next few months and years, at the current rate of improvement, mobile devices will support full javascript functionality without the hit and miss we’ve become accustomed to.

The leaps and bounds that javascript has come since its inception has been amazing. It is an important tool for every web designer. In recent years it has become lighter, easier to use, and more dynamic than anyone would have dreamed of only 15 years ago. As we move forward, and as more and more technology looks to tap into this powerful resource, javascript will continue to revolutionize the web design and development business; making websites faster and more accessible for our entire web community.

I was recently sitting down with a pro bono client who is preparing to run for public office in the state senate. We discussed some design pieces he would like created, a general theme to his upcoming campaign, and what he’d like to see as an end-product. I sketched out a few ideas and even had some time to show some designs I had worked up. As I showed him my ideas for what one of his yard signs would look like he said to me:

 As a designer, this isn’t new. In almost every project there is always a difference in how you see a design unfolding and how your client sees it. What really struck me in this case was a reminder that design has to work for more than just me personally. The design has to have the “legs” that can support other interpretations and viewpoints.

Upon further reflection, I think it is easy for us designers to become too comfortable with our work. We wall ourselves behind a certain style of design, building layers of safe guidelines that we feel work and then rarely venture beyond those barriers. I, for example, have come to feel as though I know what good design looks like. I have a style of my own; a sense of layout and spacing that works me and I seldom stray away from it. I stick to what I know and, sometimes then end up having to “sell” a design to clients that don’t get what they expected.

Now I’m not saying that as designers we have to bend to every expectation a client throws on us and I’m definitely not saying to design things you’re not proud of. In the end, our clients are expecting us to be the experts. That’s why they’ve come to us in the first place. I can’t count how many times I’ve heard a client say,

What I’ve failed to realize sometimes is what a great responsibility that is. I may have designed a layout that is attractive to both the client and me, but the design I’ve sold them on might not be the best way to get there. We sometimes forget that our main purpose as designers is to serve the client’s needs, not our own artistic needs. The walls that we have built up to keep our designs “safe” have restricted our ability to design for each client individually.

These walls also keep us from seeing other points of view when it comes to our creations. Many times, a suggestion or critique on our work will be met with a curt,

There is a certain amount of pride we have in our design decisions, and, if you’re like me at all, we don’t like to hear that we’ve done it wrong. I like what I’ve designed. It is easier to keep what I’ve designed. I’m the designer after all.  What do you know about it?

This type of arrogance is easy to fall into and is something that many designers, myself included, have to wrestle with. The walls that we’ve built not only keep our designs “safe” but also keep out worthwhile suggestions and perspectives. In essence, it is easier to defend what we have designed than realize that our interpretation might have been wrong in the first place.

So what is my point? Let me summarize: 

1. The rules and guidelines that we believe are creating good design can sometimes lead to us building layouts and web systems that don’t serve the client’s interest in the best possible way.
2. Remember that the client trusts us with their identity on the web. Our expertise is what they are counting on. Creating a layout that pleases you should go hand in hand with creating a design that works for the broadest number of your target audience.
3. As designers, we cannot, should not and must not design on an island. A good designer should always be able to review his or her work with a grain of salt and understand that no design is perfect. Critiques are essentially good, no matter who is lending their advice.