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.

If you’re like me, the week after Labor Day feels like the start of a new year. We’re done with vacations, the kids are back in school and a new season is just around the corner. September’s all about new beginnings – it’s a launch pad for fresh ventures and adventures, and Loewy Design is ready with key additions to our ground crew.

In the past few months we’ve grown our lineup to reinforce our talents in technology, design, strategy and account management. Our core team – David, Donald, Marc, Selina and LeAnna – is proud to welcome new faces and assets on board.

On the technology side we’ve added Senior Developer Nitin Menon as our tech lead. Nitin’s expertise and skill sets include application development, e-commerce and content management systems. He specializes in PHP, MySql Databases and Cold Fusion. Nitin brings with him over 8 years of experience from interactive agency Big Buzz.

We’ve tapped Executive Producer Angela Florie to manage our internal and external growth as our client roster continues to expand. Angela hails from TMP Worldwide, an interactive agency specializing in online marketing and communications. Angela provides strategy, marketing and account management and helps us stay on track and on budget.

We’ve strengthened our design team with Senior Designers Casey Bartholomew from Big Buzz and Ryan Barresi from NBTY. Both top web designers with diverse talents, they provide strategy, information architecture, design and front-end development. We’ve also hired new programmer Ellie Roepken, who specializes in PHP, content management systems and front-end development, and designer/front-end developer Jason Friedberg.

We’ve been working hard this summer on many exciting startups, redesigns and online marketing campaigns – and also on building our group and fine-tuning our process. Now, we’re thrilled to kick off fall with the right team for what’s next, fully powered up to do what we do best – offer complete online branding and marketing solutions.

Meet our new teammates.

Your flaky freelance designer has abruptly closed up shop to go backpacking across Europe, leaving you without any assets or files from your business collateral or website.

After partnering with a new, reliable agency, you need to track down your favorite stock photos used in all of your business collateral–but how?

Instead of wasting hours doing aimless searches for your favorite image among dozens of stock photo websites, you can find what you’re looking for in seconds by using a handy little site called TinEye.

TinEye is a robust reverse-image search engine that will locate your long-lost image and point you to the stock photo website from which it was purchased.

While TinEye can locate almost any image you upload or provide a URL for, there are some instances when even the most clever search engine fails.

When it works:

When it doesn’t work:

TinEye is a handy tool that anyone can use. It saves everyone time and money. Be sure to bookmark this post or you’ll be kicking yourself the next time you need to find the original source for a stock photo.

I have always had the belief that design was a utopian endeavor to be undertaken by the smartest people in the world to solve problems. That designers were by nature helping the world evolve toward better, more beautiful, more sustainable, and more useful artifacts and services. I believe in my soul that this is true, but I also know it’s not enough.

What also needs to happen is this: business leaders need to see how designers can be innovators for them. Designers can make businesses more efficient, make products more usable, help speed communications, minimize damage to the environment, foresee the need for innovation, and be the catalyst for it.

When you think about companies such as Apple you can’t help but see the contribution that design has made to their market value. The problem is that many companies can’t see how design will affect them. I’m not sure if this is because they fear innovation or just misunderstand what design is.

Design is not:

1. Only a noun. It’s also a verb. It’s a process and a way of thinking. It’s the act of recognizing a problem, researching to find the causes, conceptualizing solutions, communicating to create awareness of these solutions, and directing their implementation.

2. Just pretty pictures or fancy words or shiny materials. In short, it’s not the end product, it is the means to get to the end. (Design can lead to end products as varied as the companies they are made for. They could be pretty pictures or shiny new materials but they could just as easily be a new business plan, a product launch strategy, a client communication tool, or an information display.)

3. Necessarily the answer to all your problems. Many companies hire designers to help innovate but then fall short on manufacturing, shipping, delivery, customer service, and a host of other requirements of a successful business. They look at design as a way to best the competition but then forget about the most important factors in the process: consumer desire, consumer need, and consumer satisfaction.

Design is:

1. A strategic imperative. As more and more businesses see the value of a design-centered approach to problem solving and innovation, they will realize they need to do the same to stay competitive. Design can’t be an afterthought; it needs to be an integral part of the company.

2. A way to create true innovation. The research and development inherent in the design process are really the only ways to mitigate risk in the search for the new. There have been examples of success by accident, but these are rare and often short-lived. Success, in other words, is also something that can be designed.

3. A process to create greater efficiency in an organization. Sometimes making your products or services better is not the issue. The challenge lies in making them with greater profit baked into the process. Designers can look at an organization’s processes and design them to be more efficient, thus reducing overall costs.

4. A method for communicating. Like language, design is a way to communicate. Designers have the ability to streamline communications so that the impact of the messages is clear and concise.

If you own a successful brick-and-mortar store, you’ve built it by providing high-quality products or services to your customers. You’ve earned their trust for a variety of reasons: they found what they needed, they like your prices, their friends shop with you, you’ve been around for years…and so on. So how do you build the same trust and confidence with an online store?

Trust can be lost quickly, especially online. We ask a lot from online customers, and their suspicions are already on high alert for fraud, identity theft, hacking, spam and other risks. Not only do we want them to buy our product, but we also require their email, street address, credit card and any other info we can squeeze out of them – which is very different than walking into a store, dropping a few bills and leaving. So here are a few best practices that will put your online shoppers at ease, build customer loyalty and, most importantly, increase conversion rates.

Define your brand

Customers want to interact with distinctive and professional brands that they can believe in and be proud to shop.  Having a strong store name and domain is a great start. Try to avoid hyphens and cute misspellings when choosing a domain name – those can work well for content-driven or social media sites, but can be negative factors for selling products.

Your store’s visual design should be unique, and your messaging needs to be well written. Users can smell a purchased design template from a mile away and will suspect something fishy if they’ve seen stores similar to yours. Your store should be clean but not sterile, so look for ways to infuse your brand personality into your design and copywriting.

Seamless user experience

Your user interface design shouldn’t stray from what consumers have learned to expect from online shopping. As e-commerce has matured over the last decade, it’s established standards that shoppers rely on and demand. Don’t create funky new ways of browsing for products or checking out – continue to build trust with an experience that feels familiar and natural to your customers. There’s nothing wrong with taking cues from the best online stores and emulating their shopping process.

Pay close attention to every point where visitors interact with you. From product browsing through checkout, to email communications, packaging, reliable delivery and confirmation – consistency is essential for building trust. Detail the steps for completing a purchase and aim to under-promise and over-deliver.

That’s what they said

Spotlight your awards, success stories and security measures. Testimonials are great, but people are often suspicious of praise from unknown customers with no last name, so establish your success and reliability in other ways as well. Don’t be afraid to publicize your increase in sales, registered members or traffic. Back up your stats by linking them to reports provided by third-party tools like Alexa or Compete.com. Tout your privacy policies, seals of approval and security certificates.  All of this will help allay customers’ concerns, make them comfortable, and help them feel more secure about your business.

Doing press releases, thought leadership pieces and blogging can position your store as authoritative and sophisticated. You’d be surprised how many shoppers want to get the backstory on your store before they’re willing to enter their digits.

Community

Depending on your store and demographic, building Facebook, Twitter and other social media communities can ease doubt and enable customers to share stories about your shop and products. Be careful to keep a close eye on these communities and monitor the conversations. It’s likely you’ll get some negative comments that you’ll want to respond to quickly. You should always be open to criticism, fess up to your mistakes and explain what steps you’re taking to address them, and inform your customers about your plans for improvement.

Convey, build, and keep trust with your consumers, and they’ll return to your store again and again.

Earlier this month I attended the Society of Digital Agencies (SoDA) conference in New York. The mission of SoDA is to advance the profession of digital marketing through education, discussions of best practices, and advocacy. The conference was billed as an “un”conference, which made the event conversational, collaborative—and at times a little too “un”structured. Still, it was a good experience.

We broke up into groups to discuss hot topics: Challenges of the Modern Agency, Metrics for Success, Engaging Social Media. I had hoped to gain insight into how large companies and agencies are managing their brands within their social-media initiatives. It’s clear that social media should be part of a brand’s marketing strategy, but how are companies controlling their brands’ voices? To my surprise, other attendees from top agencies and brands had similar questions—but few answers.

Some sound ideas popped up, such as the development of branding guidelines for social media, and the hiring of brand editors who can provide a checkpoint before tweets, blogs, and comments are published. These two methods can work fine for blogs themselves, but they can kill the spontaneity and immediacy of a tweet or a comment on a blog. Moreover, what do you do if your entire company is enthusiastic about speaking out and joining in on all the conversations?

If it’s your company’s policy to allow many social-media voices, it’s imperative to set up rules and guidelines and hold your employees accountable. Amber Naslund of the blog Altitude provides great examples of blogging policies from large corporations that can be used as an excellent starting point for developing your company’s guidelines.

If your social-media voice is monitored by a specifically designated department or by an outside agency, it’s easier to stay in control and keep your brand’s message inline. Your social-media captains should plan how they will uphold your brand’s promise in their conversations with customers, employees, and partners. They should meet weekly or monthly with the marketing or brand teams to ensure that all efforts are aligned with your brand’s strategy and corporate culture.

For a Twitter campaign for one of our clients, we create a monthly bag of “evergreen” tweets that are mixed in with spontaneous ones. That client is accustomed to having its copy and creative approved by its legal department and brand managers, which is not an ideal situation for quick tweets about what’s going on at the moment. To overcome this we develop 20 tweets that can be preapproved, and then mix those in with 10 spontaneous tweets that follow our defined social-media strategy. With this method and ongoing monitoring we’re able to lower the risks of tainting the brand, while still appearing spontaneous and continuing to build one-to-one relationships with the company’s customers.

This is new territory, and the best tactics have yet to be determined.  We encourage you to share your experiences and thoughts on how you manage brand continuity in social media for your company and your clients.

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.

The outrage has been amusing to say the least and the vehicles for protest are the usual suspects: blog postings, twitter updates – even petitions … no we’re not talking about health care… we’re talking about something much more serious – typefaces! Specifically, Ikea’s recent decision to switch from using Futura, a classic typeface that they have successfully used for 50 years, to Verdana, a font designed for Microsoft back in 1996.

While I understand the reaction and where it originates from (Verdana was originally designed for on screen viewing, improving readability at small sizes) for me, seeing Verdana in print is just… weird. It’s as if the real font wasn’t present when the catalog went to press and we wound up with a system default in its place.

What ultimately matters though isn’t designer opinions, but customer reaction and any changes in brand perception. Currently, the public’s perception of the Ikea brand is a half-empty, half-full kind of thing. Some see it as a refined brand that understands and values design. Others see it as cheap utilitarian furniture that you use to furnish a dorm room or first apartment. It’s this contradiction that contributes to Ikea’s wide appeal.

With this almost perfect balance of form and function, the choice of Verdana can be seen as tipping the scales too much into the utilitarian camp. The official word from Ikea spokeswoman Camilla Meiby seems to indicate that this was the reasoning behind the decision, “Verdana is a simple, cost-effective font which works well in all media and languages”. This is definitely understandable considering that the Ikea catalogue is produced in in 27 languages for 35 countries (55 editions total).

This will be interesting to watch as it unfolds. Will Ikea pull a Tropicana and revert to Futura or will they stick it out? One thing’s for certain, it will not be decided by designers, it’s all up to Ikea’s customers.

Recently a client asked us for our opinion on a Digimag (or whatever-you-call-it) service called Ceros. I’ve seen this technology grow in popularity over the years, and I have to admit Ceros has taken it to a higher plane. Their product and experience is rich with video, animation and interactivity – but so what.

I can see how print publishers would really love for this page-flipping technology to take off. Their print advertising windows are closing quickly, yet their online advertising windows are not opening fast enough. With Digimags, they are offering an online add-on, attempting to close the deal with the advertiser on that expensive print inside cover or center spread.  In my opinion, this is just another way of putting off the inevitable transition from print to true online publishing – publishing that is centered around knowledge exchange, content that takes place on a variety of platforms and advertising programs based on audience relevance and brand engagement.

Furthermore, is there really a mass audience for Digimags? Nxtbook Media, another digital magazine service, has an interesting real-time map illustrating how often Digimags are read across the globe.  While this is a cool use of Google’s API, showing a reader or two per second – this map is an insult to a publisher’s intelligence.  According to their site, 1.3 million people read a Digimag per month.  That sounds like a lot – but it pales in comparison to the number of people who read online magazines every day.

Digimags are not the panacea for publishers’ woes.  They sacrifice the standards and best practices of web publishing. The content has poor search visibility; there is no room for user-generated content; you need to click and enlarge to read; and you have to drag your electronic paper around to navigate.  Perhaps their future is better suited to a different device, such as the Kindle, as stated in this article.

Finally, producing an issue of a Digimag can cost as much as $100 per page.  Why not put that towards building a sustainable online magazine for your audience and your advertisers?

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