Why I’m excited about web design all over again
When I first got really into web design and development in the mid-2000’s - it was largely because of learning about web standards, CSS and Flash/Actionscript.
Things got a bit stagnant in the front-end technology department for a few years and there really wasn’t much new - it was all about refining one’s understanding of the principles of website development.
However in the last year or so, I’ve felt a revitalization of the interest and passion in front-end development I first felt years ago. Largely because of the following:
Hosted Fonts
Remember the days when you only had Arial, Times, Georgia or Verdana to choose from? There was a time when if you wanted to choose any font you wanted, you had to resort to Flash.
Today, virtually any font can be used on the web, and without tricks like Cufon or sIFR. The best way to use fonts on the web now are to either use a font provider, like Google Fonts (free) or Typekit (paid). We have a Typekit account and use it for many clients, but also use Google Fonts when we need unlimited bandwidth, or there just happens to be an appropriate font in their list I want to use.
Another option is using the @font-face property in CSS that allows you to host fonts on your server and embed them in your CSS.
Whatever method is chosen, it’s incredibly liberating to not be limited to a small handful of old fonts that have been used on every website for the last 15 years.
Web design, once the ugly sibling of print design, now rivals and in some ways surpasses print design in it’s flexibility, interactivity and near limitless creative potential.
HTML5
The web community has been swooning over HTML5 for over a year now. Even completely non-technical people seem to be excited about the possibilities with HTML5, although few of them really know why.
The truth is, much of the awesomeness of HTML5 is not supported by the majority of modern browsers at the time of this writing. But the future possibilities are very cool. Some of which are being able play video and audio - another nail in the coffin for Flash; being able to do things with web forms like have calendar drop downs and slider widgets without the use of Javascript; And some great features for mobile devices.
Right now at Headspace, we’ve begun gradually integrating HTML5 into our sites - although most users and clients would never know the difference. Just having a simpler doctype definition, and using some of the new semantic elements like
< article > < section > < header >
- not exciting stuff for the majority of people, but it’s a start as the browsers are still working to meet the specification for HTML5.
CSS3
This is something that the non-techies and clients aren’t talking about, but they should. The awesomeness of CSS3 is exciting because the results of which are visible on the screen, and the time it saves developers can reduce costs for companies.
Here’s an example: In the past if you wanted rounded corners on a white content box, you would have to cut 4 images of each of the corners and then write a lot of bloated markup (HTML) to contain the images within CSS. Now with CSS3, it’s one simple rule in your style sheets:
border-radius: 15px;
No images needed. Some of the other great things you can do in CSS3 are drop shadows, rotating, gradients, scaling, transparency and even animation. All of this is done without using a single image. CSS can now do things that were only possible within Photoshop.
The best part is, all the modern major browsers, (Except IE 7 and 8) support most of the cool features. Because it’s not universally supported in every way, CSS3 is now mainly used to enhance website design. That way users on modern browsers can have an enhanced experience whereas users on more limited, older browser still get the same site, but miss out on some visual “pizzazz” - though they would never really know the difference.
For example, a user on Firefox might see drop shadows and rounded corners, but a user on Internet Explorer would just see a plain white box. Not a big deal. A user on Safari might see an animated colour transition when they mouse over a link, but a user on Firefox might just see it go from one colour to another with no in between animation.
This is the approach and method we’re taking at Headspace, and it is the approach of most of the current web community until all the old browsers die and modern browser universally support all of CSS3.
Death of IE6
Speaking of old browser dying, this is very exciting. Internet Explorer 6, though once considered an innovative browser when it came out 10 years ago, quickly became the bane of every web developers’ existence with it’s buggy, inconsistent rendering engine and lack of support for nearly everything considered standard. It always required re-doing a lot of work and constant testing and tweaking along with hair-pulling.
The frustrating thing was that for a long time, IE6 had the majority of the market, so it couldn’t be ignored. But Internet Explorer has been steadily losing command of the market. Just look at these stats.
In 2006 Internet Explorer had 60% of the market. As of May 2011, IE as a whole only has 24.9% and of that 24 percent, IE6 only has 2.4%—a very small percentage which is mostly made up of old government office computers that haven’t changed operating system’s in 10 years for “security” reasons.
Last year Google announced that it wouldn’t support IE6 anymore, and that for us at Headspace was the final death blow.
Sadly, Internet Explorer 7 has become the new 6 - as web standards keep progressing, IE7 is looking more and more out of date. The great thing is that Microsoft has been improving IE with every version, so 9 is looking very promising and should replace the older versions much faster than the rate of adoption before.
JQuery
Okay, admittedly JQuery is not new - it’s been around since 2006. But it’s vast amount of plugins and support and near universal adoption by many of the worlds biggest websites makes it that much more accessible to developers. For the non-technical: jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
With JQuery, you can make your site behave like the once revered Flash websites of old, but all within a standards-based website that still works on mobile phones. Using AJAX (which is Javascript) you can make page requests without the browser refreshing the page. A good example of how powerful this can be is Google Maps. When you zoom and pan the map, Google is making requests to a server on the fly, without your whole page refreshing.
While I am trying to learn JQuery more, Ricky Ferris has become quite the ninja with it, and having in-house expertise with it is a great tool to add to our arsenal. It’s also fun for me to design cool interactions knowing what can be accomplished with JQuery and knowing Ricky will find a way to pull it off.
Mobile and Responsive Design
There’s no question that mobile is the way things are going, and in fact, have already gone. But it’s been the elephant in the room for a lot of web designers who have just gotten browsers tamed and are anxious about having yet another swarm of hardware to design and test on - especially one that scales your designs down to fit in the palm of the users’ hands.
We at Headspace have really begun to embrace mobile but have only scratched the surface. Last year we’ve begun adding iPhone development to our skill-set, thanks to Nick Ross’ foray into the world of Objective C, Cocoa and the Apple development environment. We now have a couple of apps under our belt, and I’ve personally found that designing iPhone apps is much more challenging than you would think. While there’s a lot of standard interface elements like buttons, forms, lists, scrollers etc. - the exact best way to implement them for a given app idea is not always clear and it takes a lot of thought and planning to get it right.
We’ve had a few companies request apps that work on all mobile hardware, not just Apple. So recently I’ve been looking into the Sencha framework for assisting with developing HTML5 apps. Sencha helps with letting us develop advanced apps that look and feel like native apps, but are compatible with Android and Blackberry.
Responsive Design is one of the most intriguing things about web design today. The term comes from buildings that are made “responsive”. They adjust heat and lighting automatically to the amount of people that are in the building or rooms at any given time.
Similarly, responsive websites adjust themselves automatically to the users screen size. Look at this site for many examples of well designed responsive sites.
Notice how if the user is on a widescreen monitor, the site might have 4 columns and a huge image, whereas if the same site is viewed on a tablet, like iPad, it instantly adjusts to 2 columns and scales down the image. And if the same site is viewed on a smart phone, is scales to one column and stacks the content vertically.
This approach to design is fun and challenging, and once again, Ricky has demonstrated a knack for coding sites in this way. For me, Responsive Design is the single most exciting thing about web design today, and something we are beginning to build into every project.