Because of this mess a few creative practitioners taught us to separate our content, presentation and behaviors. But, this ideal paradigm is incapable of fulfilling the needs of the web today.

So along came what I will call divergence; or convergence if you look at it from another perspective. Divergence in web development is the braking apart semantics, presentation, and behavior. However, it is not complete separation of the layers.

In divergence you can use presentation with semantics, as long as it’s semantic (not likely to happen because presentation is rarely semantic).  And, you can use behavior within semantics as long as it’s semantic. And, you can use behavior within presentation as long as it’s presentational.

This is basically a conditional AND, not OR, statement versus the boolean ideals behind separation.

For example, in HTML5 we have type=”email”. Attached to this semantic value is form validation, or a behavior; it’s ok to use under divergence.

This is true because the value email is semantic when in use and the behavior supports its semantics. However, if we were to use the font tag we would not be diverging because the font tag is not semantic and presentational, it is only presentational. And, so, we diverge font styling into our CSS only.

If we want to apply JavaScript to our HTML we can’t add it into the HTML body because it is not semantic and behavioral. The JavaScript would need to diverge. And, if we wanted to use behavior within CSS, our presentation, it needs to be both presentational and behavioral.

Under this methodology we keep our semantics, presentation, and behaviors intact while working with new technologies.

More to come later…

A few purists, I’m sure, will be outraged by what I’m saying. But, if the truth be told, the pseudo class hover has been triggered by user action for quite a while. That is, behavior within presentation.

From the CSS specification, “Interactive user agents sometimes change the rendering in response to user actions. CSS provides three pseudo-classes for common cases.”

This has made me question the principle behind separation of content, presentation and design. And, as I have investigated the idea behind separation, inspiring as it is, I have not found it to be practical.

Separation is a novel idea. It has guided the design style of many amazing programmers and artists. It has led to numerous beautiful and functional websites. But, this segregation of content, presentation and behavior is, as I have found it, much like XHTML 2: little more than an idealistic view worth stemming from.

It is time to leave this ideology behind us. It has served its purpose practically and well. Times are changing and new technologies are piping a different tune: divergence.

It is time to start diverging, not separating.

Part Two: Divergence explained

The Changes

• New colors
• New fonts
• Easier to read: headlines, text, and code
• Comment avatars enabled
• Navigation placement
• Tagged added

Still coming

• Awesome home page
• Archives page
• Author’s page
• Regular page design

A Look Back

Here is a last look at what once was, Intel Designer.

This design is being processed and will be converted into a WordPress Theme. There will be a few changes to the design, because of my limitations and knowledge of the WordPress admin.

If you want to help me convert this design to a theme please let me know. I could use some help with the admin controls. Mainly adding baked in meta data fields for the theme.  I would love to get some help with this.

If you have any questions or suggestions feel free to hit me up on twitter. Thanks, for making this blog awesome!

Our Services

Robojuice is a web design studio and we have one objective, to help businesses reach their strategic online goals. However, we do more than design websites. If you ever need assistance reaching your online goals, please visit our website and contact us.

At Robojuice we work with you. We don’t produce a product without helping you use it effectively. Here is why:

• People do not use the web like they used to
• They use it every day, and every day things change
• Facebook, YouTube and Twitter have changed the way people find information and businesses
• Search is not the only factor
• Simply owning a website will not work

New Customer Management

Also, Robojuice will be using a few management tools, Basecamp and Freshbooks. Basecamp is an online project management tool used by companies like BusinessWeek, Fox Sports, and National Geographic. And, Freshbooks works with Basecamp so you can pay on and offline without a hitch.

Our Website: http://robojuice.com/

Now, I know when you’re new it’s hard to get clients to give you anything, content or cash. But, they don’t know what design is, and they don’t know that they need it. It’s not their job, it yours, and you need to inform them.

Doing design right

As I learned, design was not about picking up a brush and hoping something nice came out (This is what most new website owners assume). It was about understanding, communication and art.

I had the process all wrong:

1. design a site
2. plug in content
3. and market the content

Instead the process is quite the opposite:

1. understand the market
2. develop content based on that information
3. and let the content inform the design.

Market awareness

Marketing is the first step to design. For a writer, marketing is a story. For us, it’s the story of those we are working with. But we can only begin to write once we understand their story.

Content

Every story has characters. Who are the characters of the brand you are working with? What is their history? What is their personality? What do they do for fun? Are they goofy or proper?

Writing is hard if you don’t know these things. In the end writing is about bringing an idea to life. It’s about painting a picture in the mind’s eye; and it’s our job to communicate what that painting is emotionally.

Design

Communication is emotional. It is where most relationships break down too. If a design is not communicating correctly, how can the design stand? Well, it doesn’t. It never will. It’s like a person who smiles on the outside and wages war within. Bad design is like a volcano waiting to erupt without warning, and volcanoes erupt.

Design is informed by content. If it’s not, it’s not communicating.

What is your story?

So, what is the story you need to communicate? Have the characters already been given to you? Or, will you pretend that you can design the cover of a book without pages?

Yes, its 2010, but people still use IE6… not many, but enough to be depressing. Still, all is not lost. I happen to run across lesser known PNG fix for the aging browser. It’s called DD_belatedPNG. Unlike the traditional iepngfix.htc hack this bad boy gives you the ability to use positioned backgrounds and still retain transparency, among other things. Check it out for yourself.

No hairs for IE

However, if you don’t want anything to do with IE6, you’re in luck. Just recently Andy Clark updated his universal IE6 CSS on Google code. The new version lets you scrap the browser completely by serving it a nicely pruned style sheet that does just enough to be professional. Consider it the default style sheet you wish IE6 came with.

It has been long hoped that fonts could one day be embedded on web pages accessibly. That time is now!

Contrary to common belief, font embedding has been around for a long time. In 1996 the W3C chartered its first font working group and developed WebFonts (‘@font-face’). However, its implementation has been stifled by legalities. Dave Shea has spoken on numerous occasions about the problem: font foundries’ weary approach to distribution on the web.

“Currently one of the biggest stumbling blocks to embedded type on the web is of a legal nature rather than any genuine technological barrier. Most of the major browsers have now implemented the @font-face property…” (Dave Shea)

Foundries have been afraid; it’s obvious. Online pirating has been belligerent and font distributors have feared shrinking profits. However, it may be that the recent decline of print has sparked a fire, and the kettle is boiling.

Stoke the fire

Until lately the foundries have steered clear of the web.  When Jeffrey Veen announced Typekit last year only a few had considered the idea. But, this single event proved mind molding, the font makers were starting to get it. As web evangelist Jeffrey Zeldman responded to the unfolding of these events late November 2009, “Yes!”

And it was not too early to celebrate.

Only a few months after Typekit’s public release, FontFonts announced they would be licensing web based fonts to designers directly. A paradigm unknown until now, and it’s about time.

The recent chain of events has been a breath of fresh air. And to the surprise of everyone: things are finally moving forward at a quickened pace.

Font Deck vs Typekit

Typekit has not been the only one making noise. There are other services like it too, but none of these have stirred the pot more than Typekit.

Clearleft, a web design and consultancy in Brighton UK, has been working with the foundries on their product Font Deck. This is exciting because it not only means more competition, but also that foundries are taking things seriously.

Font Deck, similar to Typekit, is a service in which you can register your website with licensing to fonts of your choice. While the list of fonts is limited to participating agencies, the idea alone is enough to make designers Dribbble. And it has!

Mark Boulton, typographic maniac of Mark Boulton Design, has recently launched his new corporate website with embedded web fonts using Typekit. The effects are truly stunning.

In addition, Typekit empowers the use of graceful degradation. This has been a huge leap for accessibility, findability and usability.

However, there is a problem. Currently, some browsers suffer from “font-pop” the lag time between the rendering of text and that of the embedded @font-face. This may seem like a small price to pay, but significant font popping can disorient users while reading text. The impact is debatable but every designer should be aware of its effects.

Web Fonts: The time has come!

Regardless, the time has come. Everyone is talking about it. This month at the SXSW Interactive Conference web fonts came front and center as Jeffrey Veen, Stephen Coles, Roger Black, Bert Bos and David Berlow took stage. To top it off, just last week the W3C announced its second Web Fonts Working Group, chartered to create a standard format for downloadable fonts (another debate in its own right).

A word of warning

Web fonts are a blessing, but they can be a curse! The potential threat today is akin to that of DHTML.

Back in the 90’s, when Netscape invented JavaScript, many designers went over the deep-end. They made their websites ‘dynamic’ and ‘flashy.’

Some felt it would grab and engage users to create pop-ups and animated splash pages. It was a novelty; cool for a day and hated the next. For this reason many thought JavaScript silly or even dangerous, and for good reason too. Obtrusive code has inspired many books dedicated to highly discouraging the idea.

Web fonts are at the same risk! Web Designers may find themselves implementing novelty designs hoping to make a splash. This is not good! It’s up to us to educate ourselves about the potential threats that lay ahead.

It’s not shocking that A List Apart Magazine published two articles in November of 2009 covering the basics of this issue. Jason Santa Maria, Creative director of Typekit, had this to say in his article at the time.

“There’s a serious possibility that by gaining access to the world’s font libraries, we’re opening Pandora’s Box. Many people working on the web today have some knowledge of typography, but my hunch is that many designers are about to feel quite baffled by the new challenges they face.” (Jason Santa Maria)

I totally agree with Jason. It’s time to take a closer look at Typography. There is a dangerously high risk we will end up back in the 90’s; and it’s not just the 90’s that threaten web design either. Font designers will need to start making better rendered fonts, as Tim Brown points out.

Browser makers have known about the black hole threatening to suck in font rendering for a while. Only now has the development team at Microsoft been able to convince the corporate giant to move forward.

The release of IE9 will prove ground breaking. Not just for its enhanced standards support but also for its hardware acceleration and DirectWrite technologies. While the debate goes on, whether IE9 will be enough to keep web design moving forward on the most popular desktop platform, the enhancements made can’t be ignored.

Now is the time for web designers to start taking typography seriously. Developers, too, need to be aware of what should and shouldn’t be done with @font-face. It’s time to stop using back handed techniques. This time it’s for real. It’s time to get excited again… it’s time for web fonts!

Edit: This just in, it looks like I’m not the only one talking about it today. Zeldman makes some good points.

The Effects

To be honest it’s hard to say how IE9 will affect the current climate. IE9 has not erased the presence of IE6 from the drawing board. It’s just another nail in the coffin.

But IE is not the focus here: web standards are!

When we design for the web we are intrinsically designing for more than IE6, a desktop browser. We are designing for a huge number of devices and platforms with varying constraints and environments.

While IE9 is a huge step toward a more accessible web we cannot, and must not, let IE continue to blindside us or skew our perspective.

For too many years we have complained about how IE is evil. The fact is, its not!

Focus on the facts

We need to go back to were it all started. We need a course correction. We need to be realistic about what is possible right now and focus our energy on the future, specifically HTML5. We need to make it our objective to cultivate better constraints with clients. We need to educate them about what is possible now, the new and exciting stuff.

Moving on

Innovation requires exploration, and exploration requires just a bit of devastation.

Consider IE, with it we now have AJAX and better support for CSS, yes IE6 was cutting edge at one time. Even, Netscape was involved in the early days and gave us JavaScript.

Those were hard times, but without the browser wars who knows what would have happened.

It’s time to remember how we got here and put aside our bias. IE is not the enemy, it never has been. It has helped cultivate some of the best features on the web today. However, this would have never occurred without organizations like the W3C and the activists of the time.

So then, what do you think? What is our responsibility, our role in all this? How can we encourage change? How can we support standards and still innovation? What are the boundaries and who makes them, if there are any at all?

Development

With a 1024-by-768-pixel resolution at 132 pixels per inch Dan Rubin sees this as advantage for the CSS Grid Framework 960, via twitter. However, new markets and frameworks could be on their way. Like the iPhone and iTouch, whose unique market created JQTouch, the iPad may too create a new field in web development and design.

If you are wondering what weapons the iPad came with look no further then Apples iPad page, but you will not find flash. Yep, no flash was seen on the iPad’s Safari during the presentation today only the obtrusive symbol of a plug-in; farther locking in CSS, HTML5 and JavaScript as the weapons of choice.

Apple’s choice to keep Adobe’s Flash product out of the loop suggests that they may be doing so to push their app store. However, this call has enabled a new play ground for HTML5 and SVG. While it is still uncertain weather Apple will adopt Flash in the future it is safe to say we will be seeing more uptake with the canvas tag. Big players like YouTube have already begun to implement HTML5 versions of their sites.

Could this be for the Mobile web? Maybe so but only time will tell, and I’m betting my dollar on HTML5.

So what will the iPad do to design?

That’s a good question. As Leo points out the iPad is a new breed of device and simply can’t be compared to a net-book. Apple clams this to be a “magical” device, one you need to experience.

This “magical” experience Apple promises. Will they hold up on the deal? I doubt it.

What I don’t doubt is the where people will experience the new platform. Apple is trying to get us out of the chair and on the couch, in the bed, or on the move. They want us to use the device as if it were a book or newspaper.

This might open the doors to a new level of user experience design. As designers we need to re-imagine the environment in which our users interact with these devices. We need to take into account a new type of medium, where people consume more and generate less. Andy makes the notion to this via twitter.

With multi-touch at web designers fingertips who knows what will happen. We have seen JQTouch make mobile web apps feel native to the iPhone but the iPad changes the game with its large screen. It may be that we see more lightbox frameworks, like Top Up, creeping into play.

As designer we love to use hover effect. However, over use of hover effects have created a usability problem for touch devices. Be sure to watch your use of the pseudo-class hover, the iPad doesn’t have a cursor.

Are there any editors?

On the Apple iPad page they state that, “The iWork productivity applications that people know and love on the Mac — Keynote, Pages, and Numbers — have been completely redesigned for iPad.” This could mean there is a good chance we may see web development tools in the future (but I doubt they will come from Apple).

With the option for a iPad Keyboard Dock the chances of getting a local development toolkit is not to bad either, though not initially intended.

Any Storage?

I can’t say that I know about this topic but the iPad will come standard with at least 16GB Solid State Hard Drive Space and up to 64GB. With the ability to sync with iTunes via Windows or Mac sending and receiving development files is likely.

Predictions

As a developer, and designer, this only further deeps my love for standards, and CSS will continue to rule over page layout. Flash will have to wait and JQuery will become widely adopted for iPad development. However, I don’t see the iPad becoming the computer of choice for designers or developers. However, it may be that everyone will want an iPad when their on the go.

The iPad is truly an excellent device for anyone on the go. Its very affordable at $499, Apple-ready slick-design, and the battery life is more than expected weighing in at 10 hours.  The iPad will find its place on many a coffee table, bedside and salesman’s hand bag.

On a personal note, the iPad is more than I had expected and is amazing! While some think it is little more than a “worthy cause”, I believe this device will change the way people think about mobile computing. The iPhone changed the way we think about the phone and they are leading the way with the mobile device of the future. I don’t know that it will be the iPad 1.0 but they are close.

Recommended Content

Podcast: Premier episode of The Conversation

Jeff Croft: iPad Thoughts

Adactio: The iPad and the Web

Keynote: View the keynote now

iPad Keyboard Dock