Category Archives: Web Design

Easy Drop shadows with CSS3 Generator

Posted on by
Reply

css3 generator tool by Randy Jensen

Online CSS3 generator tool by Randy Jensen


One of the most exciting developments in web design is the new rendering power of modern browsers. Web designers can add new instructions to style sheets that produce drop shadows, rounded corners, smooth transitions and other effects — all without the coding burden required before. The latest stylesheet standard — CSS3 — gives you more elegance and visual appeal without the extra code and images used to get these results before.

Get Fast-loading, rich visual effects with CSS3

To use the new design features, all you have to do is know how to write the rules correctly in your stylesheet.

This can be a steep learning curve. So, people like Randy Jensen have jumped in to help us with free tools to test and write the code snippets we need.

Check out the CSS3 Generator at css3generator.com

Jensen gives us a way to select the visual effect we’re looking for, and a form to try out different settings. Using the simple preview area, you can check for the results you want, and then copy and paste the code snippet for your stylesheet.

What a great tool. Whether you’re a professional or a dabbler, this code generator will help you quickly add more elegance and visual appeal to your web design without the bloat of images and bulky instructions.

Other helpful resource for CSS3

Even with the CSS3 generator, you’ll need to check different browsers to make sure the results are ok. Also, you may want to look at the markup from the experts. Chris Coyier is one, at CSS-Tricks.com. His shadow markup includes a rule that isn’t created by the CSS3 Generator. You can find out more here:
CSS-Tricks: a wealth of tutorials and blogs to help you master techniques and use them wisely.

Content Precedes Design: Words Drive Optimal Web Design

Posted on by
2
Web content feeds web design

Content feeds design.

Web design exists to help people grasp and consume specific content.  Blogger Hafiz Rahman reminds us that design’s job is not simply to make any-old content look decent.  Its job is to help people gain the benefit of words, images, products or interactions they seek.

That’s the principle behind the claim “content precedes design.”  It’s also why much-admired Rahman urges designers to give up creating one-size-fits all themes.

Every business owner with a website can gain a lot from this plea to put content first.

Placing priority on substance is a reminder that serves us all very well.  Our love of eye candy can blind us to seeing the real value of our words and ideas to our online success.  Theme developer Jeffrey Zeldman clarifies beautifully:

Content precedes design. Design in the absence of content is not design, it’s decoration.

It’s our message and offer that appeal to our visitors in the first place.  The substance on the page drives the value of our websites.

When you want to make sure your website is doing its best to connect you with your market, first check if you make plain what your people need to know.  When your visitors quickly grasp the most significant benefit, and they have reason to believe you, you are more likely to get what you ask.

A website for a business consultant is going to serve a specific market with specialized information. The look is optimal when easy use of the information drives form. Addressing the needs your target customer brings (not just delighting their eyes) is the key to moving people.

The substance of your page is the true value that pulls in visitors to come and use your website.  The design’s job is to get out of the way.  It starts working when your visitor sees the value in your offer, from the first glance around your page.

Thanks to Themeshaper’s Ian Stewart for calling out Rahman’s case for priority-driven web design.

http://www.wplover.com/2035/on-designing-generic-themes/

Web Design for Social Media Sharing Icons: Huffington Post’s Tidy Approach

Posted on by
Reply
Huffington Posts "glamorous_4", an aptly named css class for a neat group of icons

Huffington Posts "glamorous_4", an aptly named css class for a neat group of icons

Widespread social sharing is the goal (perhaps the dream) of just about every blogger.  We want readers to invite other readers, by sharing our posts on Facebook, Twitter, Digg, StumbleUpon, Google +1, or other favorite social network.  If our goal is to help people with each posted tutorial or tip, there’s no better proof of success than seeing readers pass our information on to their friends.

So in web design, we try to make sharing easy.  We put the buttons and icons for sharing tools in easy reach, and obvious at a glance.   The problem that comes up is the clutter.  How many services should we represent with icons? How many counters?  Should we put them at the top of the post?  The bottom? Both?  What about all the bright colors?  Sometimes the effort to include a generous selection of social sharing icons ends up looking  more like a charm bracelet or a spilled candies than helpful interactive links.

One inspiring solution comes from the Huffington Post.  Instead of stringing their social sharing icons like so many hankies on a clothesline, Huffington’s designer has grouped them in a neat little box off to one side:

I fell in love with this solution as soon as I saw it:  it’s compact, organized, and toned down, so it doesn’t fight with the design or interrupt the visual relationship between the post title and the body of the entry.  But it’s handy enough to be found at a glance.  It’s a compact bale of collected social sharing tools.  The text  simply flows naturally around the bundle like a lazy river. and your eyes do too.

It works so well, you can surround your core 4 with other conversion options:  here on this example above, the mailing list signup form is part of the “social icons bundle.”

Giving readers social icons goes from annoying to elegant; from being a sprawling mess to a composed graphic.  Who else likes this too?