Web Design Tips: Mobilizing Your Site Using CSS

With a second style sheet and minor changes to a page's HTML, many online stores can offer an excellent mobile shopping experience without creating a second web page or registering a mobile specific domain.

Mobile Internet use is on the rise. And online merchants presumably want to provide customers with the best possible shopping experience. It is for these reasons that many leading ecommerce sites have begun to offer either mobile specific pages (typically a subdomain) or mobile specific styles.

In this "Web Design Tips," I am going to make some suggestions about whether you should build a separate, mobile specific website, and provide a quick example of how you might transform your CSS to create a more mobile-friendly version of your current page.
Should You Build a Separate Mobile Site?

The answer can be either yes or no. Personally, I believe that mobile Internet devices and mobile handsets will soon be as capable of rendering web pages as well as laptops and desktops do now, so that registering a .mobi domain or even building a separate site could be a waste of time.

A better solution might be to redesign your current site so that it is easy to render on multiple platforms. In fact, developing websites that easily migrate among platforms (mobile, desktop, RSS, or more) was the one of the main reasons that CSS was created. Good website design will largely separate content from layout and appearance.

If you do decide that the best way to serve mobile customers is with a mobile-specific site, I will encourage you to use a subdomain rather than a .mobi domain. For example the URL might be http://m.yoursite.com rather than http://yoursite.mobi.

Read More Article...

Web Design Tips: Rounded Borders in CSS

Consumers often judge online stores by visual aesthetics alone, so Internet shopkeepers are wise to use large appealing images, handsome fonts, and occasionally an eye-pleasing curve.

When that curve is added someplace unexpected, say in a border around a text box or an image, it can be especially impactful. In this Web Design Tips, a recurring Practical eCommerce feature, I'll show you how to use CSS alone to bend the corners of your site's border elements. I'll also give you an update on the World Wide Web Consortium's (W3C) border-radius property in CSS3 and discuss browser compatibility—since Microsoft's Internet Explorer trails most other browsers in supporting this property in any form.
Rounded Borders in CSS

As you probably know, CSS stands for cascading style sheets. Basically, CSS are short text documents that serve as a "mechanism for adding style (e.g. fonts, colors, spacing) to web documents," or so said the W3C in its official description of the standard.

For years, designers have been using images or complex JavaScripts to add rounded corners to boxes and borders. But there is a CSS3 property that effective smoothes out otherwise pointed corners, simply and easily. The border-radius properties will round the corners of a border. The available tags are border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius. The border-radius tag will take two lengths.

Read More Article...

Useful tips for writing efficient CSS

Jonathan Snook has posted a few great CSS coding tips in Top CSS Tips. Several of them come down to personal preferences, and it seems my preferences differ a bit from Jonathan’s in some cases, so I thought I’d go through his tips and note my take on each of them.

px for font sizes

Jonathan’s arguments for using px make sense, but I always use em. I’ve learned how to use a combination of percentages and ems and feel comfortable sizing text that way.

CSS declarations on one line

Unlike Jonathan I use a single line for rules that only contain one declaration, but multiple lines for rules with multiple declarations. TextMate’s code folding takes care of the rest for me. Jonathan makes a valid comment about file size savings with single line declarations though.

Blocking the Styles

I do pretty much the same thing: first element declarations, next global classes, and finally the layout containers and sections.

Read More Article...