Web Design with a CSS make excellent mobile shopping for your site

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.

An Example Conversion

Just as each ecommerce website is unique, creating a mobile friendly version of that site will also be somewhat unique. So I thought that, perhaps, the best way to describe a site conversions was to do one.

For this "Web Design Tips," I created a home page for an ecommerce comic book store. This page was created for this demonstration.

First, here is the complete page code from before the conversion.

Here is the style sheet for on-screen display

body {background: url(images/main-background.png) repeat-x; margin-top:0px; font-size:62.5%;}
#wrapper {margin:0 auto; width:800px;}
#access {position: absolute; top:-500px; margin:0; padding:0;}
#header {background: url(images/head-background.png) no-repeat; width:100%; height:256px; overflow:hidden;}
#header img {border: none; position: relative; top:162px; left: 235px;}
#top-nav {position: relative; top: 73px; left: 210px;}
#top-nav li {display: inline; list-style: none; font-size: 1.4em; font-family:Denmark; letter-spacing:1px; font-variant: small-caps; padding-left: 3px;}
#top-nav a {color: #676666; text-decoration:none;}
#top-nav a:hover {color:#e2232b; text-decoration:overline;}
#searchbox {position:relative; top:170px; left: 530px;}
#content p {font-size:1.6em;}
#content li {float: left; display:inline; list-style:none; width: 45%; text-align:center; margin:5px; padding: 10px; border: #ffffff solid 3px;}
#content li:hover {background:#676666; border: #000000 solid 3px;}
#content li:hover h3 {color:#f8a043;}
#content h3 {font-family:Denmark; font-size: 2.6em;}
#price {font-family:Denmark; font-size:2.0em;}
button {margin: 5px; padding: 10px 100px; font-family:Denmark; font-size:1.8em;}
#footer {clear:both; background: url(images/footer-background.png) no-repeat #000000; margin-top:50px; padding: 120px 10px 200px 220px; text-align:center; font-size:1.4em; font-weight:500;}
#footer a {color:#000000; text-decoration: none;}
#footer a:hover {text-decoration:overline; font-weight:900;}
#footer ul {margin:0px; padding:0px;}
#footer li {display:inline; margin: 0px 2px;}

Adding a Mobile-specific CSS

The first step in our conversion process is to add a mobile CSS, linking to it in our HTML and adding a file, which is still blank, to our site hierarchy. In this demonstration, I named the file "handheld.css."

Using the Page Layout As a Guide to Begin Creating Your Mobile Styles

Our goal is to meet the World Wide Web Consortium's standards for mobile browsers, so we'll use that organization's CSS Mobile Profile 2.0 as our guide when determining which selectors or attributes to use. We will also try to keep our page width to 205 pixels, and take steps to limit the total file size of our mobile site.

While our goal is to make most of the changes in the CSS, we will also have to create a couple of mobile-friendly background images. You can watch me do this step-by-step in the video above. Below is the completed "handheld" CSS file.

body {background:#ffffff; margin-top:0px; font-size:62.5%;}

#wrapper {margin:0 auto; width:205px;}

#access {display:none;}

#header {background: url(images/m-head-background.png) no-repeat #60605F; width:100%;  border-bottom: #f8a043 solid 3px;}

#header img {display:none;}

#top-nav {text-align:center;}

#top-nav ul {margin:0px; padding: 2px 0px;}

#top-nav li {display:inline; list-style: none; font-size: 1.2em; font-family:Denmark; font-variant: small-caps; padding-left: 1px;}

#top-nav a {color: #000000; text-decoration:none;}

#top-nav a:hover {color: #f8a043; text-decoration:overline;}

#search {width:120px;}

#searchbox {padding:72px 0px 2px 4px;}

#content {margin:0px; padding:0px;}

#content img {width:100%; padding: 0px;}

#content p {font-size:1.2em;}

#content ul {margin:0px; padding:0px;}

#content li {float:left; display:inline; list-style:none; width:181px; text-align:center; margin:0px; padding: 10px; border: #FFFFFF solid 2px;}

#content li:hover {background:#676666; border: #000000 solid 2px;}

#content li:hover h3 {color:#f8a053;}

#content h3 {font-size:1.6em; font-family:Denmark; margin: 1px 0px;}

#price {font-family:Denmark; font-size:1.4em;}

button {margin:5px; font-family:Denmark; font-size:1.4em;}

#footer {clear:both; color:#FFFFFF; background: #000000; margin-top: 50px; padding: 5px 0px 100px 0px; text-align:center; font-size: 1.2em; font-weight: 500;}

#footer a {color:#FFFFFF; text-decoration:none;}

#footer a:hover {text-decoration:overline; font-weight:900;}

#footer ul {margin:0px; padding:0px;}

#footer li {display:inline; margin:0px 2px;}

#product2 img {display:none;}

#product3 img {display:none;}

#product4 img {display:none;}



An Example of What Can Be Done

This demonstration gave an example of how you might convert your existing ecommerce website to a mobile-friendly store using basic CSS. Every store will have different challenges and tradeoffs to make, but optimizing your site for mobile customers can be done.

[practicalecommerce]

How Can CSS Benefit Website Design For Google?

CSS or Cascading Style Sheets is a stylesheet language that describes the presentation of web documents. Web pages that are written in HTML and XHTML can be styled in many ways by using CSS. In fact CSS allows to separate the stylistic elements of the web page like layout, color and fonts from the content matter like textual paragraphs and images. This is called separation of content from presentation.

Separation of Content from Presentation

The separation improves the accessibility of content on the web pages. Moreover, it provides flexibility and control in the specification of presentation characteristics at the same time reducing complexity and repetition in the structural content.

CSS also allows the web page to be presented in different styles so that it suits different rendering methods. The web content is thus made available in various forms like on-screen, print, voice modes (speech-based browsers and screen readers) etc.

While CSS offers a plethora of benefits on the Internet, a good knowledge of the same is required if you need to employ it for your website. Therefore, to really reap the benefits of CSS and make it work for your online presence, you should invest quality time in learning its nuances.

Why is CSS good for Google?

CSS has a considerable impact on how Google views your website. In fact, you can soar your website's chances to rank well in the Google search results by employing CSS efficiently. CSS has many benefits with respect to Google.

• It shrinks the file sizes on your web pages
• It grants more control over the structure of the web pages
• It allows for certain content information to be hidden by browsers yet be visible to Google crawlers.

Let us understand all these potential benefits in detail:

Smaller File Sizes

Without CSS, all the styles on your web pages require to be supported by appropriate HTML coding. And this bloats up the file size which further adds up on the load time of the website.

CSS takes out the style from the HTML pages and puts into another separate file called the css file. This reduces the amount of code on the web pages. Lesser amount of code means smaller sizes of files and this is something Google prefers in the web pages on the Internet. Ideally, web pages should not be more that 100 kb.

Moreover, smaller file sizes also cause the pages to load quickly. This increases the accessibility and pleases your website visitors.

Increased Control over Web Pages

With CSS, you are able to structure the documents of your web pages as per the HTML standards at the same time retaining the look and feel of the page. Better structure with the same visual appeal is what CSS grants you.

Google prefers well structured web pages that score well on the design aspects too. And CSS allows website designers to do just the same. They can create attractive websites that not only are a treat to look at but also adheres to the standards and guidelines of the web.

Hiding Content from Browsers

With CSS, you can hide bits and chunks of content that you dont want the browser to read yet want Google crawlers to take into account. For example, you may have certain content on your website that you want to appear only on vice versa. CSS makes it possible to camouflage certain text without loosing on the chances of being picked up by Google.

[promotionworld.com]

HTML/CSS/JavaScript is Local Part 1

Basics of CSS web design 1

XHTML, CSS, and JavaScript Roles