Web design is a new frontier in creative designing. It takes a special set of design skills to make an effective web site. A good web site is not just pretty to look at, or filled with a lot of cool Flash animations, it is also easily navigable, with well laid out elements that are not confusing to a person who will visit the site for the first time. more
In the left corner: Tyler Tate’s 1KB CSS Grid, a lean framework sporting 14 classes and the familiar conventions for enforcing a visual grid via CSS.
In the right corner: Vladimir Carrer’s 1-line CSS Grid, an experimental framework sporting a single class to cut nested column widths in half. The solution is mindblowingly brilliant, but does it work? Design tends to work in thirds, not halves. You decide.
Whether or not it’s a coincidence I chanced upon these two extremely simple CSS grid frameworks just days apart, news of these two solutions makes the CSS framework “scene” a lot more interesting. And accessible. I can imagine many front-end developers shying away from heavyweight frameworks because there are too many features, most of which won’t be utilized, and there are too many conventions, most of which aren’t easy to remember.
I’m not even going to get into how using these frameworks leads to unsemantic, presentational class names and lots of <div> soup reminiscent of <table>-based layouts. Let’s just be glad people are streamlining the application of design principles for the Web, namely grid layouts. When a better way comes out—maybe it’ll be display:table, maybe it won’t—we’ll adjust then.
In the meantime, we need to let our arsenal evolve. Balance out the spectrum with lightweight frameworks like these. Then add diversity as well. Look at the Javascript libraries—the tiny moo.fx, the venerable Prototype and Scriptaculous, and the designer darling jQuery—each one caters to a specific need. What other kind of grid frameworks do we need? Fluid? Do-it-yourself? Highly reputable? Unobtrusive? Oh, what will they think of next?
Jeffrey Zeldman’s article, The vanishing personal site, brings to light what many of us have been wondering about in the back of our heads for a while now. Social networks that provide features often found in a personal website captured our fancies and stretched our virtual personas in all directions. That goes for both the knowledgeable and not so knowledgeable in web development.
It’s not really a bad thing, which Zeldman also stresses. The question is, now that you’ve scattered yourself all over the place, how are you going to put yourself back together?
Not that you need to; I’m sure not everyone would be interested in painstakingly picking up the pieces one by one and gluing them together. That’s why FriendFeed became an instant hit. But if you ask me, using another social network to put them all together does not feel good. Not one bit. I’d consider it another convenient (even organic) way to spread my own content. But that’s it. I still dream of the day I manage to tastefully put my stuff together in one place. Like these websites:
Ben Terrett of Noisy Decent Graphics has written a list of things that describe what “his Internet” is like. From an encounter with a technologically-challenged executive comes an inspiring exercise to get everyone on the same page first.
…I thought it might be a nice idea to get everyone to describe ‘their internet’ at the first meeting of any new client. Like they do at school when the new kids arrive mid term. Get everyone up to the same level. That way, everyone would know the ‘level’ of everyone else and there would be no clangers later on.
The list is not only informative, it’s also prescriptive (in a sort of passive-agressive way!). It addresses the little things clients don’t really take into consideration when they describe what they want for their websites. But the thing is, you’re the expert, so grab the opportunity to teach what thoughtful and usable design is. Some of my personal favorites from the list:
You may not agree with everything on Ben’s list, but the idea is not just to yell at your client for “not getting it”, but to explain why you’re doing “it” that way. It strengthens the relationship you have with your client, and ensures clear communication pathways in between.
Starting a web design business might be simple for those already familiar with internet or educated in the field. If you are aware of the requirements involved in web designing, this might turn out to be a profitable business for you. Nowadays almost all sizable businesses require web presence and more people than ever before are paying to get their own sites.
The first step for starting the business will be having your own site. Remember, your site needs to look flawless. It is a direct indication to your future clients of what you are capable of doing. While setting up the establishment for your business, you can use wireless internet routers for connecting several computers in a single network. Learn the things involved in successful web designing by researching. Try to offer additional services like SEO, IM, traffic promotion and search engine submission. You will find that most clients will pay extra for this.
You might also want to learn some fundamental coding technologies necessary for web designing. Be comfortable with HTML, XHTML, PHP and CSS along with Flash, Perl and MySQL. Decide the focus of your business and research the charges your competitors are offering. Always have a business plan and set your financial goals.
Gradually build your portfolio. You may start by designing the site of a friend. Try to work for no-profit organizations such as local clinics and churches that will look nice on your resume and you will be doing something good. Try to establish a partnership with other freelancers such as copywriters, search engine specialists etc. This working together in a group assures jobs landed through indirect associations.
Nowadays it is possible to use templates for web design as it is a tremendous time saver. Try to become a businessperson rather than being happy with freelancing and join the local chamber of commerce to promote your name.
Welcome to hell.
Still on the subject of the dark side of the web: I found a contest for the ugliest website held last June. The winner, which turned out to be mytastynuts.com, won a free redesign package worth $1800. Now this could have been a little more buzzworthy if the contest and company site itself looked like there had been thought put into the design. Heck, if you ask me, the current mytastynuts.com looks better, and don’t really have the right to be doing redesigns.
Of course, there’s really no harm in entering a contest where a free redesign is up for grabs—even if it ends up being not much of an upgrade at all—but that’s the problem with web design: the threshold’s too easy to cross.
The ugliest website contest would also have gone viral if the site were designed in the ugliest manner possible. Something that looks like this (without looking like they’re ripping you off). But that’s the other problem with web design: not everybody “gets” good design.
Okay enough with the pessimism. How do we get rid of said problems? Eliminate ignorance, for starters. Buckets of inspiration from CSS galleries and image bookmarking sites are always good to have, but it’s also important to know exactly what we should avoid.
I recommend grabbing some eyedrops before clicking any of the links below:
The next step is figuring out why said sites are on the list. But that’s for another (ugly) day.
I know rattling off websites in blog posts are a dime a dozen these days and may not be your cup of tea. But you might want to read and bookmark these sites—you’ll definitely keep coming back to them.
It’s a very short list, so you won’t tire easily reading this, and the sites are more like Position is Everything than Smashing Magazine. (No offense intended; I know that SM does a wide variety of blog posts, not just lists and freebies. I just mean they’re more references than resources, okay?)
Web Design+ contains the solutions to common web standards problems. From choosing a DOCTYPE to implementing CSS hacks, this is a great one-stop-shop for the best practices in web design out there. There are a ton of HTML and CSS cheatsheets out there, but reading them shouldn’t stop there. Refine your markup and stylesheets with the help of this site, free!
When can I use… compares support for several web design features according to browser version, from HTML to CSS to SVG to other technologies.
For example: thinking of using CSS3′s rounded corners (border-radius)? It’s not even available on IE8 and Opera 10 yet. Of course, you don’t have to avoid using them just because the conclusion says “not ready”. It’s still a very useful page for recalling which browser version can support what.
On having layout demystifies the concept of Internet Explorer’s hasLayout property. A lot of the IE-related CSS problems that web designers run into are related to hasLayout, so understanding how it works is essential.
The Ultimate Website Launch Checklist helps one go over key aspects of a website once it goes live. It’s more for the designer-webmaster hybrid, but regardless of your role in the process it’s a good view of what needs to be done.
A gallery that only cares about what your site looks like when it’s printed? Ironic, but that’s what printFancy is all about. Remember those niche design inspiration galleries? This site is obviously another example of that. But that’s not all.
Unfortunately, the fact remains that people still print webpages so they can read them in a more comfortable manner; it’s not very environment-friendly, and frankly, weird behavior to people who are in front of the computer 24/7. (Weirder than using IE6.) But it’s a web designer’s responsibility to accommodate that need. No excuses. Even if sometimes, it does feel like creating a whole other website (except if you’re a minimalist, I guess).
And when you manage to create an effective print version of a site, then printFancy is another opportunity to show it off, another incentive to excel in design. Which is not just about creating something looks pretty, but something that fills a need. In this case, the need to print sites out.
(Then maybe the gallery can have a section like this, and one wouldn’t have to hold a laptop the way Jason Santa Maria did.)
I’ve noticed this trend to screenshot tweets instead of copy-pasting their texts in blockquotes for some time now. On web design and technology blogs, no less. You’d think these sites who constantly write articles about HTML, CSS, web standards, usability, semantics would actually listen to their own advice.
What do people get out of doing it, though? Is Twitter really that much of a game-changer that you can now break the conventions of quoting people in articles on websites? Is it really that big of a deal to debate on how you should add tweets to articles—which is so obviously linkbait?
Are tweet pages designed so much prettier than your default blockquote designs that you feel compelled to use them instead (that’s definitely an “unsuccessful designer trend” isn’t it)? Though, consider the construction: large text, a clear indication of who said the tweet, and a fuzzy timestamp. Maybe that’s what blockquotes should aspire to be?
Are tweets such special data forms that you need specialized plugins and scripts like WP Quote, Twickie, QuoteURL to display them? Or do those exist to up one’s geek cred and feed the third-party Twitter apps machine?
Still, those aren’t as bad as web apps like tweetshots. Want to share a tweet on Tumblr? Use the Quote post type. WordPress is getting custom post types in its next major release too. But publishing platform or no publishing platform, that’s what the HTML tag <blockquote> is for.
Let me channel Steve Ballmer and say: Blockquotes, blockquotes, blockquotes, blockquotes, blockquotes. They’re not that hard to use, certainly not more than taking a screenshot and uploading it.
I understand why on some occasions using images instead of text and other data formats is preferred. They’re usually more portable when passed around in email, forums, social networks, and other communication platforms. More people know how to deal with images than URLs too. But for the purpose of quoting tweeple on websites, I see no excuse for displaying text as images.
I’ll spell it out for you in <strong> and <em>: display text as text, not as images, damn it!
Sure, screencapping tweets may not be as grave a sin as using tables for layouts, but back when that was the dominant method of creating websites, it was a pragmatic choice to make do with the technology available. The choice to use images for text is illogical today. It is confusing behavior that is inexplicably linked to Twitter’s success.
Noah Stokes rants about the lack of professionalism in the web design industry. There are several reasons listed, ones involving IE6, Smashing Magazine posts, mentoring, and passion. But this first point got me thinking:
First, stop thinking your client is stupid. Your client is not stupid. I don’t care if they want an all Flash site sized at 800×600 with a dancing unicorn for the navigation. You may laugh at them behind their back, just remember, they laugh at you when OMG, your precious Tweeter is down. We are in the services industry. Get used to it. Your client is your lifeline. Show them the respect they deserve, even if they don’t deserve it.
Admit it: we’ve all mocked our clients and snickered at their choices at some point. A lot of us continue to do so.
There’s a lot to be said about the trials our kind face—dozens of comic strips tell the tale, Dilbert being the most prominent. But when did it become “cool” to act all holier-than-thou over project specifications? What sparked this trend to act like this misunderstood artist, this “chosen one” enduring torturous quests in the epic battle versus this monster of a client? Is it specific to this industry or happening elsewhere too?
Full-time and freelance job opportunities available at Authentic Jobs:
Post a job and reach web professionals everywhere.
*/
