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...
Thursday, July 9, 2009
Web Design Tips: Mobilizing Your Site Using CSS
Wednesday, August 20, 2008
Some useful CSS Layout Tips
The most difficult thing in CSS to get right is the layout of your site. Here are a couple of tips dealing just with that.
Tip 1 : Clear out the default padding and margin settings before you start working. Different browsers have different default margins so you want to start with a clean slate, so to speak. Use this command:
*
{
margin: 0;
padding: 0;
border: 0;
}
to clear all margins. Also note the border, which is set to 0. Please note that if you do this, you will also get rid of the pesky purple border round clickable images, although some people argue that the purple border is neccessary for accessibility and usability. But lots of people do not like the purple border round images, and this is one way that you can get rid of it in one fell swoop.
Tip 2 : To center your layout, use a container div to contain all your content. Declare it as follows:
#container
{
margin: 0 auto;
width: xyzpx;
}
There are a couple of points here to take note of. DO NOT declare the width to be 100%. This defeats the whole object since you will just have to declare the sub elements within the container and then center THEM using margin : 0 auto. This is VERY BAD since it means that instead of declaring the central layout once, you will have to declare it in multiple places
Read More Article...
Saturday, July 26, 2008
Website Design Tips - How To Reduce Website Load Time
An important aspect of website design is to reduce web page load time to the lowest possible. A slim trim website design is in some ways like an attractive athletic woman, so let us call this article "A website weight loss programme" that will help you make your web pages load much faster.
Why is it so important to reduce website load time?
A website has global reach but Internet connection speeds in various countries are not the same. A lot of dial-ups and slow broadband connections still exist. Recently published research has revealed that unless massive amounts are spent on improving Internet infrastructure, the average global connection speed may show a dip by 2010. Even for those who do have high-speed connections, the total number of relevant websites on the Internet is growing fast. This directly translates into less time spent by the viewer per web page. Generally speaking, patience is a rare commodity in today's world of reducing resource-to-consumption ratios. Do you want to neglect a large proportion of potential worldwide customers just because your web page load time is slow? If not, then follow the steps below to reduce website load time.
Women usually work on trimming the hips, shaping legs and removing cellulites in various places. Similarly, I have classified below "website weight loss programme" into three 'broad' categories: Graphics, Code and Other Factors. Please note that you should meticulously follow as many steps as you can to take the redundant fat out of your website design and reduce "website loading time" to a bare minimum.
WEBSITE WEIGHT LOSS PROGRAMME
A. TRIM the Graphics (Slim hips:-)
- Avoid Graphic Heavy or Complicated Web Design
Website designs that use many images (especially those with special effects) generally take a long time to load. What if a good looking website keeps loosing valuable visitors just because its web pages take too much loading time? Try to be discrete and use less number of images / graphics while maintaining the look and impact of the website design. Remember that text links are easily read by search engines and load faster than graphic buttons. Sometimes it is also possible to move large images from an important page to a section like "Gallery" to reduce web page load time. - Use Only Optimized Images
Optimize each image in editing software like Photoshop. There are different image formats like GIF, JPEG, PNG, TIFF etc., so try to save images in the appropriate format. As a rule-of-thumb, GIF is more suitable for uniform color images and JPEG for real world scenes. GIF saved at 256 colors should be reduced (as much as possible) to 128, 64 or 32 colors without comprising image quality. To reduce website load time JPEGs should be saved in the lowest quality possible without spoiling picture impact. You can also use PNG if you are sure that your users are using newer browsers. - Specify Image Dimensions
While inserting images in HTML always mention height and width attributes. This helps the web browser to know the image size before loading it. The browser will then reserve the area for the images while rest of the web page design continues to load, thereby reducing website loading time. Do not use the height and width tags for image size reduction. - Pre-load Your Images
You can pre-load some heavy images of the next pages (that can be reached by clicking on links within the current page) by defining them at the footer of the current web page. For example, img src="nextimage" height ="1" width="1" inserts a 1x1 pixel image in the footer that is read by the browser when the code above it has been read. Thereafter, while your visitor is viewing your main page, images of the next page will continue to download to the viewer's PC in the background and will reduce subsequent web page load times. This is not recommended for direct Adwords landing pages because Google has recently announced that high web page load time will negatively impact the landing page quality score. - Optimize Flash Files
Animating important stuff can make an impact on the visitor. If possible, avoid animated GIF images in website designs; instead use Flash with discretion. Always use optimized flash files. There are so many ways to reduce Flash loading time that I will be covering this in a separate article.
B. TRIM the Code (Shapely legs ;-)
- Remove Useless Code:
While using an HTML generator, some extra or empty tags get inserted in the code, for e.g. breaking spaces, block quotes, unnecessary extra space, blank lines etc. Even if you hand-code HTML, always manually check your website design code and remove the empty or unnecessary HTML tags. Use appropriate DOCTYPE and close all HTML markup elements. The browser will then have less work to do matching elements. Clean coding of a web page will not only reduce website load time but also increases your text-to-code ratio and search engine spiders do not have to spend time deciphering irrelevant stuff. - Use of Shorthand External CSS
CSS helps make your website design code compact as well as clean and its proper usage helps reduce website loading time. Define common font styles, images etc. (used in a set of web pages) in one single external CSS. By doing this, you will not have to insert the same tags again and again on different pages - just call the CSS and apply that particular class. With all your repetitive stuff defined in the CSS file, the browser won't have to read each single tag all over again. Always use External CSS file and remember to remove extra, unused styles from it.
Use smaller class names and shorthand CSS instead of putting each CSS attribute in its own line.
For example:
"body{
background: url("image.jpg");
background-color: #cccccc;
background-repeat: repeat-x;
}"
Above code can be written as below when using shorthand CSS:
"body {
background: #cccccc url('image.jpg') repeat-x;
}"
A properly created small external CSS file will substantially reduce website load time. - Use External JavaScript
If you must use JavaScript, merge small common JavaScript files into a single external file and then (for newer browsers) you may compress it. This will reduce website loading time and you don't have to write the script on each web page - the web browser has this file in its cache and won't have to download it each time another web page loads. - For Table Based Website Design
Avoid unnecessary nested and full-page tables. If you insert a table inside another table, it increases web page load time because the browser has to read the content located in the innermost table. Avoid unnecessary nested tables, instead divide your page into different sections like header, body, footer etc. according to your layout and use a different table for each section. Your browser will be able to load your web page a bit faster. - Use Table-less Website Designs
Every time when a website is opened, the browser has to first scan tables and then load the content of the page which increases the website loading time. Using CSS and DIV tags you can avoid tables altogether and reduce website loading time substantially.
C. OTHER factors that reduce website load time (remove the cellulites:-)
- Host on a high-end server with fast connectivity to decrease website loading time.
- If you have a database driven website, it is faster and more secure to place your content on one server and your database on another. Consider SSI for common page elements, AJAX for page refreshes and Jar compressed files that load faster into the temp.
- Avoid background music files and if it is very necessary to use them then use highly compressed music file formats. Avoid having much stuff on your website loading from other websites and reduce the number of HTTP requests.
- Adding a slash at the end of a link like domain.com/contact informs the server that this is a directory page and it does not have to waste time working out what kind of file exists at that address.
- Using fewer redirects, Iframes, PhP and database queries also helps reduce website loading time.
If you have followed the above website weight loss programme and made your website design slim and trim, you will be thrilled every time you see its performance. Remember that quality websites offer a lot of fresh content. When you add new pages, do not forget to apply the above tips to reduce website load time.
Article written by Rajiv Kakar of Centaurhosting.com (Website Design Company India) actively engaged in SEO Services, Web Designing and Web Hosting. He recommends visiting their Web designing Delhi Studio for more information on website design processes.
Article Source: http://EzineArticles.com/?expert=R_Kakar
Sunday, June 22, 2008
How to Design a CSS Web Site for Both Firefox and Internet Explorer
Tips and Tricks to Get Your Site Looking Right in Both Browsers
Designing Web pages is challenging enough without having to build pages that work on every possible combination of Web browser and operating system in existence. So many Web designers choose to take the easy route and design just for the most popular browser, which is IE 6 right now.
But if you're going to focus your site on IE 6 you'll be causing some problems for yourself:
- When IE 7 comes out, your site will need to be redesigned.
- People who use other browsers won't get a good experience.
- If new browsers come out and gain popularity, chances are your site won't be able to support them.
If you design for Web standards then your Web site will be functional with every browser that supports those standards. And even long into the future, your site will stay functional.
But Internet Explorer 6 and 5 are not standards compliant. So what do you do? The common response is to design just for them and then try to force your site to look okay in standards compliant browsers like Firefox, Safari and Opera. But this is both backwards and difficult.
Read More Article...
How to Design a CSS Web Site for Both Firefox and Internet Explorer
Tips and Tricks to Get Your Site Looking Right in Both Browsers
Designing Web pages is challenging enough without having to build pages that work on every possible combination of Web browser and operating system in existence. So many Web designers choose to take the easy route and design just for the most popular browser, which is IE 6 right now.
But if you're going to focus your site on IE 6 you'll be causing some problems for yourself:
- When IE 7 comes out, your site will need to be redesigned.
- People who use other browsers won't get a good experience.
- If new browsers come out and gain popularity, chances are your site won't be able to support them.
If you design for Web standards then your Web site will be functional with every browser that supports those standards. And even long into the future, your site will stay functional.
But Internet Explorer 6 and 5 are not standards compliant. So what do you do? The common response is to design just for them and then try to force your site to look okay in standards compliant browsers like Firefox, Safari and Opera. But this is both backwards and difficult.
Read More Article...
