In order to stay relevant, designers, developers, and clients need to start thinking about the Web in a whole new way.

There are three specific catchphrases that are going to help usher in this new era: HTML5, Progressive Enhancement, and Responsive Design. These are the foundations upon which Web design and Web applications will build their future. Bold statement? Sure is. Keep reading—I’m full of them. And on that note, feel free to contradict me; I’m willing to learn.

So Let’s Get Started with HTML 5—or HTML5….Huh?

Most of the time when you hear “HTML 5” it is being used as an umbrella term, which includes HTML5, CSS3, JavaScript, and a handful of other powerful Web technologies.

HTML5 (the specification) is about making things simpler through standardization, though the attention it has received may make it seem daunting or confusing to some. Fear not. HTML5 has set out to take what we’ve learned over the past decade and implement it in a standard semantic fashion. In other words, the goal is to take commonly used APIs (application programming interfaces) and structural elements and bring them in line across all browsers.

For instance, take form validation—sliders and calendar pickers. It used to be that you would use one of many JavaScript solutions to implement these actions and then hack a bit to make sure users of various browsers would have a consistent experience. HTML5 has taken that out of the markup level and added it to the browser level. This is extremely important for several reasons: It allows mobile devices to initiate the correct keyboard for the specified fields, and it frees developers from the constraints of simple validation issues, allowing them to focus on concerns specific to their sites and content. Ultimately, it benefits the users because we are able to dedicate more time to creating great apps and experiences instead of being bogged down with browser compatibility.

Controversy….No, It’s Not about Flash This Time

Just recently an official of the World Wide Web Consortium (W3C) said that developers should hold off from developing HTML5, explaining that it was a bit too early to let it loose on the general public because the spec is in various stages of approval. W3C might have missed the memo, but Apple’s CEO Steve Jobs, Google’s CEO Eric Schmidt, and other industry heavyweights at RIM, Microsoft, and HP all acknowledge this as the direction the industry is headed. In other words, it’s coming whether W3C is ready or not.

It’s just like the advent of CSS2/CSS3. Developers, Web designers, and browser vendors did not wait for W3C approval; they cherry-picked parts of the spec that were already agreed upon and implemented them. The benefits that HTML5 provides have been well documented, so I’ll offer just a few of the most essential links. (I promise to cover this in depth in a future post.)

Check out these amazing links on HTML5

http://www.apple.com/html5/

http://www.html5rocks.com/

http://www.beautyoftheweb.com/?fbid=9Ive9fIKCfJ#/experience

http://www.alistapart.com/articles/semanticsinhtml5/

Progressive Enhancement and Responsive Design…It’s Time to Get Your Learning On

This is where we have to change our perspective. As designers we can no longer depend on the pretty snapshots we create in Photoshop and Fireworks alone. We need to start thinking about the necessary dynamics that enable a site to be shrunken to the size of a handheld or magnified to fill the real estate of a 60″ TV. (It’s coming sooner than you think.) That means that in the future, a lot of our designing will be implemented in the browser itself. So dust off those books, Web designers, we are going to have to start coding again!

As developers we need to get down to the level of thinking of the user. “Is that jQuery slider necessary for the person with a handheld?” “Does the device support location functionality?” If developers can start building at this level, then users are going to be in for a real treat! And providing the best possible user experience is the whole premise of Responsive Design.

Make Your Site Respond to the Context in Which It Is Being Viewed

Have you ever gone to a site on your mobile device and just said “Forget it!” because it was illegible or downright unresponsive? The old Web wasn’t built for the type of user environment we live in today. Sure, we’ve made do with various scripts and hacks, but why continue down that road when what we want is to make everything work as well as the native apps on our devices? This new generation of design is successful because it gives us such a seamless and rich experience. I can go into an app and it will already know where I am. All I have to do is say “I want sushi” and BAM! Twenty places in the surrounding area are viewable, at my fingertips, with directions! Exciting, I know!

Currently, some of the best examples of this type of design can be found in the new Twitter, Gmail, Yahoo Mail, MobileMe, and of course Facebook on almost any platform. This is what HTML5 provides us with: a platform to develop apps and sites free of browser inconsistencies and restrictions.

FREEDOM!

A lot of this is possible due to CSS3 & jQuery. But one extremely popular browser still doesn’t support all these new tricks and doodads. Internet Explorer

I promise it’s okay…that’s precisely where Progressive Enhancement comes in. Like Responsive Design, it’s all about adaptability. The forward-thinking browsers that support these advanced features will have some nice bells and whistles that enhance the users’ experience; those that don’t will still get the content, but the experience will not be so rich. This is okay because with the variety of devices coming to our sites these days, a site doesn’t have to look the same across all browsers (and it shouldn’t). Which brings me to the conclusion of this brief glimpse into the future.

Content and Context

In the future we won’t be able just to request info and slap it in the code editor. We will need to strategize, plan, and design our markups in a whole new way. With HTML5, Microformats, and WAI-ARIA we are now able to make beautifully semantic, accessible websites that have no need for plug-ins and high-speed Internet connections. With Responsive Design we can create experiences based on the users’ contexts, whether they’re on the go or sitting on the couch. Progressive Enhancement will allow sites to provide rich experiences and designs that degrade gracefully in older browsers.

There’s a lot to be said about each one of these subjects, and in future posts I will cover each one in detail as I experiment and navigate my way through the future of Web design.

I recently gave a lecture to the advanced web design class at Farmingdale College. When I met up with professor Jack Harris, he informed me that the kids, mostly juniors and seniors,  saw Loewy Design’s page in the Flash/Dreamweaver Genius Guide, and they were looking forward to meeting with me. A bit embarrassed and very flattered, I asked Jack what book was he talking about and where could I get one.

I later found out that the book is published by Imagine Publishing and promises to be the essential guide to dynamic design and development. We were recognized for our website’s approach to animation and design using purely CSS and Javascript, a technological accomplishment but not exactly what I wanted to talk about in my little seminar. My talk was about the real world lessons that you can’t get from a textbook. I wanted to focus on the process of solving business and branding problems with the online medium.

I tried to push their tech questions aside but they kept coming. I eventually got my point across that the technology we’re using today will be completely different when the students immerse themselves in the job market. They’ll need to educate themselves on the latest versions of Flash and Dreamweaver and keep up with always evolving programming languages throughout their careers.

The most valuable information I could share with them was to describe our thought processes, not only about making a website look great but about creating one that will actually help your clients solve their business challenges. I gave them our secret sauce on how we deliver positive results to our clients and improve their bottom lines.  As a take-away, I provided them, and now you, with a list of reference tools organized by each phase of our process.

By no means is this the complete list, since it too is always evolving, but it could serve as a nice resource and good starting point for students, clients and peers.

There’s been a lot of buzz about HTML 5 lately. I’ve seen a wave of articles talking about the new version of HTML in the RSS feeds I follow. Work on HTML 5, which commenced in 2004, is far from complete, but we’re starting to see some new and exciting features being released in the current draft.

So what’s new? For front-end developers, there are a few improvements in version 5 that aim to make life easier and cut down on development time.

So What’s Different?

Well, a lot, but one of the most significant changes from HTML 4 is that HTML 5 is not based on SGML. It has, however, been designed to be backward-compatible with common parsing of older versions of HTML.

In the SGML rulebook, element names are not case sensitive, you can have elements with optional closing tags (like the paragraph tag), and you can have attribute values without quotation marks. XHTML 1.0 and 1.1 are based on a rulebook called XML. In the XML rulebook, element and attribute names are case sensitive, every opening tag must have a closing tag, and attribute values must be quoted.

HTML 5 defines a markup language that isn’t based on either rulebook, but that can be written in either “HTML form” (or serialization, as the specs call it) or “XHTML form.” This gives page authors more flexibility.

Page Structure

HTML 5 brings a whole set of new elements that make it much easier to structure pages. Now, we have tags like:

<header>
<nav>
<article>
<section>
<footer>

HTML 4 lacks the necessary semantics for describing these parts of the page specifically. The new tags should replace the all-too-common “use div” elements, giving each a descriptive ID or class.

Typical markup for an HTML 5 document could look something like this:

<body>
<header>...</header>
	<nav>...</nav>
	<article>
		<section>...</section>
	</article>
		<aside>...</aside>
<footer>...</footer>
</body>

Embedded Media

The popularity of audio and video on the Web is undeniable. Sites such as YouTube, MySpace, and Facebook make it easier than ever for anyone to publish rich content to the Web. HTML 4 lacks the means to embed and control multimedia successfully; many sites rely on Flash to perform those tasks.

HTML 5 promises two tags to aid in the embedding process:

<audio>
<video>

There are many additional attributes available for each of these tags, should the author of a Web page require more-detailed control over its content. But for purposes of demonstration, this would be a typical use:

<video src="video.ogv" controls poster="poster.jpg"
width="320" height="240">
    <a href="video.ogv">Download movie</a>
</video>

<audio src="sample_audio.mp3" controls>
    <a href="sample_audio.mp3">Download song</a>
</audio>

The optional “poster” attribute can be used to specify an image that will be displayed in place of the video before the video has begun playing. The “controls” attribute is a true-or-false attribute that indicates whether the author wants the built-in controls turned on or off by default.

Regular expressions

HTML 5 extends the input element by offering new attributes that allow you to specify what data you will allow as input. These attributes include min and max (to set a numeric range), and HTML 5 also offers new values for the type attribute, such as url, email, date, and time.

Enter a US or Canadian Postal Code:</p>
<input type="text" name="postCode"
required="required"
pattern="([0-9]{5}(-[0-9]{4})?)|([0-9][A-Z][0-9]\s+[A-Z][0-9][A-Z])"
title="US: 99999-1234; Canadian: 0A1&amp;#160;B2C" />

The value of the pattern attribute is a regular expression, as defined in ECMAScript and used in JavaScript.

Canvas

The new Canvas element consists of a drawable region defined in HTML code with “height” and “width” attributes. JavaScript code may access the area through a full set of drawing functions similar to other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of Canvas include building graphs, animation, games, and image composition.

your browser does not support the canvas tag

See the yellow square? That’s being drawn by JavaScript into the Canvas tag. Currently only FireFox, Chrome, and Opera support the canvas tag.

This is an early example of the improvements the Web-development community can look forward to with the release of HTML 5. Of course, not all browsers will be swift to support the new specifications, so don’t throw out that HTML bible just yet!

Do you have any other HTML 5 tips and features you find exciting? We’d love to hear about them!

Everyone–designer and developer alike–has a set of tools to rely on that make the day go smoothly. We all have tricks that help us be more productive and more efficient–and take less Tylenol!

Here’s my list of tools that I use on a daily basis:

CSS/HTML/JavaScript Helpers:
Firebug (FireFox Add-on)
This is probably my top choice for front-end development. You can see/edit/remove CSS styles and HTML markup on the fly with this great resource. It also has many built-in features that allow you to debug JavaScript code right from the browser.

Web Developer Toolbar (FireFox Add-on)
This tool is similar to Firebug in the functions it offers. I find the combination of the two to be useful; I choose between them depending on the situation. The Web Developer Toolbar’s auto population of form fields saves lots of time, and the inline ruler is quite handy when comparing designs to markup.

Dust-me Selectors (FireFox Add-on)
This is a helpful tool to keep stylesheets as lean as possible. It extracts all the selectors from all the stylesheets on the page you’re viewing, then analyzes that page to see which of those selectors are not used. It then stores the data, so when you test subsequent pages, selectors can be crossed off the list as they’re encountered.

HttpFox (FireFox Add-on)
HttpFox monitors and analyzes all incoming and outgoing HTTP traffic between the browser and the web servers. This resource is useful if you need to know what files are being requested from a web server and you can’t get that information directly by viewing the source code.

CleanCSS
CleanCSS is a powerful CSS optimizer and formatter. It takes your CSS code and makes it cleaner and more concise.

Tabifier
If you work with messy coders or inherit old code that hasn’t been kept neat, this tool will save you lots of time and eyestrain by correctly indenting the code and making it easier to read.

Browser Testing:
XenoCode Browser Sandbox
You don’t have to keep installing different browsers; XenoCode lets you run the browser of your choice virtually from its servers. This service essentially sandboxes the browser, allowing you to run it without changing any of your computer settings. I usually have IE6 and 7 running along with my installed version of IE8.

IENetRender
Here’s another handy tool; it allows you to see real-time screenshots of your page in many versions of IE.

Browsrcamp
If you develop on a PC, Browsrcamp allows you to see screenshots of what your page will look like in MAC Safari. I’ve found that the PC version of Safari doesn’t always render pages consistently.

W3C Validator
This choice is an obvious one. Validation keeps developers honest and squashes most problems before they become headaches.

Version Control:
Assembla
Assembla offers a nice control panel interface for your version-controlled spaces. This particular one runs on Subversion. Even if you’re coding a project all by yourself, I would recommend some kind of version-control software as a must-have. It will save you hours of time.

Tortoise SVN
This is a great SVN client that ties right in with the Windows Explorer Shell. (Sorry, MAC users.) There are numerous subversion clients out there, but this one is my favorite because it runs silently in the background until you need it.

Server Environment Information:
Builtwith
Builtwith is a web technology information profiler; it lets you find out what a given site is using.

Domain Name Details
The name says it all. This is a good place to find answers to most of your common questions about domain names quickly.

This list is by no means exhaustive. There are lots of great products out there that you may find just as useful. It’s really all a matter of preference and comfort. What tools do you use in your development cycle? Feel free to share!

Although CSS3 is still officially in the works, the recent releases of Safari and Firefox have given us a few new CSS tools to experiment with. Designers may specifically be interested in the following features that accomplish with a few lines of code, things that we would normally do with graphics.

Custom Typefaces

Being able to use whatever font we feel like using in a web layout is a pretty much a designer’s dream come true. In the past the only way to do that and make sure that users see it was to create graphics for the pieces of text that you wanted rendered in a particular font. As more browsers include the @font-face property, that should hopefully change. Luckily the inclusion of the @font-face property in Firefox 3.5 now opens up font embedding to a much larger audience.

Using it is pretty simple. First you define the name of the font family and point it to the location of the font file. At this time .ttf and .otf are supported:

@font-face {
font-family: PrettyFont;
src: url(fonts/PrettyFont.ttf);
}

Then you just use the above font-family name in your document as you normally would:

p {
font-family: PrettyFont, Arial, sans-serif;
}

As always, plan on a fallback incase your users are on an older browser. In this case if the user is using an older browser they will see paragraph text in Arial.

Drop Shadows

I’m pretty sure a book can be written on the history of the drop shadow. Back in the day, designers used to create drop shadows on objects and type by adding a separate layer behind an object and adding some blur. Later versions of PhotoShop made this easier with some built in tools, but all this meant to your site designs was more graphic files and longer download times. The box-shadow and text-shadow properties now allow you to do this all with a line of code to either a box or a piece of text.

div {
box-shadow: 2px 2px 3px #CCC;
}

h1 {
text-shadow: 2px 2px 3px #CCC;
}

What this does is place a 2px to the right, 2px down, add 3px of blur and color it a light gray (#CCC). The best part is that your text stays selectable and can be increased or decreased in size using your browsers built in text sizing function.

Rounded Corners

Another feature that is sure to be useful (web apps come to mind) is the border-radius property. What this does is round the corners on boxes – a feature that previously required a lot of markup and graphics to create. Now you can do it easily with:

div {
border-radius: 8px;
}

This will round the corners of a box with 8px radius.

The nice thing about using these new features is the savings on extra graphics and code and simplifying your stylesheets and preserving the underlying text. All of these features degrade nicely on older browsers too. That being said, remember that CSS3 is still not fully supported on all browsers so be sure to test thoroughly. But Remember… with great power comes great responsibility! There may be a temptation to go over the top so please… use these sparingly

Over the past few years, CSS frameworks have become popular web development options. And there’s no shortage of opinions on their usefulness.

For those who don’t know, CSS frameworks are collection of CSS templates that set up such things as basic typography, form styling, grids and simple layouts, and resets.

Why would you use a framework? Well, there are lots of reasons. In addition to saving you time, they can help you standardize the structure of your sites, avoid dumb little mistakes, and ensure browser compatibility. And if you’re building out a few sites that will be related, it helps to start with an underlying structure that can be duplicated as needed.

Sounds pretty compelling, right? But there are reasons not to use them as well. A framework might be too much for the site you are designing; it may be unnecessary. Frameworks also tend to use cryptic class names, which are not always clear.

Take for example, this possible stack of classes one could build using the BluePrint framework:

<br />
<div class="prepend-20 span-1 append-1 last"><br />
    <p>This is my Content</p><br />
</div><br />

Not too clear what that class does, is it?

Here are a few of the most popular frameworks:

BluePrint
BluePrint is a CSS framework that aims to cut down on your development time. It gives you a solid foundation on which to build your project, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.

960 Grid
The 960 Grid system is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

Elastic
A simple CSS framework to help you lay out web-based interfaces, Elastic is based on a four-column printed layout technique, but it’s capable of unlimited column combinations and makes elastic, fixed, and liquid layouts easy. The Elastic CSS framework provides a set of helper classes that enable you to accomplish hard things through pure CSS techniques, such as same-height, full-width, and vertical-center options.

Yahoo! UI Library: Grids CSS
While other frameworks include support for text and reset documents, the foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4 kb file provides over 1,000 page-layout combinations.

Tripoli
Tripoli is a generic CSS standard for HTML rendering. By resetting and rebuilding browser standards, Tripoli forms a stable, cross-browser rendering foundation for your web projects. Tripoli is not technically a framework. It doesn’t tell you how to code your web site. Instead, it forms a solid HTML rendering engine and a base for creating dynamic layouts without interfering with typographic measurements.

Are CSS frameworks right for you? It’s a matter of preference. I personally like hand-coding CSS classes as I need them. For me, it’s faster than poring though a list of style definitions. But some people find them very useful. Do you have a favorite CSS framework that you don’t see on the list here? Let us know.

With the recent release of the iPhone 3GS and Palm Pre, the lure to take your site mobile will be stronger than ever—but should you?

Loading up your site on a mobile browser can be a real eye-opener. In a best-case scenario, what you’re greeted with is a smaller version of the site you are used to seeing on your desktop. Although devices like the iPhone are more than capable of viewing “full” HTML websites, all that double tapping and pinching can get pretty tiresome.

The reality is that not all sites are particularly suited to having a “to go” version. Of course, there are the obvious ones—news, weather, finance—but most of these areas are pretty well served by the built-in apps on mobile devices. It takes some creativity to figure out what makes your particular business work on the go. So when considering the mobile option there are some important questions to ask:

What part of my site would be the most valuable to somebody on the go?
This could be as simple as your contact information—a mobile business card of sorts. I know I’ve been in situations where I was looking for a phone number or directions and went to a company’s homepage to find them. Sometimes this works out, and sometimes not so much. Ideally, a site will have a properly formatted phone number that becomes clickable allowing one-touch dialing. Adding in a link to your location on Google Maps will make you that much more accessible.

Am I doing email marketing?
One of the most common uses of mobile devices is for checking email. If somebody decides to follow a link in your email creative, it’s definitely at least worth a look to see what he or she would be presented with. Creating a mobile-specific landing page for your email creative could be a nice, low-impact way to experiment with incorporating mobile into your online strategy.

Could I trim my site down to just the basics and be happy with it?
Is it even possible to distill your site into small bite-sized chunks? Sites that are more information heavy, requiring users to spend time flipping through each section, fill out forms or pore through material in large PDFs are obviously not places somebody wants to visit on the go.

Do I want to maintain multiple versions of my site?
And you thought the early days of the web with browser-specific versions of your site were over. With browser detection and alternate CSS files used to serve up a mobile version of your site while keeping your full site intact for desktop visitors, the process is more manageable now. Still, you will have to consider the implications of any architectural changes across multiple platforms—although the statistics seem to support targeting iPhone if you just want to get your feet wet with mobile. According to Net Applications, of all mobile browsing platforms, iPhone has the largest market share with almost 65% as of May 2009. Google’s Android is in a distant second with almost 8.5%. As of this post, data still isn’t available for WebOS – the operating system use on the Palm Pre.

So is now the time to fire up the grill and get started on a mobile presence? It would seem so. At the  least it’s definitely time to start thinking about it.

Welcome to our venue for getting personal.  This is where we’ll share our know-how and stay in touch with our professional community. It’s also a platform for others to speak out on trends, best practices and their own insights. It’s a space to open up about our experience and our experiences, and process our processes…and I’ll start off with our thinking about this very blog.

So how do we –or you– know if it’s right to launch a blog? Or the right time? When it seems like everyone’s already blogging, why should anyone start something new?

In our case, we’ve been recommending blogs and social media for clients for sometime now, as part of a robust integrated marketing strategy including other initiatives like email campaigns, search marketing, PR, speaking at conferences, etc. We set our own marketing priorities just as we would advise our clients. First we redesigned our website so that it effectively presents our experience, services and brand personality, and rigged it so it brings in leads and subscribers to our newsletter. Second, we swore to doing our monthly newsletter, Loewy’s Latest, with no excuses, once a month. Now is the blog, and next up is our Facebook Page, Twitter…all the social media we provide the strategy, design and technology for to our clients.

Basically, before starting to roll out social media for our own company, we spent time generating a sort of critical mass through other outlets: optimizing our website to build more traffic, creating a larger pool of contacts through our email newsletter. Now that we’ve achieved that critical mass, it’s time for us to take it further – expand our network and allow the conversations to become less one-way.

A blog is an appropriate choice for us because it’s a good fit with our brand: conversational, friendly, smart, and collaborative.  It’s also a good fit with our goals. We have a lot of experience to communicate but we’re also are always looking for ways to improve and stay on top of emerging trends. Our blog will let us do both.

So how’s your website doing? Does your online identity fit your branding strategy? Does your website’s overall experience match the quality of your products and services?  Are you getting leads, selling products, building awareness or even getting traffic?  If the answer is yes, then maybe you’re ready to do a blog – because you have an audience, a tone of voice and a network. You’re ready to be a thought leader in your industry or at least have an opinion. Of course you can have a blog without a corporate website, and you can even make money at it.   But if you’re like us, and most of our clients and peers, your website is critical for doing business online, disseminating information, and creating the first point of contact for all potential customers.

Let’s say you’ve got it all together and you’re ready get started.  Keep your blog focused, stay in tune with what you know and be relevant to your game.  Yes, there are many blogs in your industry, but any niche or network can use fresh thinking, so don’t be apprehensive. Like any tool, if it is available and right for you, then use it.  Make sure it doesn’t duplicate what your site is already doing for you and your audience – consider it an avenue for a different kind of messaging and communication.

For us, we understand that our audience is an intimate group of professionals looking to share best practices for doing business online. In upcoming posts we’ll be engaging our network and sharing our points of view on what we do best: providing the strategy, design and technology to companies that value the power of the internet. We’re kicking off the dialogue with several topics each month, coming from senior Loewy staffers with different areas of expertise.

Here’s to getting social. We’ve opened the floor, now we invite you to join the conversation…and if commenting is not your thing, just stop by and say Helloewy.