The Opera Web Standards Curriculum is a comprehensive online course that teaches you standards-based web design. This includes not only coding in the web’s foundational languages, HTML, CSS, Javascript, but also design theory.
One of the authors, Chris Heilmann, describes it as “probably the most thorough and up-to-date web standards curriculum on the web”. He writes:
During the whole course the main focus is on usability, accessibility and writing maintainable code. We deliberately left out browser hacks and backward facing solutions and build on the ideas of progressive enhancement and unobtrusive JavaScript.
I must also point out that WSC is part of Opera Education, an initiative that pushes for web standards awareness and enthusiasm for the internet industry, specifically in schools and universities. I think it’s important for these two parties—browser software makers and educational institutions—to work together rather than apart in developing the Web. In this regard, Molly Holzschlag believes the course is an A+:
The impressive aspect of the curriculum as it is now is that it’s comprehensive, including foundational topics such as Internet and Web history and evolution. Educators understand that history provides context for real learning. Sadly, this is an area often not available in books and online tutorials because readers typically want to dive right in and learn a given technique.
It’s difficult to find a course that focuses solely on creating things through the internet. It’s almost always integrated with either graphic design (see MTV Engine Room) or computer science. Because of this, there is no focus on employing the best practices in creating beautiful, functional websites. And it will continue to be that way—all the way into the workplace—without those two entities joining forces.
This is why I continue to admire Opera. (Mozilla does, too.) It pushes projects that are interesting and beneficial to the web community. Here’s another example: Opera Dragonfly. Firefox’s FireBug wasn’t created by Mozilla (although Safari’s Debugger is a native feature).
And unlike other browser vendors out there, Opera shows it cares about web standards not by saying but by doing.
Tom Martin from Advertising Age has an excellent piece of advice for all the professionals out there:
Stop being hired by clients and start hiring them. Stop waiting to receive an RFP or mailing hundreds of clients four to six times a year to stay “top of mind.” Instead, pick the folks you really want to work with, regardless of how big they are or what agency they currently work with.
The author is a little more concrete in the next paragraph, but if you want a second opinion, try this on for size: The Secret to Landing Clients Nearly 100% of the Time.
This is just another facet of what seems to be terribly wrong with business, which shapes our cynicism and despair over what we are getting paid to do. I hope that for you, it started out as a job you would have loved to do for free.
I think adopting this mentality of hiring clients instead of getting hired has a something to do with fulfilling your goal of being your own boss. That phrase is said a lot when it comes to freelancing, but applies to the rest of the industry as well. Even larger companies start somewhere. Somewhere small, in which they often compromise their true worth just so they can earn something. Something that really isn’t enough.
Whether you work alone or in a group, whether you’re a big name in the business or just starting out, stick to your guns. If that client does not understand why they have to spend the right amount of money for their venture with you, make sure that before you drop them you’ve done all you can to explain the numbers.
But if this request for proposal hoopla is hurting your operating costs and, more importantly, preventing you from doing your actual job, ask yourself: are they worth it? Have they earned what it takes to be part of your portfolio? You’d want to be proud of every single project you’ve done, wouldn’t you?
You can never run out of things to talk about when it comes to cascading style sheets or CSS, but lately there have been developments that are more than worth your while. CSS3 is slowly but surely becoming mainstream thanks to several browser updates, while the gurus continue to think up smart ways to code those stylesheets.
Update: Ajaxian blogs that WebKit will support CSS variables. Amazing news that has come out just in time with this blog post. I’ve listed it below as well.
Tools and Frameworks
I’m not going to mention every imaginable CSS framework and piece of software out there, but these are worth looking at.
Stylizer: Skybound Software comes out with perhaps one of the most interesting (read: intuitive) CSS editors to date. It helps that it has a free version with a 14-day trial for its Ultimate counterpart.
YAML: Smashing Magazine shows how it is possible to create a flexible layout using Dirk Jesse’s HTML/CSS framework called YAML. The YAML Builder is an excellent plus.
CSS Cacheer: Shaun Inman releases a mini-application for CSS caching.
Best Practices
Here are some great nuggets of advice that will help guide you when writing your own CSS.
Font Stacks: The Unit Interactive blog lists various scenarios in which you should order your CSS font stacks. A PDF file is available for download, too.
Fun With Floating in the Grid: Devlounge recommends several practical CSS classes and layout techniques to achieve hassle-free floats and grids.
Performance Testing: jpsykes reports how the different browsers fare using different CSS selectors and attributes.
Faux Absolute Positioning: A List Apart comes up with a new layout technique that does away with hacks.
Nesting Specifics: DZone goes into the nuances of CSS selector specificity.
CSS3 and Beyond
If you’re still hesitant to use CSS3, you might change your mind now that some of the most popular browsers are slowly incorporating support for it.
Firefox 3: Killian Valkhof and David Baron write about support for several CSS3 features in the latest version of Mozilla Firefox. These include ligatures, kerning, font-size-adjust, inline-block/inline-table, and even text-shadow—coming in Firefox 3.1. The complete list is on Mozilla’s official page.
Opera 9.5: The Opera Developer Community discusses the CSS3 features its own browser supports, namely, @media, text-shadow, opacity, HSL values, overflow-x/overflow-y, :firstof-type, :nthchild, -o-background-size. Not to mention HTML 5 elements and SVG. Don’t forget to check out Opera’s debugging tool, Dragonfly.
Safari 3 has been out for a while now, but it’s Internet Explorer that we’re really waiting for. Unfortunately, IE8 will continue to lag behind.
Qualified Selectors: Shaun Inman proposes a different breed of CSS selectors.
CSS Variables: David Hyatt announces that WebKit now supports CSS variables as documented here.
There are so many wrong things about the branding of MobileMe, Apple’s latest product announcement, that it’s distracting me from seeing how good it could be.
From .Mac to MobileMe
First, the name. MobileMe is a new spin on .Mac, but its new name shows clear focus—mobile. Okay, fair enough, but it’s like no effort was put into coming up with the name. Apple is supposed to be hipper than that. MobileMe has this bad dot-com naming vibe surrounding it. You know, all those names filled with pronouns (I, me, my, you, your, we, our) that stroke the ego.
Then again, Apple is the poster child for that naming strategy. But they could have gone the tried-and-tested “iRoute”. From iMac to iTunes to iPhone, why stop prepending i’s now?
Me vs. ME
Here’s something more disturbing. Why does the MobileMe logo look so strikingly similar to that of Windows ME?
Whether or not this is a coincidence, Apple should be criticized for allowing itself to be associated with an operating system people considered crappy. It’s the last thing you want to do when building your brand.
For those who want to defend Apple by saying “but the handwritten me of MobileMe does not look like the one on Windows ME, it looks better”, I’m not hearing you. They still look too much alike.
Microsoft is too much of Apple’s competition to have this similarity. If Apple drew inspiration from, say, Starbucks, Disney, or Nike, we probably wouldn’t mind—except that you’d think Apple had enough creativity to do more groundbreaking design to take a cue from someone else. Since when does this company listen to anyone else? If Apple is doing this on purpose, then it’s an even lower blow.
Any designer worth his salt would not want to be mistaken for plagiarizing something, much less something not worth copying in the first place.
Attention to detail, lost
No matter how you look at it, the choices made with MobileMe’s branding just aren’t right. They’re sloppy at best. Apple is known to pay painstaking attention to detail, but I can’t see it with MobileMe.
Update (June 14, 2008): Victor says his project, vi.sualize.us, has been around longer than the sites I’ve mentioned here. So, again, this is another image bookmarking site worth checking out.
I smell a web trend. In the last few weeks I’ve discovered two new image bookmarking sites in addition to the insanely famous but still exclusive FFFFOUND!—We heart it and typeish.
To those who are asking “but why?”, normal bookmarking services aren’t visual in nature. Whether it’s social bookmarking like del.icio.us, or social voting like Digg, or serendipitous discovery like StumbleUpon, users decide if a website is worth visiting by looking at its name, description, tags, and popularity.
Granted, those sites are getting smarter by taking snapshots of what the sites look like, or by isolating thumbnails for if it’s an image or video being bookmarked. But it’s nice to have a dedicated tool that satiates your hunger for all things eye candy. The question is, are these image bookmarking sites effective?
more
When I first saw the new lowercase “g” favicon for Google, I thought it was a glitch. The blue of the icon was a bit too bright for my taste, and the “Web 2.0″ spin on it (shiny, rounded-corner button) was not characteristic of Google at all. A few hours later I saw that people started to talk, nay, complain about it. And then I realized it was a tiny Google redesign, after all.
Here’s the official explanation from the Google Blog:
Some people have wondered why we changed our favicon — after all, we hadn’t in 8.5 years(!). The reason is that we wanted to develop a set of icons that would scale better to some new platforms like the iPhone and other mobile devices. So the new favicon is one of those, but we’ve also developed a group of logo-based icons that all hang together as a unified set.
And here’s the whole suite of icons for the redesign:
It looks a bit nicer in higher resolutions, but as a favicon, not at all. The small “g” is just a few pixels away from becoming indistinguishable to the number “8″. It also looks like it’s struggling to stand up straight, but failing miserably at it.
How much does Google favicon suck?
- Mayer claims that the redesign is not final, and is even invoking the wisdom of the masses to submit their own Google favicon ideas. Spec much?
- A logo redesign takes a lot of effort (which was also mentioned in the post). The inability to stand by their decision to change the favicon shows flakiness on the company’s part. On the other hand, it’s a good thing for such a gigantic company to be this sensitive about the smallest thing about them. Maybe because they don’t want to act like “the big G”.
- The rounded-corner button look and the specific mention of the iPhone tells me they’re designing for Apple, not for themselves or for any other mobile device. Is Steve Jobs this good at being a design dictator?
- Users have created scripts to bring back the old favicon.
- A comment on TechCrunch: “Google has a design team?” More on that here and here. I’m sorely tempted to write about how Google’s designs are so Web 1.0 (now trying to be Web 2.0), but had no particular reason to. This favicon renewed that desire.
Note: When I use “Web 1.0″ and “Web 2.0″ as design terms here, I mean them sarcastically. I am fully aware that there is no such thing as the “Web 2.0″ look. Glossiness, reflections, and rounded corners are design characteristics that came from Apple first.
Point is, Google never cared about “looking Web 2.0″, never cared about looking a certain way—until this favicon redesign. Despite some very bad design choices, Google’s interfaces are clean, simple, and easy to use. They’re not trying to be what they’re not. But this favicon is. It’s the end of an era, alright.
Remember Blackle? Google is so universal that any small change can turn out to be a huge impact. In the case of Blackle, it was about saving energy. In the case of this favicon, it’s about associating an ever-visible icon on the browser tab bar with the most-used search engine out there. People will have to get used to looking for that small “g” instead of that big “G” when they’re cycling through tabs.
A “website designed by…” link is like a Louis Vuitton monogram. It’s your brand. Let your clients wear it on their websites as proudly they would with a designer handbag.
Is this always true? What makes this practice highly recommended or downright tacky?
It depends. It always does.
Your brand should never hurt your creations, it should enhance them
I bumped into this post: You Will Never See “Designed by Atrick Design”. I totally respect everything he wrote there. And I am not going to say I am completely against it. In fact, I have avoided placing links, logos, and attribution for things I’ve done in the past. But some things struck me.
In Pat Dryburgh’s post, he points this out:
I will never let a “designed by” link do my marketing. I wouldn’t want to take that away from my clients.
A link does not have to be your only way of marketing. You can always do it at the same time you’re promoting yourself in the real world.
But what does that link take away from your clients? Why does does this awful perception exist? If you’re a good designer, (1) you will find a way to place your link so that it fits nicely into the design; and (2) visitors will consider it either convenient or eye candy.
more
We’re not sure when Adobe Creative Suite 4 will actually arrive, but now that beta releases, reviews, and even rumors are starting to clog the internet pipelines, we’re starting to get a clearer picture of what the programs will be like.
Try it
Adobe has just announced that the newest versions of several Creative Suite titles, namely, Dreamweaver, Fireworks, and Soundbooth, can now be downloaded for a test run.
There’s a catch. If you’re not currently using the CS3 versions of Dreamweaver and Fireworks, the trial period for these programs will end within 48 hours. Otherwise you can request serial numbers to use them during Adobe’s prerelease period.
As for Soundbooth, the same rules apply except that you can use the serial number of any CS3 product. That is, “including but limited to Photoshop, Illustrator, Dreamweaver, Fireworks, etc.”
If you’re curious about what these CS4 versions have in store but don’t or can’t try them for yourself, CNET has a brief rundown of new features. For example, Fireworks “finally resembles those of other applications in the Creative Suite” and “features compatibility with Adobe’s AIR, Flash, and Flex Builder as well as HTML”.
Here are more in-depth reviews of the three programs:
Widgetize it
John Nack says that CS4 applications will be extended with “lightweight, cross-platform, network-aware widgets…via SWF panels (palettes) created in Adobe Flash or Flex.”
It seems inevitable to employ widgets in this day and age, whether you’re a desktop app or a web app. And Flash is really taking center stage in Adobe’s pursuits.
Abuse it
Nack also shoots down rumors that the next Photoshop will be released this October 1st, and that it’s not really called “CS4″. But since the CS4 moniker is already plastered all over place, we might as well shrug our shoulders on that one.
But the rest of TG Daily’s report on GPU acceleration support for CS4 programs seems real enough. Clearly, Adobe is continuously looking for ways to harness hardware power and push the capabilities of its graphics programs, regardless of rumors.
I wrote in last week’s Friday Focus post at Devlounge that “restraint is more powerful than the lack of it, especially in design”. The restraint I referred to was the strength and beauty of minimalism compared to the everything-but-the-kitchen-sink technique, but there’s more to it.
Freedom vs. constraint
In this interview with Andy Budd, he explains why complete freedom in design is not necessarily a good thing:
I think that design is all about constraints. Some people love the blank canvas situation, but I don’t at all. I think that’s really for artists, not designers. I think design is all about constraints — business constraints, technology constraints. And it’s those constraints that actually create the innovation.
He says that although Flash is a very flexible tool, limitations tend to be more desirable than flexibility when it comes to design because they breed cool new things. In the case of web design, he cites CSS effects and JavaScript libraries as examples.
Total control
I think this validates whatever reluctance I have to choose Flash over plain old HTML and CSS. And I can relate to that awful feeling when starting a design that a client gave you total control over. One-hundred percent control is never a good thing. You end up doing things you weren’t paid to do and designing things that aren’t completely your best work.
I also think it’s very rude of a client to leave it up to you at the beginning only to scold you for not doing “what they wanted” in the end.
More questions
More than constraint, design goes hand-in-hand with purpose. Levels of purpose vary with every design, but there is still purpose. Is it purpose that distinguishes it from art? Can design actually be distinguished, or should it always be invisible? Is design art?
Going there would be a slippery slope downhill. But designers should try to figure out what design is about even if it begs more questions than answers.
thesixtyone, which calls itself “a music adventure”, is an online community where artists upload their music and listeners decide which songs are the best. As The Drop puts it, the site is an “almost game like format [that] consistently keeps you interested” with its “influence points” system. Points measure your influence as a listener or your popularity as an artist.
- As a listener you spend points to vote for or “bump” a song. When others like the songs you bump, or when you spend more time on the site, you gain points and reach higher levels, which unlock special abilities like multiple bumps.
- As an artist you level up to unlock special abilities like uploading additional songs.
It seems to be a trend for websites to liken themselves to RPGs with jargon like leveling up and unlocking abilities even if reward systems have been around for much longer than games. But I’m more interested in how well they used AJAX.
more
