Tag Archives: Design

4 Books For CSS Design

Do you want to learn how to design websites? The best way to learn is probably through books. With a book you don’t have to sit in front of a glowing screen, reading impatiently in “Internet Time” (where everything seems to go to slowly for your liking). You can, instead, read it at your own pace, and you will likely retain more of the information. Also, books will likely have more refined content, as they’ve been fine-tuned over the publication process.

So, without further ado, here are some books that I’ve found to be essential for learning CSS design.

  1. HTML, XHTML, and CSS, Sixth Edition - A great primer/reference for CSS and (X)HTML.
  2. The CSS Anthology – Learn how to make 2/3 column css layouts (fixed and liquid), style forms, create CSS rollovers, and more. The CSS Anthology covers “101 essential tips, tricks, and hacks” that anyone who works with CSS should know.
  3. How to Design and Build the Coolect Web Site in Cyberspace – Though it was written awhile back, when tabular designs were common, this book covers basic things that designers should know about. A great companion to Web Design Expert.
  4. Web Design Expert – In Web Design Expert, Nick Nettleton (author of How to Design and Build the Coolect Web Site in Cyberspace) teaches basic design methods, taking a more informational approach than the prior book, which walks you through creating a website.

Inspire Yourself! 9 CSS Design Galleries

Have you run into a brick wall while designing a new layout? It happens a lot, but there’s an easy remedy. First, head over to Smashing Magazine and look at their design roundups. Still stuck? It’s time too look through some design galleries. There are a lot of them, definitely more than I have here, but here are some of the better known ones, along with some new galleries that I stumbled across.

Those design galleries sure like the term “CSS,” don’t they? Seven out of nine are called “CSS [fill-in-the-blank].” You could probably find a lot of design galleries if you Google inurl:css.

Are We Moving Away From The Traditional Blog Design?

ProBlogger recently had a redesign, taking it further away from the traditional “blog look.” Other blogs, like Ars Technica, have taken a similar approach, looking and acting more like magazines. They’re still blogs, but they don’t scream “I’m a blog!”

Personally, I like both approaches. The magazine look is great for sites that have

  • Several different types of content (i.e. posts, features, video, podcast…)
  • A lot of content
  • Timeless content

With a webzine-type layout, you can have Features and regular, shorter, posts. You can highlight old content on the main page, and you can fit ads into the homepage in different, possibly more effective, ways. You can do a lot of different and innovative things that would be impossible with a standard layout. ProBlogger has certainly done a great job, making use of screen space much better than a traditional blog design would.

Of course, I’m not slamming the traditional design. As you can see, this site is currently styled in a very blog-like manner. That may change sometime in the coming years (not this year, though) once there are more readers and content. WSC is well-suited for a more webzine-like approach, though I’m nowhere near ready for a redesign.

In short, the “normal” blog layout is going anywhere. Sure, the webzine look is becoming more commonplace, but it doesn’t work for every site. If you’re a designer, you should be able to tell which design is better for your site.

How does John Chow make $12,000 a month?

The infamous John Chow makes over $12,000 a month off his blog. His “evil plans” (to quote him) frequently involve link-baiting contests, and had landed him a PageRank of 6. Google got tired of his plots to take over the web (or at least land him a huge pile of links) and demoted him to PageRank 0. Ouch. Several of people have said “I probably rank higher in a search for ‘John Chow’ than John Chow does”…and they would be right.
It hasn’t done much to his earnings however. He’s still going along making piles of cash without Google, thanks to other search engine, and his large reader base.

This brings us to the big question. How’s he making all that dough? If you look at his blog, you won’t see a single AdSense ad (I’ll bet Google banned him from AdSense too…). What’s the secret? Haha, you didn’t think AdSense was the only way to make money online, did you?

Continue reading →

Call For Submissions: The Coolest Web Designs on the Planet

What are your favorite websites (design-wise)? We all want to know.

Here’s how it works:

  • You submit the URLs of websites with cool designs via the contact form (or the post comments). Try to think up a few sites, and submit the URLs in one message (I’d prefer not to get 27 emails per person…).
  • After a week or so, the entire list of links (and image previews) will be posted in a Smashing Magazine-style post. So, I’d recommend using the contact form so as to avoid spoiling the anticipation. ;)

You may submit your own blog, but only if it’s a truly exceptional (and unique) design. So if you use Misty Look or No So Fresh, your site is definitely not eligible. :D

Submit any cool-looking site you’ve seen, and you’re own if it’s designed well. I’ll be adding a few designs to the mix, and exercising editorial control over the submissions (read: filtering out spam submissions). Have fun, and get your entries in (remember: submit them in one batch!).

Design Spotlight: Blogsolid

Blogsolid is a blog about blogging. The tagline “ideas for better blogging” describes the site well.

Their content is good, and their design is amazing. It’s got a great natural/ancient/paper/etc kind of look to it. Though it’s a light-on-dark design, it’s been pulled-off well, and it’s not really that hard on the eyes.

Unlike most blogs, Blogsolid has taken the “Splash-Screen” approach, though I have to admit it’s one of those rare cases where it works (without being annoying). The splash page isn’t done with Flash either, which is a big plus. The splash page adds to the site, and does a great job of setting the tone. Note: Don’t try this at home!

Continue reading →

Design Spotlight: ProBlogDesign.com

Welcome back to Design Spotlight! I know it’s been awhile, but there have been a lot of other things to post about. Today we tackle Pro Blog Design.

ProBlogDesign has a cool, well-designed, template sporting a three-column layout. [Random thought here: We need to come up with a short name for this type of layout. It’s awkward to say “Three-columned layout with the two sidebars positioned to the right.”] The template uses few images, and features interesting positioning.

The logo (featured in 78 Inspirational Logos) sits inline with some useful text links, positioned at opposing ends of the screen. Floating atop some a green-striped background, the logo text is white, but almost metallic, somewhat reminiscent of the current iMac‘s white finish.

Continue reading →

78 Inspirational Logos

Don’t settle for an <h1> tag, put a cool logo at the top of your blog!

If you’re starting a new website, or revamping an existing one, spend a bit of time thinking-out a logo. If your site doesn’t have one, get one as soon as possible. A good logo tells users where they are, and implants your site in their brains. Look at the image below:

The image shows Smashing Magazine with and without it’s logo. I purposefully picked a site with a spartan layout so you wouldn’t be distracted from my point. Which looks more memorable? The bottom or the top? Obviously the top.

Logos are important. Take a look at any business and they’re sure to have a logo (though the cool factor may be lacking). Amazon, CNN, Pizza Hut, etc, they all have logos. Obviously your website shouldn’t be without one. Logo making doesn’t take much work, just Photoshop (and a little experience), some creativity, a little inspiration, and a bit of time.

Photoshop costs $630, so I can’t help you there (sorry). If you don’t have Photoshop and you’re on a budget, you may want to take a look at the much cheaper Photoshop Elements, which can do most of the essentials, though it has a few features stripped-out. Creativity and time are up to you as well, but I can help you with the inspiration bit.

Here are some notable logos. Take a look at them, maybe they’ll give you some ideas.

Continue reading →

Designer’s Block?

There’s writer’s block, but what about designer’s block? I’ve been trying to design a new template for a tech blog, but I’ve been unable to do so. I’ve got a general idea of how I want to lay-out the content and sidebars, but as for the overall look….

Not even design galleries have helped so far. I open up Photoshop to make a mock-up, and a pay around for a little, but I don’t end up with any viable results. I even tried “just having fun with CSS” to see if I’d get anything good. Did I? Not really.

If you have any tips for combating “Designer’s Block,” be sure to post them in the comments.

47 CSS Tutorials, Techniques, and Resources

CSS. Without it the web would look pathetic. If the W3C hadn’t put out the CSS standard, our blogs would look like this, this, or this. Is that scary or what?

Whether you’re a web designer, a PHP coder, or a blogger, it pays to know the ins and outs of CSS and HTML. Even if you’ve memorized the entire CSS Spec documents (unlikely), there’s still more to learn. CSS Maniacs everywhere are coming up with new techniques every day, and it’s a good idea to keep current on the latest methods for dodging around Internet Explorer bugs and building CSS grid layouts. Then you have a constant stream of downloadable utilities (and Firefox extensions) to aid you in your design work.

Well, let’s cut to the chase. Here are a few CSS tutorials, techniques, and resources (in no particular order):

Continue reading →