Wednesday, June 30, 2010

Mobile Web Design: Tips and Best Practices

Mobile Web Design Trends For 2009

Web designers know that the industry involves plenty of change, and continuous adaption and development of skills is required in order to stay up to date. In the past few years, one of the biggest areas of change has been the amount of Internet users who are accessing websites via phones and mobile devices. As a result, Web designers have a growing need to be educated in this area and ready to design websites that accommodate this audience.

Because designing websites for mobile devices brings some unique situations and challenges into play, the subject requires a strategic approach from the designer and developer. In this article, we’ll look at the subject as a whole, including current trends, challenges, tips and a showcase of mobile websites. Plenty of helpful resources and articles are also linked to throughout the post, so if you’re interested in learning more about designing for mobiles, you should have plenty of information at your fingertips.

1. Simple options

One of the most intriguing things about mobile websites is the scaled-down options that are available to visitors. The mobile home page of Digg, for example, contains only 10 simple headlines and links, a log-in link and a few very basic navigation options. When it comes to mobile websites, simplicity is key. Because of the lack of space on the screen and Internet connections that are often slower, it’s important for visitors to have access to what is most crucial, and as little else as possible.



2. White space

White space is an important part of any design, and it’s something that’s usually a challenge in Web design because there is a desire to get as much as possible in front of the visitor. White space becomes even more of a necessity in mobile design because the typical screen size is so much smaller. A jumbled website would be very user-unfriendly and very difficult to pull off in the mobile environment.

As you browse through the websites shown in the gallery further down in this article or in real-world scenarios on your own mobile device, you’ll find that many websites include ample white space, especially the ones that are helpful and easy to use.

3. Lack of images

As high-speed Internet connections have become more common in recent years, designers have been able to take more liberties with things like bandwidth-hogging video and images. The average visitor on a desktop or laptop wants to see a visually engaging website, and, as a result, images are heavily used. However, when it comes to mobile design, excessive use of images often does more harm than good.

There is a great variety of speeds of mobile Internet connections and of pricing plans for access. Visitors are more likely to be slowed down or concerned with use of their resources when they’re on a mobile. Additionally, the size of the screens can make many images difficult to see and content harder to read. For these reasons, it’s very common to see minimal use of images in mobile Web design.

In an age of crowded pages, the simplicity of mobile websites can be refreshing. What’s important is there, and what is most likely excess gets cut out. The simple options that a user has can make a mobile website much more usable than it would be otherwise, as long as the options allow for actions the visitor wants to take.



As a growing number of mobile users move to smart phones with larger screens and better connection speeds, more opportunity exists to use images. However, because there is still a large percentage of users who are not using these devices, many mobile websites still avoid images when possible.

4. Sub-domains instead of .mobi or separate domains

When the .mobi top-level domain (TLD) first became available, a lot of buzz surrounded the news. While some websites use .mobi for mobile versions of their websites, it is currently more common to see companies use a sub-domain or a separate folder on their primary domain. There are multiple issues a company must consider when making this decision, but one of the major benefits of using a sub-domain is that it keeps everything on one domain, rather than spreading things out and potentially confusing visitors.

You’ll commonly see mobile versions of websites at such addresses as mobile.example.com, m.example.com, example.com/mobile, example.com/m and other ones along these lines. Some actual examples are m.twitter.com, mobile.washingtonpost.com and netflix.com/mobile/. Of course, there are exceptions to this trend, but as you look at the mobile versions of major websites, you will see more sub-domains than .mobi TLDs.

5. Prioritized content

Because of the simplicity of these pages and the general lack of many options, the content displayed is highly prioritized. One thing you may find surprising when viewing mobile websites is how much of the content is prioritized for the visitor. Of course, all websites should be user-focused, but because most websites are run commercially for business purposes, there are often elements that aren’t necessarily important to visitors, such as banner ads. While advertisements have largely become an accepted part of the Internet, most mobile websites are ad-free. The content available on a mobile website is typically of the highest priority to the average mobile visitor, not the company, although in the end the company benefits by having a more usable website.

You can see an example by looking at the mobile version of The Onion. Like most news websites, TheOnion.com does have ads with its stories (although many are internal ads). The mobile version, however, is ad-free.



Another example of prioritized content and simple options can be seen on Best Buy’s mobile website. The only options here are for a product search and store locator (a phone number is also listed to allow customers to place orders). The logic here is that visitors who are accessing the website on a mobile device are probably on the go and probably have something very specific in mind. Maybe they’re looking for a store close to their current location to buy a product. It’s less likely that a mobile visitor would be interested in simply browsing the website, so the most important options for this visitor are presented, with nothing else to get in the way.



For Website Designing and Development
web designing in hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Common Challenges in Designing for Mobiles

Of course, Web design for mobile devices brings its own unique set of challenges that designers must overcome to create a successful mobile website. If you’ve attempted to design for mobiles, these were probably some of your most significant challenges.

1. Variety of screen sizes

Although Web designers are used to dealing with varying screen sizes and the resulting issues, mobile design presents this challenge in a bit of a different way than dealing with different-sized desktop monitors. Most designers are comfortable with the challenges that arise from various screen resolutions on desktop monitors, but if you haven’t worked with mobile design before, it can be something yet more complicated that you need to overcome.

Because mobile technology is always changing, screen sizes are changing, too. Fortunately for designers, modern mobile devices typically have bigger screens and higher resolutions than those of a few years ago, but of course those older phones are still in use.

While we’re on the topic of mobile screen sizes, there are two excellent articles from April of 2008 at Sender 11: Mobile Screen Size Trends and More on Mobile Screen Size Trends. The results of the study behind these articles show that 240 x 320 (a.k.a. QVGA) should be the standard for mobile development. Many newer mobiles and smart phones have larger screens, but smaller ones are largely a thing of the past.

The graph below shows the findings of the report, which is close to a year old at this point. With the rise in popularity of the iPhone and its competitors, the most recent numbers most likely favor larger screens even more.



2. Lack of understanding

One of the biggest challenges that many designers face is just the intimidation of dealing with a new aspect of design. If you haven’t considered mobile browsers and visitors in your previous design work, it’s most likely not something you feel comfortable doing without some research. Because mobile browsers behave somewhat differently than desktop browsers and because the environment of its users is not the same, the designer needs to gain some understanding and familiarity. Through the information and resources presented in this article, you can easily get started with a general understanding of the mobile Web, if you don’t already have experience.

3. Rapid change

Like any other technology, rapid change is a constant. Of course, Web designers need to stay on top of the industry in general, and the mobile Web is no different. As technology and trends continue to change, the mobile Web will evolve accordingly. The challenge of change isn’t really anything new to designers; the mobile Web just presents another area in which designers need to stay up to date.
4. Testing challenges

One of the most significant challenges in designing for mobiles is the wide variety of phones in use. While designing for desktops brings its own testing challenges, with its various browsers and screen resolutions, there are more dependable ways of testing these items at the moment. On the mobile Web, however, many of your visitors will likely be accessing your website in an environment that you were not specifically able to test.

There are, of course, some things you can do so that a mobile website is tested as well as possible. To start with, the simplicity of mobile websites in a way makes the testing process easier because there is less that can go wrong. With a careful design and some well-planned testing, it’s possible to be fairly certain that a website will be displayed properly and, more importantly, usable on the vast majority of mobile devices.

At the end of this article, you’ll find links to a number of helpful resources for testing, but we’d like to point out a few here as well. First, the Web Developer Toolbar has some very useful features for testing a website for mobile users. Because CSS and images may not be enabled when a mobile visitor is on your website, you can use the toolbar to disable both and see how the website will appear. While this does not exactly replicate the experience of visiting the website in a mobile browser, it can help identify potential problems in the way content and navigation is displayed.

Another helpful testing resource is the Opera browser. In the Opera toolbar, go to “View” and select “Small Screen.” This will display the website in a very narrow window, similar to what would be used on a mobile device. Additionally, you can use the Opera WebDev Toolbar to view an unstyled page by clicking on “Display.” By viewing the page in the small screen with CSS turned off, you can get an idea of how mobile visitors may experience the website. The screenshot below shows the Smashing Magazine front page unstyled in the small window.



5. Deciding on what is essential


If websites are to contain only what is most essential, the website owner or designer will have to determine accurately what content is most important. This may seem pretty simple, but taking a website that’s loaded with content, images and maybe even video, and weeding it down to just the essentials can be quite a challenge. Another aspect to this issue that must be considered is the status of the average mobile visitor. What are they doing? Why are they accessing the website at that time? What are they likely and unlikely to have any interest in? Keep in mind that the goals of mobile visitors are often vastly different than those of visitors sitting at a desk.

Considerations for Mobile Design

Now that we’ve looked at some of the current trends and challenges in designing for mobiles, let’s examine some specific issues that should be considered by designers during the process.

1. Clean, semantic markup

The best thing you can do to lay a solid foundation for a usable mobile website is to incorporate clean and semantic markup. What you may be able to get away with on a traditional website may cause significant problems on a mobile website. Clean markup will help ensure that the browser is capable of properly displaying the website, and it will help give visitors a pleasant experience, with no unnecessary difficulties.

2. Separation of content and presentation with CSS

Alongside clean, semantic markup is the need for the separation of content and presentation. Mobile visitors are much more likely than desktop visitors to see a website with images and CSS disabled. The most important thing for these visitors is to be able to access the content and links: presentation is secondary. A website that uses clean, valid markup, with CSS to separate the presentation from the content, is off to a great start as a mobile website.

3. Alt tags

Because it’s likely that some visitors will not be able to see images on the website (or will choose to disable them), alt tags are extremely important for usability purposes. Of course, alt tags should be used anyway, but it’s even more critical for mobile visitors.

4. Labeling form fields

Like alt tags, form field labels help make a website much more usable for mobile visitors. Imagine trying to use a form without knowing what is supposed to go where. Simple details like alt tags and form field labels can make a big difference this way.

5. Use of headings

With inconsistent and often limited styling of text on mobile browsers, headings become more significant. Mobile browsers are less likely to style text exactly how you would like it to be, but h1, h2, h3 and other such tags generally help make certain text stand out and build the structure of the page from a visitor’s perspective.

6. Avoid floats if possible

Even if a mobile browser correctly displays a website that uses floats for layout, it’s unlikely the website will look good on a small screen. Usually the website will be more usable and look less awkward without floats altogether and with content simply stacked up.

7. Reduce margins and padding

Most likely, your mobile website should have smaller margins and padding than your main website has for traditional visitors. Of course, this depends partly on how much of a margin and padding your website currently has, but very large amounts can make the layout awkward.

8. Pay attention to navigation

Most websites have a primary navigation menu very high on the page. This is helpful on mobile websites as well, but generally, mobile navigation options are scaled down. Provide only the most relevant links, and, if possible, give visitors an easy way to access the other navigation items.

9. Consider Color Contrast

Because mobile screens may not have the same appearance as desktop or laptop monitors, make sure the background and text colors provide adequate contrast so that the content can be read easily.

Sitepoint’s Designing for the Mobile Web

In March of last year, Sitepoint published an article, Designing for the Mobile Web, by Brian Suda, that provides an excellent point of reference on the subject. In the article, Brian breaks down the process of designing for mobiles in seven understandable and digestible steps. The article is useful enough to restate the main points here.


1. Don’t Mix Up Your Markup

For most websites, we can ignore WML and make use of the markup language with which we’re probably much more familiar: XHTML.

2. Know Your Phones
We must cater not only to different screen sizes and resolutions, but to different shapes. From short and long rectangles to tall and skinny ones to perfect squares, the mobile world contains a rich tapestry of variation that almost makes you want to pull your hair out!

3. Target the Right Customers
Traditional website customers are most likely sitting at a desk facing a large monitor that has a decent resolution. Visitors who are browsing your mobile website are unlikely to be in the same circumstances. They may be waiting in line, riding on the train or bus, running to the departure gate or lost in an unfamiliar town late at night and trying to get somewhere.

4. Publish the Bare Minimum
While the concept of having only one website, and simply styling it differently depending on the medium the visitor is using, is popular with many standardistas, a separate mobile website is required to deliver an optimized experience for mobile users.

5. Choose a Great Domain Name
When deciding on a domain name for a mobile website, the colleagues and companies I’ve worked with have always used a sub-domain. Creating a sub-domain is the easiest of the options to set up (you already own the domain), it’s the cheapest option (there’s no need to register the .mobi), and it means you avoid having to spend hours tweaking the server (and potentially messing up normal traffic).

6. Validate Your Markup
Mobile browsers are much less forgiving than desktop browsers. A browser running on a mobile device generally doesn’t have the luxury of a 2 GHz processor and 100 MB of disk space. Therefore, you must check, validate and recheck your markup, time and time again.

7. Test, Test, TEST!
Testing your website with a Web browser on a desktop computer can get you only so far in terms of simulating the mobile experience. There are many elements of mobile device usage that can’t be replicated accurately in this way.

Brian’s article is an excellent starting point for those who are new to designing for mobile devices, and it’s also a great resource to have handy down the road when you want to check your work to make sure you’re doing things the right way.

For Website Designing and Development
website designers Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source : http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/

Tuesday, June 29, 2010

Website Logos

Are you looking for logo designers who will design logos for your business or website? People do a lot of logo design jobs as freelancers. There are many websites offering opportunities for people to work online. If you visit a company website, what will you look at first, or what comes in your sight? When I visit some site, I sure will see the top header, the design and the layout of the website and where is the company logo? Many people look for ease of use, many look for the design, many people look for the functionality of the website and many people almost all of them do get their eyes on the company's logo on the website. It will help the visitors remember your website. So it is important to develop and design some of the most stunning logos for your website, for that you might need some tips, I hope these are helpful.

Well some people think that logo design is just an art work, well they need to correct their views about logo design. It is not just a design; it is the representation of the company. It has to be perfect, if it were some just simple art work its importance would have been "zero". You need to make your logo perfect, which will help identify your company. Use the following tips, these tips are also followed by the experts who do logo design jobs as freelancers:

1. Use of vectors
Well, do not just create jpeg logos; it might not be helpful in the future when you will be changing your logo. Vector designs make the logos variant.

2. Avoid using more than 2 or 3 fonts
In the logo do not use three or four types of font styles. There are thousands fonts available, but you need to select the one that is according to your business. you can create a two font logo, that will be catchy due to its eye-catching contrast.

3. Make it easily readable
Make sure your logo is "readable". By readable I mean that the audience should get the message and remember you. If you use a lot of fonts and styles the visitors will not even bother reading it.

4. Avoid adding photos
In logos there is no place for pictures, it is not the header of your website, it is just a company logo. So avoid the use of pictures.

5. Upside-down
Well it might not appeal to you but, try creating a logo that is just good even if turned upside down.

6. Avoid using and following current trends
Trends are not there for always, your website is! So do not follow the current trends. The design must be perfect that can stay even when the new trends come.
Professionals who do logo design jobs even as freelancers take care of all the above factors.

For Website Designing and Development
website designing hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

For more articles and resources about Website Logos and Jobs visit: Logo Design Jobs.

Article Source: http://EzineArticles.com/?expert=Alberty_Jone_James

Why a Company Redesigns a Website

There are important reasons why a company changes its website's design. It is not just about redesigning because you just feel there is a need to do so. It should be a result of careful site assessment and planning. Any unplanned site fixing could result to not so good most especially when it comes to SEO.

Here are some factors why redesign websites:

When it does not deliver its purpose.

When you have an e-commerce website your main goal is to sell products. Your desire is to generate more sales with your website. If your website does not anymore make sales, a redesign could be a big help. Check your website ROI and assess whether there's a need for website upgrade.

When your company changes business theme

There may be times that your company has to change its business theme. A business theme pertains to an idea in which a company wants to be recognized. A company distributing wheelchairs may wish to sell more products related to health. Thus, a change in business theme is most likely to occur. From wheelchair products to medical supplies. Should this changes happen, your website should also be redesigned accordingly.

Websites are upgraded with technology (browser)

Internet browsers are upgraded from time to time. Your website should catch up with the changes in this technology. There should be no problem when it comes to browser compatibility. Upgrade and redesign can help you on that.

Content, images, graphics should not be static

The Internet is a fast-paced environment. Every now and then changes happen to online resources. So must your website. Your site content should be redesigned into an upgraded version. Content, images and graphics should be the latest.

A good web development company should not only give you a quality website design. It should also highlight the importance of redesign and how it affects in realizing your main goal - profit.

For Website Designing and Development
Website Designing Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Danny_Shawn_White

Sunday, June 27, 2010

Mobile Website Design

More than 25% of mobile phone owners around the world have browsed the Internet via a mobile handset. Market research agencies are speculating that mobile web browsing might become the next dominant Internet platform. For many consumer-driven companies this means that having a WAP friendly website will be a necessity rather than a nice-to-have.

Google, Microsoft and Yahoo! have recognised the potential of this market and are making great efforts to promote mobile commerce to users and advertisers. Most famous brands like Coca-Cola, MTV and Nike now have a mobile portal featuring content designed specifically for handheld devices. Most importantly, though, operators have reduced tariffs and introduced flat-rate plans. This means that an increasing number of your potential customers are using their mobiles to find local businesses, content providers, games and more!

WAP Friendly Mobile Websites

Over 80% of adults and 60% of teens in the UK own mobile phones, and at least 28% of these users have browsed the Internet from their phones. However, a disproportionately low number of consumer-focused websites actually work on WAP enabled handsets.

In order for a site to work on a wireless handset, it must adhere to most website accessibility design guidelines, as set out by the W3C. Mobile handsets use WAP technology to browse the Internet. Because of limited screen size, many WAP browsers strip out CSS, and show text in a method similar to how a search engine spider renders a site.

Principles of Mobile Web Design

1. Websites using tables for layout will not render well on mobile handsets. The site must use CSS for layout

2. The site must be coded using either XHTML or XML

3. Character encoding should be UTF-8

4. Bear in mind different screen sizes of mobile users. The largest screen size available is probably 640 x 480, whereas the average is closer to 120 pixels

5. The most important information of your site must be right at the top of the page as it can be very time-consuming for browsers to read through

6. Text entry can be quite difficult. Users prefer to select values from a list of choices, such as radio buttons or lists

7. Images should be jpeg or gif

8. Always provide a 'back' button or link, since many phones don't include a back button

9. The maximum total page size recommended is 20 kilobytes

10. Remember that your users are paying a lot of money to access your site, so make sure it is definitely worth their money!

Is Your Website WAP Friendly?

A number of online resources provide mobile phone simulations, which enable you to view your website as it appears on standard mobile phone screens. Some of them are listed below:

* Google Mobile Proxy
* Palm OS Emulator - Download
* Windows 2003 based Pocket PC Emulator - Download
* Windows 2003 SE Smartphone Emulator - Download

If your website does not render correctly for mobile phone browsers, you should seriously consider modifying your site to attract the growing population of mobile web savvy users that search, browse, book and buy services and products from their mobile phones. AccuraCast Mobile Search Marketing can help you design and code a WAP friendly website. Contact us on 0800 019 6813 if you would like to target the growing population of mobile Internet users.

Other articles to read:

* Website visitors affect Google search results
* Google search result snippets

SEO Weekly

For Website Designing and Development
web designer in hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705


Source : http://www.accuracast.com/seo-weekly/mobile-web.php

Saturday, June 26, 2010

Create Your Own Website - Dream Weaver Learning Methods

You need to collect much information about the Dreamweaver learning methods to help you finding the best way, so you will understand it quickly. The most common way to find the methods is through the online tutorials. There are many websites offer a tutorial about the Dreamweaver learning process, include the tips and online consultation.

Besides the online tutorials, you should have a book, especially if you are really a beginner. Depend on the version of Dreamweaver you want to learn, you are strongly to choose the appropriate book, so it will not give any difficult. If you choose a different version book with your program, you will find any differences between the book and the software. Usually, there are some terms could be different to use and the function of a certain button.

For some tips of the methods, you can use the built-in tutorials as well as you can explore your own skill. Everyone has own methods on learning process, especially to the Dreamweaver learning. However, this could be ideal ways for most people. You can also need to use the guide and help section that you can find in the program.

To accelerate your Dreamweaver learning, you can join a seminar where you can find the experts. From the seminars, you will be able to find the latest versions that will absolutely make you up to date. It is not only will tell you the new versions but help to get an in depth looked along with the innovative tools.

Besides seminar, you may want to join user groups and attend to Dreamweaver events. You can find several user groups and association events on the official Dreamweaver sites. By following those events, you will easily get a video pod casts with tips and tricks inside it designed by the experts. Although, it is usually provided for the advanced users and professionals, but it is good to know the newest information.

Know more how to create your own website use dreamweaver learning methods in Dreamweaver Learning System, or you can visit db-dp.com.

For Website Designing and Development
Web design Hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Zack_Karepmu

Elements of Well-Designed Websites

A good web site design gives an array of benefits for your business. It is not just about all the graphics and content; colors and functions. More than that, good design web sites work so that your company is well-presented in the corporate environment. A good web site serves as your business alter ego. Your website serves as a mirror for your business. Therefore, it is really important to have a good web site design.

So what are the elements of a well-designed websites?


A website ideal for business, according to experts, should possess both appearance and functionality. Appearance helps create good impression even at a first glance. Functionality helps deliver what users want.

When it comes to 'website look' and 'functionality' you should look at the following areas:

Graphics - see to it that graphics appropriately represents your business. For instance, when it comes to color, blue is said to be a corporate color, green is for environment advocacy.

Images - studies have shown that websites having images are more appealing to readers than pages of plain text. Add appropriate images on your site that best represent your products or service.

Navigation - a well-designed website is easy to navigate. Studies suggest that visitors easily get irritated when they are directed to pages they do not want. Much more when they are landed to 404 (error). Providing a site-map page is a great help for easy navigation. Pages should also be properly organized to avoid canonical problems.

Link - aside from it's bad for search engine optimization, problems on links should be avoided because they drive away potential clients. Avoid sending your visitors to dead pages (404). It is bad for your online reputation.

Alt tags, metas - you should also be working for alt tags for optimization of images you use. Aside from that, optimizing your metas (keywords, description) also helps for search engine spiders easy crawling of pages.

The tasks above are not that complicated and can be done by most of website owners. You may want to try it too. But if you don't want to do it by yourself, you can hire a professional web designer. You can even outsource web design tasks at prices you can afford.

Danny White has been writing for web content for years. He loves to share useful ideas about SEO, Web Design and Development and other Internet marketing tips. He is a member of a web development company that runs the following websites: http://updatemywebsite.org; http://fixwebsite.org/

For Website Designing and Development contact
web designing in hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705


Article Source: http://EzineArticles.com/?expert=Danny_Shawn_White

Choosing the Right CMS For You

I often overhear programmers and computer nerds (term of endearment) debating about which content management system (CMS) is best for an ecommerce project. So, I decided to talk to each of the programmers in our office to get to the bottom of the debate and declare a winner based on my research.

So, here is what we uncovered.

Drupal

Drupal lovers love Drupal... it's really as simple as that. It seems they have so much love for it, that they just can't bring themselves to like anything else. They love the way it supports SSL, multimedia, document management, user management, permission features and much more. The documentation is second-to-none and the add-ons make using it a no-brainer. Possibly the most important aspect - according to one programmer - is that the product manager is easy to use and update. I am not sure if I agree with that, however.

Magento

The newest CMS among the big boys is Magento. It is one of most search engine friendly ecommerce systems and is very robust. While it still needs work, it has many advantages including a high-end shopping cart that provides an extremely professional looking interface. The biggest knock against Magento was that it wasn't content management friendly, but their 1.4 update has an editor. However, the opinions were mixed on just how good the editor is.

Joomla

Joomla was also mentioned as a solid CMS for ecommerce websites. Ease of use was one of the key benefits, which should make life easier for non-technical individuals. Extensions are always being improved and Joomla sites generally upload faster than some of their competitors. The big drawback was that it wasn't as robust as the others, but that was a minor complaint.

Now for the million dollar question... which one is the best for ecommerce? Honestly, it sounds like all of them have their strengths and weaknesses, so it really depends on the client and project. Our in-house computer nerds (ahem, programmers) are experts at developing the above CMS sites along with ExpressionEngine, WordPress and X-Cart.

Established in 2004, TheeDesign Studio is a full-service web design and interactive marketing agency headquartered in Raleigh, NC. Our team specializes in creating business-class websites that incorporate content management, search engine optimization, internet marketing, ecommerce and cutting-edge programming. We take great pride in doing all of our work in-house and providing our clients with world class customer support as our success is directly tied to theirs. For more information, please call (877) 341-8901 or visit http://www.TheeDesign.com.

For Website Designing and Development
web designer in hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Katie_Morrison

Thursday, June 24, 2010

DIV Based Layout with CSS

Most Web page designers use a table-based layout to achieve a coherent and consistent look. There's a different way to achieve the same look. Using CSS and DIV tags reduces markup code, speeds up page downloads, separates content from its visual presentation, and brings your code closer to Web standards compliance--all while making your website more appealing to search engine spiders. Alejandro Gervasio explains how it's done, with copious examples.

Introduction

We see it every day. As we surf the huge network of the Web, we are able to appreciate several page layouts through different websites. They run the gamut from classical but highly effective two and three-column designs, to those exotic and certainly uncommon designs which seem not to fall into a specific category.

For many years, Web designers have been sticking firmly to table-based layouts, achieving coherent and consistent looks by the use of complex table nesting techniques, gif spacers and other well-known design processes. Currently, table layout still continues to have a strong presence on the Web, since it provides wide cross-browser compatibility. Tables are pretty well supported elements for browsers, and that’s an extremely powerful reason to use them for Web page layouts. But this strong compatibility comes with an extra cost. Most of the time, nested tables introduce lots of additional markup, and increase file size, download times and server requests when using graphics as spacers, even if they are cached later.

Extra HTML pushes the important content farther down in the source code, making it less likely that a search spider will give Web pages a high relevance score for the keywords. With the use of CSS and DIV tags, we can achieve the same table-based layout effects, reduce our markup code noticeably, get faster page downloads, and separate content from its visual presentation. We are getting closer to standards-compliant code, and our Web pages are more appealing to search engine spiders.

Now, is everything good about CSS? No, unfortunately. The major drawback with CSS is that browsers don’t display reliably some CSS rules because most of them are not completely compliant with Web standards. Still, the advantages of using CSS and DIV tags for page layout are numerous, and certainly are appealing to many Web designers, as modern browsers add more reliable support.

With the pros and cons in our hands, let’s see the basics of how table design works.

DIV Based Layout with CSS - The table-based approach

One of the most common page layouts using tables is easy to do with the ALIGN attribute. This is a left-hand navigation bar with a larger content section, directly to the right of it, building only two tables.

Here is the code:

<table align=”left” width=”20%” height=”100%”>
<tr>
<td valign=”top”>Navigation links are placed here</td>
</tr>
</table>

<table align=”right” width=”80%” height=”100%”>
<tr>
<td valign=”top”>Main content is placed here</td>
</tr>
</table>

We build this simple two-column layout, placing the tables as mentioned above: one is located to the left and the other is located to the right. The ALIGN attribute helps us to turn complex tables into simpler ones.

We can use this technique with nested tables too, to keep our layout easier to maintain and display, while it’s still quite appealing to search engines spiders.

A note about this: the attributes ALIGN, WIDTH and HEIGHT are deprecated elements in HTML 4.01 (they are marked for deletion in future versions), but they aren’t likely to disappear any time soon. Currently, all browsers recognize these attributes.

From this point on, we could attach an external style sheet that contains all the proper style declarations for each table, continuing to improve the code like this:

<table id=”content” width=”80%” align=”right” height=”100%”>
<tr>
<td valign=”top”>Main content is placed here</td>
</tr>
</table>

<table id=”leftnavigation” width=”20%” height=”100%”>
<tr>
<td valign=”top”>Navigation Links are placed here</td>
</tr>
</table>

The layout is the same as before, but note the ID attribute for each table. Assigning ID contextual selectors from an external style sheet allow us to build the visual appearance for data contained into each table.

So far, this is a simple sample for table-based layout. It can be easily expanded to more complex layouts, adding nested tables techniques and so. However, I would strongly recommend using DIV tags and CSS for page layout, as we shall see in a moment. Trust me.

DIV Based Layout with CSS - The mighty DIV tag

According to the O’Reilly HTML Reference, “the DIV element gives structure and context to any block-level content in the document. Each DIV element becomes a generic block-level container for all content within the required start and end tags.” As we can see, the DIV tag is a powerful generic element well suited for being used as a container within our Web page. This turns it into a good candidate for creating sections or divisions (hence "DIV") of Web documents.

The concept is very intuitive. Instead of using tables as layout elements, we are going to take advantage of DIVS as excellent content containers to build our page layout. In conjunction with several CSS declarations, DIVS based layout are pretty easy to get.

Before we explain any further, two general categories used for Web page design must be clearly differentiated: “fixed” and “liquid" design. When referring to “fixed” design, we are talking about a Web page that has “fixed” dimensions. Widths (and optionally, heights) for each container element are assigned normally in pixels.

The final result of this approach is that Web pages are displayed with a determined “fixed” size, and they don’t “expand” to cover all the space in the computer monitor. Many “big” websites currently use this technique for achieving a consistent look and size across several user screen resolutions.

On the other hand, Web pages built over a “liquid” design principle will display as “elastic” documents, expanding as needed according to different monitor resolutions. Normally, dimensions for any container element are expressed in a percentage. “Liquid design,” when used properly, looks much more professional and takes one step further the definition that conceives a Web page as an “elastic” element, not a desktop document.

With all of these basic concepts out of the way, we will see different approaches for page layouts, depending on whether we follow a “fixed” design or a “liquid” design pattern.

DIV Based Layout with CSS - Fixed layout design with fixed boxes

Now, it’s time to build a basic two-column layout with fixed sizes.

Here is the code for styling our DIVS:

<!--
#header {
background: #0f0;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#content {
background: #fff;
position: absolute;
top: 100px;
left: 150px;
width: 700px;
height: 500px;
}
#footer {
background: #0f0;
position: absolute;
top: 500px;
left: 0px;
width: 800px;
height: 100px;
}
--<
</style<

And here’s the HTML code:

<div id="header"<Header Section</div<
<div id="leftcol"<Left Section</div<
<div id="content"<Content Section</div<
<div id="footer"<Footer Section</div<

The complete code is as follows:

<html<
<head<
<title<TWO-COLUM FIXED LAYOUT WITH FIXED BOXES</title<
<style type="text/css"<
<!--
#header {
background: #0f0;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#content {
background: #fff;
position: absolute;
top: 100px;
left: 150px;
width: 650px;
height: 500px;
}
#footer {
background: #0f0;
position: absolute;
top: 500px;
left: 0px;
width: 800px;
height: 100px;
}
--<
</style<
</head<
<body<
<div id="header"<Header Section</div<
<div id="leftcol"<Left Section</div<
<div id="content"<Content Section</div<
<div id="footer"<Footer Section</div<
</body<
</html>

Let’s see what’s happening here. We have given fixed dimensions and absolute positions to all our DIVS. Widths and heights are expressed in pixels, as well as top and left coordinates.

For the sake of this article, CSS code is within the same Web page, but it should always be attached as an external file. Please remember, separating content from visual presentation is a key concept that makes websites easily maintainable and accessible. The visual output for the code is the following:

DIV Based Layout with CSS - Three-column fixed layout

With little additions to the code, we can easily build a three-column fixed layout. Let’s see how it works:

<style type="text/css">
<!--
#header {
background: #0f0;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#rightcol {
background: #f00;
position: absolute;
top: 100px;
left: 650px;
width: 150px;
height: 500px;
}
#content {
background: #fff;
position: absolute;
top: 100px;
left: 150px;
width: 500px;
height: 500px;
}
#footer {
background: #0f0;
position: absolute;
top: 500px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>

The HTML code is the following:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Right Section</div>
<div id="footer">Footer Section</div>

Here is the complete code:

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FIXED BOXES</title>
<style type="text/css">
<!--
#header {
background: #0f0;
position: absolute;
top: 0px;
left: 0px;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
position: absolute;
top: 100px;
left: 0px;
width: 150px;
height: 500px;
}
#rightcol {
background: #f00;
position: absolute;
left: 650px;
top: 100px;
width: 150px;
height: 500px;
}
#content {
background: #fff;
position: absolute;
top: 100px;
left: 150px;
width: 500px;
height: 500px;
}
#footer {
background: #0f0;
position: absolute;
top: 500px;
left: 0px;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Right Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

Here is the visual output:

As stated above, with minor modifications to the code, we can easily add another column to our existing layout, keeping widths and heights expressed in pixels. These simple examples show clearly that once we have defined our general layout, we are able to add more DIVS into the main containers or other elements, building more complex layouts with little or no effort. In a moment, we’ll see another interesting approach for styling DIVS: floating boxes.

DIV Based Layout with CSS - Fixed layout design with floating boxes

Since we have developed a couple of examples giving absolute positions to each DIV, the next step is building the same schema, this time using the “float” property. Originally, the float property was not intended for building Web page layouts. It’s commonly used to make text float around images or similar page structures. Possible values for float are: left (element floats to left), right (element floats to the right), none (element doesn’t float), and inherit (element inherits from its parent). However, we can apply this property to our DIVS, and get the same effect as with fixed boxes. Let’s see how it works:

<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
float: left;
width: 150px;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 650px;
height: 500px;
}
#footer {
background: #0f0;
clear: both;
width: 800px;
height: 100px;
}
-->
</style>

The corresponding HTML is like this:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>

Again, we present the complete code:

<html>
<head>
<title>TWO-COLUMN FIXED LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
float: left;
width: 150px;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 650px;
height: 500px;
}
#footer {
background: #0f0;
clear: left;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

There is something really interesting going on. We have applied the float property to the “leftcol” DIV, making it float to the left. Then, we made the content DIV float to the left too, sticking the two boxes to each other. The same layout effect has been achieved, making the boxes float. Please note, all absolute position declarations were removed, as well as top and left coordinates properties, so the whole file size has been decreased.

Finally, as to making our footer display correctly, we have “cleared” the float properties previously declared. Pretty good, isn’t it? The visual output is almost identical to that achieved with fixed boxes.

DIV Based Layout with CSS - Adding a right column

As you can guess, with minor additions, we can add a right column to our layout:

<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
float: left;
width: 150px;
height: 500px;
}
#rightcol {
background: #f00;
float: left;
width: 150px;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 500px;
height: 500px;
}
#footer {
background: #0f0;
clear: left;
width: 800px;
height: 100px;
}
-->
</style>

The HTML code is the following:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Left Section</div>
<div id="footer">Footer Section</div>

And, the compete code is listed below:

<html>
<head>
<title>THREE-COLUMN FIXED LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 800px;
height: 100px;
}
#leftcol {
background: #f00;
float: left;
width: 150px;
height: 500px;
}
#rightcol {

background: #f00;
float: left;
width: 150px;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 500px;
height: 500px;
}
#footer {
background: #0f0;
clear: left;
width: 800px;
height: 100px;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="rightcol">Left Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

The visual output is almost the same as for fixed boxes:

In this case, the same principle has been applied to make our DIVS float to left. Since the left section floats to the left, so does the content section and the right section. Actually, all of they are sticking to the left, achieving the desired result. Again, this technique saves code as compared to using fixed boxes.

Lastly, but not least, will see the “Holy Grail” for page layouts: “liquid” design with floating boxes. Let’s go there now.

DIV Based Layout with CSS - Liquid design with floating boxes

Any well-designed Web page must flow properly, expanding the visual content to fit at any screen resolution. The professional look is evident, and extremely elegant, when it’s reached. However, as with everything in life, it has some limitations. These include many user screen options, monitor resolutions, different hardware and so on. Keeping in mind these conditions, “liquid” design is still the definitive way to go for truly professional websites.

Since we are talking about this issue, let’s see some code to get our “liquid” effect done.

<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 100%;
}
#leftcol {
background: #f00;
float: left;
width: 19%;
height: 500px;
}
#content {
background: #fff;
float: right;
width: 80%;
height: 500px;
}
#footer {
background: #0f0;
clear: both;
width: 100%;
}
-->
</style>

And the HTML code is the following:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>

The complete code is listed below:

<html>
<head>
<title>TWO-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 100%;
}
#leftcol {
background: #f00;
float: left;
width: 19%;
height: 500px;
}
#content {
background: #fff;
float: right;
width: 80%;
height: 500px;
}
#footer {
background: #0f0;
clear: both;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

As we see in our new developed layout, there are many noteworthy things to explain in detail. All of the DIVS containers' widths are expressed in percentages, so they will expand to fit the whole screen space. For the sake of this example, we have declared heights in pixels for our DIVS. This is a bad practice! When applied to real world design, DIVS heights will expand accordingly to the content included in them. Sure, this is a well-known subject for experienced designers, but it could be a very important issue to be considered for beginners.

Back to the code, we make our “leftcol” DIV float to the left, and its width is set to 19%. The “content” DIV is floated to the right and its width is set to 80%, covering the remaining space. Header and footer sections widths are set to 100%.

Visual representation for the output is appreciated in the following image:

As depicted above, the containers will expand to fill the screen, filling the complete space, and exposing a very consistent look for different screen resolutions.

DIV Based Layout with CSS - Three-column liquid layout with floating boxes

Finally, we’ll build a three-column liquid layout with floating boxes. Without a doubt, this is the most used layout model on the Web.

Here is the code:

<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 100%;
}
#leftcol {
background: #f00;
float: left;
width: 20%;
height: 500px;
}
#rightcol {
background: #f00;
float: right;
width: 20%;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 59%;
height: 500px;
}
#footer {
background: #0f0;
clear: both;
width: 100%;
}
-->
</style>

The HTML code is as follows:

<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>

The complete code is listed below:

<html>
<head>
<title>THREE-COLUMN LIQUID LAYOUT WITH FLOATING BOXES</title>
<style type="text/css">
<!--
body {
margin: 0px;
padding: 0px;
}
#header {
background: #0f0;
width: 100%;
}
#leftcol {
background: #f00;
float: left;
width: 20%;
height: 500px;
}
#rightcol {
background: #f00;
float: right;
width: 20%;
height: 500px;
}
#content {
background: #fff;
float: left;
width: 59%;
height: 500px;
}
#footer {
background: #0f0;
clear: both;
width: 100%;
}
-->
</style>
</head>
<body>
<div id="header">Header Section</div>
<div id="leftcol">Left Section</div>
<div id="rightcol">Right Section</div>
<div id="content">Content Section</div>
<div id="footer">Footer Section</div>
</body>
</html>

The corresponding visual representation is shown below:

Let’s explain in detail the code for this layout. As in the previous example, we make our “leftcol” DIV float to left and its width is set to 20%. Our “content” DIV is floated to left and its width is set to 59%, while our recently added “rightcol” DIV is floated to the right, and its width is set to 20% too. Header and Footer DIVS are kept to the same width of 100%.

Finally, we have reached our main goal, having a Web page layout that expands nicely, filling the whole screen space flawlessly. The “elastic” concept is well deserved here.

One final consideration is worth noting: since DIVS containers will expand down as we insert more elements into them, sooner or later, we will end up with different heights for each column of the Web page. How can we make them have the same heights? With a little bit of JavaScript, we can achieve the desired result. That will be considered as homework, since it’s out of the scope of this article.

Wrapping Up

As seen on the examples presented here, DIV layout with CSS is a very powerful technique, well-suited to face different design approaches and styles, and a big improvement for our background as Web designers. Web pages are faster to download, avoid useless markup, look more appealing to search engines, and keep us closer to Web standards. There is a lot to gain in migrating from table-based to div-based layout. Just give it a try. Good luck!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Source : http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/

For Website Designing Services hyderabad
Contact : +91 9247457705
email : varadesigns@yahoo.com

Wednesday, June 23, 2010

ADDING SOUND INTO A WEB PAGE

There are two tags for adding sound to your document, Internet Explorer 3.0's <BGSOUND> tag and Netscape's <EMBED> tag. The <BGSOUND> play the background sound from your page. That is when visitor visit your page, the sound will automatically play. Netscape's <EMBED> tag is slightly different, you can use its attribute to select playing sound when the page is loaded or give the users an option to click whether they would like to hear the sound.

HERE IS HOW TO USE AN <EMBED> TAG:

<EMBED SRC=your_file.mid AUTOSTART=true WIDTH=144 HEIGHT=60 LOOP=1>


AUTOSTART=true means automatically play sound when document is loaded. This way, the sound will play as a background sound. You can also set the value to false. The sound will play when the "play" button is clicked.

LOOP=n This tells browser how many times to play sound. n could be an integer, true, or false. Setting LOOP=true, browser will continue playing your sound until the stop button on the console is clicked.

WIDTH and HEIGHT This is how the sound control (console) will be displayed. Setting them as the given numbers, browsers will display a full console. Setting the width=0 and height=2, the console will not displayed by the browsers. Other values that too small will cause the browsers display uncompleted image. You might also hide it by placing HIDDEN=true like this: <EMBED SRC=your_file.mid AUTOSTART=true HIDDEN=true LOOP=1>

It's a good idea to give an alternative to people who using browsers that do not support the embedded sound. Here is what I did on this page:

<embed src="bgsound.mid" hidden="true" autostart="true" loop="1">
<noembed>Your browser doesn't support EMBED, but you can still listen to the background sound of this page by<a href="bgsound.mid"> clicking here.</a></noembed>

Browsers that do not support EMBED will display the link inside <noembed> tag.

Here is how to use <BGSOUND> tag:

<BGSOUND SRC=your_file.mid LOOP=1>

LOOP can be specified as any positive number, infinite, or -1 which equals infinite.

NOW, I WOULD LIKE TO TELL YOU SOMETHING.

The differences of two browsers brought headaches to us. I would like to correct what I described here in last version of this page. You'd better use both <EMBED> and <BGSOUND> tags to make sure that visitors get background sound.

Internet Explorer does not support <EMBED> tag directly, but it does support plugins that installed by Netscape. The users of Internet Explorer 3.0 or higher will hear the sound from <EMBED> if they also have Netscape 3.0 installed in their machine. In this case, If there are both tags in the documents, Explorer take <BGSOUND> tag active but will report the error of cannot playing sound that resides in the <EMBED> tag. This is a disadvantage of putting both tags together.

-----------------------------------------------------
The error tag will be something like:

DEBUG
Unable to start midi
OK

Or

Midi Error
Unable to start playing midi sound
OK
-----------------------------------------------------

Anyway, these boxes are not a big deal, users can click "OK" to process to the next step. I recommend using both tags to make sure that your visitors will surely hear background sound. If you're planning for giving the option for users to click from the sound console to hear sound, you only have one alternative -- using <EMBED> tag.

TIPS FOR PEOPLE WHO INSTALLED NETSCAPE 4.0 ON THE MACHINE THAT HAVE INTERNET EXPLORER INSTALLED:

Netscape 4.0 will disable your plugins installed by its previous version. If you have IE installed in your system, IE will no longer be able to play midi file (in case that IE shared plugins with Netscape). You'd better back up the plugins previously installed by Netscape 3.0 and copy them back to plugins directory. If you have IE installed, you can use those files in IE's plugins directory.

WHAT FILE FORMATS CAN I INCLUDE IN MY PAGES?
The <EMBED> tag plays audio files in WAV, AIFF, AU, and MIDI formats.

1. MIDI (.mid) format give you a high quality of digital sound.
2. WAV (.wav) format was developed for used with Microsoft's Window. You can record .wav using Windows. The sound quality is not as good as MIDI, but the file is smaller.
3. AU (.au) was developed by Sun. The sound quality is poor, but the file is quite small, used for recording short speech.
4. AIFF (.aiff) was developed by Apple for music and high quality sound.
The most popular is MIDI for music and WAV for short message. If you own a PC running Windows, you are ready to plug a microphone and start recording.

For Website Designing and Development
web designing in hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Source : http://www.tips-tricks.com/sound.asp

Make Money Online As a Web Designer

There are a lot of ways on how to make money online especially if you are knowledgeable in building web pages. Web developers and designers are making a fortune building websites for people and companies. If you happen to know how to program HTML, CSS and other web designing platforms, then a web designing career is what you need to have a profitable online business.

Being a web designer can be profitable in two ways. You can either apply for a traditional corporate job as a web developer or you can do it on your own online business as a freelancer. A web designing career in a corporate level is a high paying job but like traditional job, you have a superior that commands you ridiculous things and you have to stay at office for longer hours. Although you are compensated properly, you don't have control of your time which is the most important thing when looking for the most ideal opportunity to earn a living.

While if you base yourself at home working as a freelance web developer, you can earn unlimited income with endless potential plus you work at your comfortable time. Building web pages through freelancing is one of the most ideal job for most people who are capable of building websites.

Every website prices varies on how complicated the job is. It varies on the number of pages, sizes of every page, and the programming work involved. You must meet every bit of requirements of the client to become more popular and have returning customers. Below are the guidelines on a successful web designing career.

Build a promotional website

Before you can acquire clients, you must create your own marketing strategy and a website is the best tool to market your services online. Make a professionally designed website that gives information about the services you offer, prices, contact details and other important information. Website is your best way to have clients worldwide and achieve financial freedom as a web designer.

Market your website properly

Your website is worthless without people knowing it exists. You will never have paying customers if you don't market your website properly. The first thing you should do is to apply SEO on your site to have visitors coming from search engines. Other tools that you can use are social networking sites, directory submission, email marketing, video marketing, forum marketing and traffic exchange programs.

Establish a solid portfolio

Portfolio is your leverage in this kind of business. With the thousands of web developers around the world competing with one another, a good and solid portfolio can define your skills above the rest. Always take proud of your finished products and feature them to your website. This can help clients to know that you are a credible web designer for their project.

Communicate properly
Interaction with your prospect clients plays a significant role in getting more projects. You must always show professionalism during an actual live conversation or even in emails. Always respect the views of the client and you must establish good relationship with them. Remember that communication is one way to market not only your services but also yourself as a whole.

Always meet the client's expectations

Finishing a project with flying colors must be one of your principles. Make sure that the clients website requirements can be achieve before accepting any project. Your client's expectations should be achieved and finished at the right time schedule. You will have more returning clients if they are satisfied with your work.

Being a web designer is a very profitable online business. You could have worldwide earning opportunity with the help of your website. You will have your own time working at the comfort of your home with your family. Along with other work from home jobs, web designing is the most profitable of them all.

Web Designing in Hyderabad
www.varadesigns.com
call : +91 9247457705

Article Source: http://EzineArticles.com/?expert=Noah_Mark_Rodolfo

Tuesday, June 22, 2010

How to Develop Success Criteria for Your Site

Running a website is can be a seemingly pointless and unfulfilling venture if you don’t take the proper steps to ensure advancement.

Today we’ll take a brutally honest look at how you should measure success and develop goals that actually lead to productivity.


Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Great Ideas Pale in Comparison to Execution

Too many entrepreneurs lack even a basic knowledge of the fundamentals of business theory. While there is no recipe that guarantees success, there is a large body of research noting trends of successful businesses.

There are many businesses such as Twitter that explode seemingly overnight without even so much as a profit plan in place, but remember that these are the exceptions and are far from the norm. If you’re starting a website or online business, you can much more realistically expect to have to fight your way up with more than a good idea.

Measuring Success

One of the key ideas for advancement discussed in business schools all over the world is developing a clear image of where you want your business to go. Rather than launching your site and sitting back wondering how much traffic is enough, you should establish clear criteria to measure and evaluate your success (or lack thereof).

This exercise may seem like busy work, but it gives purpose and direction to the vague process of progressing your site forward after the initial launch. Until this point your goal was simply to survive until launch, to overcome the mountain of work, defy all odds and actually get your site live.

After this point, or better yet before this happens, you should have goals in place for what happens next.

Setting Goals

There is a vast amount of literature surrounding the process of settings goals. Let me add to this canon by stating that it’s not as complicated as many of these writers would have you to believe. You don’t need to read 800 pages of aphorisms to discover the keys to setting quality goals, instead, opt for a lot of common sense and a little experience.

Let’s take a look at a few things to keep in mind while setting goals for your site.


Challenging But Attainable


The most obvious observation here is that overly simple goals are pointless. You might get a temporary high for meeting them but it will ultimately lead you nowhere.

More insightful is the knowledge that goals too high in difficulty are equally useless. Setting yourself up for continual failure is not a trend that you want to jump on. Instead, think of some easily attainable goals and then raise the bar until they become difficult while remaining reachable.

This will help you avoid spinning your wheels and instead push you towards advancement. Just make sure that the goal is clear enough that you can easily decide whether or not it has been met. Goals like being “the best you can be” are just useless fluff to make you feel good, find something measurable instead.

Creating Time Tables

Another principle that most professional goal setters will point to 100% of the time is that goals should be time-bound. Setting a goal of 10,000 users per day is meaningless if the “when” part of the equation isn’t factored in.

Without setting a deadline, the curse of “someday” kicks in. You can spend years convincing yourself that you’re on track to meet your goals, but you’re ultimately just rationalizing failure.

Also be wary of setting goals too far in the future. Everyone will tell you that you need a five year plan, but as a small business you can’t reasonably predict where you’ll be in five years. In fact, there are solid arguments for resisting long-term goals altogether.

37Signals discusses this idea in their excellent book Rework. They discuss how being small is labeled a weakness but is in fact a strength. While huge corporations seek to carry out their restrictive and concrete long-term plans, small business can stay flexible in a rapidly changing business environment.

You should therefore opt instead for short-term goals that can have a measurable effect on your bottom line in the near future. And when something happens that makes you think your goals might not be as on target as they once were, change them! Don’t get stuck in a rut because of something you wrote on a whiteboard six months ago, take advantage of opportunities as they arise.
Contingencies

Self-help books will drivel on about staying positive and not discussing failure, but this will only leave you unprepared in the event that you fail to meet a goal. Your goals should be structured like your JavaScript: “if x, then y, else z.” Set a plan of action for attaining your goals. If it works, pat yourself on the back and set new goals, if not change your strategy and/or your goal and try again.

Screw the Status Quo

If you run a website and/or small business, unsolicited advice will rain down on you without end. Everyone has an opinion or axiom to offer regarding how successful businesses are defined, but it’s all bull.

Here’s a secret: If you’re running a business, you get to decide what success means! Common knowledge tells you that you need so many users, so much revenue, etc. but that doesn’t have to be your goal at all.

Avoid measuring success in arbitrary criteria established by someone else. This is perhaps the most important thing to keep in mind when establishing goals. Create goals that you actually have a desire to meet. Ask yourself what you want out of the site. Don’t feel like you have to try to be the next Facebook when what you really want is to build a small community of users that simply love your product.

As an example, take a look at Dribbble. They’ve built a site that doesn’t make sense to anyone but designers, opened it initially to very few people so they could tightly control the content, and even now very selectively issue invites.

As a result, they don’t spend their time clamoring for users. Instead, the half the design world is begging to be invited to the exclusive club.

The point is, blaze your own trail. If you want to start a site to make a billion bucks, go for it, and if you just want to build something free and fun that only a few people will ever use, that’s every bit as valid.

Stats

A big part of leaving the status quo behind is remembering that stats are just one measure of the success of a site. Strangely enough, you can have a million users, half of which are completely unsatisfied. There are enough websites out there shooting for quantity over quality. Consider joining the select few that actually care about what their users think and want.

If you don’t know what your user base wants, here’s a crazy idea: ask them. You can also simply observe their activity and spot trends. Twitter created a dead simple, barebones product that has evolved slowly over time. The company seems to have a knack for letting their users create new features. For instance, ReTweeting was something that the Twitter community came up with all on their own as a way to maintain integrity while sharing content. Twitter noticed its popularity and has now built an official RT system to facilitate an existing trend.

If your users love the site enough, they’ll stick around long-term and become volunteer evangelists for your product. As Apple can attest to, there’s no better advertising than a community of people that love your product so much that they constantly want to tell others about it.

For Website Designing and Development
web development hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9247457705

Source :
http://designshack.co.uk/articles/business-articles/how-to-develop-success-criteria-for-your-site

Monday, June 21, 2010

How to Create a Website Effectively For a More Successful Online Business?

So, you want a website that will capture and express everything to all target visitors and various clients? Do you currently have a website that you think of modifying it this time? Or are you planning to have your ideal website that's pretty unique but will drive endless traffic and generate income through years of great success?

The Website Industry

Over the years, the website industry has fully developed its wide arrays of services and marketing strategies for every business success. What seemed to be a very broad and widely categorized market becomes a single-focused niche these days.

Basically, the field of website design has been divided before into 3 main categories. These are the website promotion and marketing category, the field of graphic design and creative studios for animated presentations and the area of web programming which merely focuses in developing databases for both small and even larger client groups. However, these three categories have now been fused into a single yet complete web solution package through technological advancements.

Your Ideal Website's Business Concept

If you are like some new guys online who might be wondering about the real purpose of a website, perhaps you have to put yourself on the shoes of any business owner to perfectly understand this concept. Well, as a common knowledge, a website exists to represent a business, a personal account or an organization which is usually a non-profit group. The basic underlying idea in web promotion and development is to build a profound site with a remarkable online identity that will satisfy every client's needs. This should give you a special position in your chosen niche which easily breaks the power of competition.

Website creation should be closely associated with all marketing strategies. However, it is even more valuable for any website to have a system of data analysis to improve service or even serve clients and visitors in the best way.

The Great Must-Have Website Features

Every small business owner or even clients should be highly aware of the things that make up a flawless website for a successful business in full gear. Let's take a look at the different characteristics here to be implemented for success.

• It should have a top quality design especially made to saturate the global market through a unique but realistic presentation.

• A highly customized SEO that is skillfully based from individual goals and needs must be strictly incorporated here.

• Current marketing strategies in website design needs to be imposed.

5 Steps For A Powerful and Dynamic Website

If you want to get a systematic and powerful website for greater online success with endless flow of profits and clients, then follow the five-step plan here.

1. Consulting. Seeking professional help is the best way to start your powerful website for various reasons. Every website that needs to be built from a unique and dynamic business comes from a well-planned idea. During this stage, every client's doubts and desires are carefully analyzed and resolved for more realistic and terrific website concepts. Consultation for small or even medium-sized business is usually free of charge.

2. Website Design. After the consulting stage, the professional web developer enhances the client's ideas into a realistic and systematic pattern which is formally known as strategic design.

3. Website Development. This is being done by the creator hive wherein a group of expert developers with specific specializations work together in harmony. This team of experts is usually made up of programmers, graphic artists, technical personnel, database specialists and content writers that systematically collaborate to get all unique ideas into harmonious reality.

4. Web Hosting. Never forget that your website is basically created for unique and productive marketing strategies for success. A reliable and skillful web hosting factor is a great way to help you get hold of your overflowing clients and customers.

5. Website Maintenance. Once your site becomes available to the general audience, it needs regular updates or further developments. Maintaining your website in a regular manner is a crucial task that needs to be accomplished at all times so clients will not have to complain or question about your site content and quality.

Maryrose Malinao is an internet marketer, researcher, teacher and an online supervisor for international services. She loves to share current trends in the online world especially about international business concerns on the road to quick wealth and success for lasting impact.

Article Source: http://EzineArticles.com/?expert=Maryrose_Malinao

Easy Tips For Best Website Design

A website as defined by some popular dictionaries is a page or a collection of various information, videos and images which are all present at one place. Every website has a particular domain name by which it is recognised and a website is always located on some server and always has some internet protocol address.

It is the way you design your website and use various services available to you that people will get attracted to it and will thus visit it more thereby increasing the traffic of your site. Thus if the people stay on your website for a longer period of time, it will definitely meet your objective which is to let more and more people know about you and your brand at the end of the day.

It is your duty to make your website in such a way that people are allured towards it and they want to immediately buy the product which is mentioned there on your website. There are some steps which you should follow if you want to increase the traffic of your website and make the best website design.

In whatever way you design your website, the look and the feel of it should be the same so that it appeals to the users. You should have a particular theme in mind. Whenever you design your store or make any changes, always keep that particular theme in mind. If you are corporate business or a company, design your website in such a way that it reflects the business you are in and your culture.

Do not put too much information on your website and overload it. Rather put only those things which are relevant and let it remain crisp and clean. Let all the people who visit your website connect your business with the overall theme of your website.

The second major rule is to let the people who visit your website know where they are and what they are doing. For that you need to mention and have a small tag at the beginning or the end of the webpage so that the readers know each and every thing about you. What you need to do in short is to make your website user friendly and easy for everyone to operate.

Make the website in such a way that it is easy for people to move around and they find all the links easily. Keep the background of the website simple and business oriented. If you are mentioning something on your website let it be easy for the people to read so that they may want to come back to the site again.

Article Source: http://EzineArticles.com/?expert=Taylor_Rasthi_Dean

Sunday, June 20, 2010

10 CSS Tips For Website Developers

Working with CSS
can be a daunting task. It is a powerful language and once you have considerable expertise of the same, you can craft some great websites. Here are some CSS tips to help you employ its features well.

Browser Compatibility Issues

Browser compatibility is a crucial concern in the field of website development. In order to make sure your website performs well on all browsers and carters equally to all the website visitors, you need to ensure that the layout of the website looks the same across multiple browsers. Different web browsers render web pages in different ways. And that is why your website can look something on one and something different on another. Though the layout is not completely revamped, the placements of certain elements can be altered. This in tuns impacts the layout and causes inconsistencies. When you design your website on a browser and tweak it to perfection, you should note that it may look a little different on other browsers. Therefore make sure you test it across different browsers during the development stages and take constant browser-shots so that you know what the differences are.

Design for Smaller Browser Resolutions

Developers usually work on large computer
monitors to create their websites. However, not all people are as lucky. Only a chunk of Internet population may be using the large screen monitors to access the Internet and view websites. Check your analytics program and see what browser resolutions are used by your visitors to view your website. A website looks very different on 1024X768 resolution than what it looks on 800X600 resolution. Therefore, you should be able to make sure that your website looks good on both the resolutions, small and large. Caveat: The problem with smaller browser resolutions is that images and page elements block one another and cause improper rendering of the pages

Use Frameworks

There are a number of CSS frameworks available on the Internet that helps you make bulletproof layouts that are not only cross browser compatible but also tested well. If you don't need a highly radical solution, CSS frameworks can do the trick.

Use Generic Classes

Instead of naming CSS classes differently each time you develop a website, try making a simple CSS class that can be used repeatedly throughout the design without having to refer back to the previous one. This will make sure that the web design remains constant throughout the whole design.

Validate your HTML

HTML affects CSS. You cannot validate your CSS until and unless you have valid HTML. Moreover, often is the case that HTML causes variations in the website layout and requires to be validated in order for proper rendering.

Validate your CSS

Always make sure you validate your CSS code and eliminate all the errors. This way you can get CSS that is cross browser compatible and that does not break.

Avoid Using Large Background Images

Large images bloat the file size of web pages, we all know that. Therefore, instead of using one large image for your background, use a small one that use CSS to repeat it across the background.

Use CSS Judiciously

CSS is an amazing tool. But that doesn't mean you go paint the town with it. Use CSS only when and where it is the bets solution available. Using it in places where you could have used another light feature would only hamper your website performance.

Avoid Using Inline CSS

Though it is easy to use and great for testing it doesn't work well in the production code. Always keep the HTML and CSS separate.

Use Few Files

Using too many CSS files make it very complex for any changes to be done to the layout. The processing time for files are significantly increased because the browser makes special request for every one of the files.

Source : http://www.hooverwebdesign.com/articles/10-css-tips-for-website-developers.html