Thursday, June 30, 2011

Style Sheets

There is a great deal of information on CSS all over the web. Since it’s a reasonably open web development methodology with lots of options this can quickly lead to confusion and frustration.

We are providing you with a basic tutorial of how CSS works and why you might want to start using it. The examples on this site are designed to be lean and mean and easy for you to understand. Feel free to use what you find, all we ask is that you link back to us from your site.

What is CSS?

CSS is short for Cascading Style Sheets. It is a new web page layout method that has been added to HTML to give web developers more control over their design and content layout. Using CSS allows a designer to create a standard set of commands (either embedded inside the web page or from an external page) that controls the style of all subsequent pages.

With CSS you can add style (fonts, colors, spacing, size. links) to web documents. More advanced techniques control the layout of the page without the use of tables or other cumbersome HTML.

The most important thing for web designers to understand about CSS is that CSS separates the layout and the styles of a web page. This is often difficult for comprehend for web designers that are used to compiling their creative and HTML coding in a single web page document.

Styles such as fonts, font sizes, margins, can be specified in one place, then the Web pages feed off this one master list, with the styles cascading throughout the page or an entire site.

What are the benefits of using CSS?

Until recently web page layout was not an exact science. It has been managed by inventive designers who mastered table-based HTML layouts enough to create compelling sites. With CSS all of that has changed as standards are finally being set for the present and future of web design.

CSS is beneficial to the designer because of the afore mentioned control they have over their web site design and how it will be appear across platforms and browsers.

Web sites designed in CSS are faster to change and update. Because the coding is reduced the pages are more efficient and require less bandwidth. Cost saving functions like these are causing businesses to demand CSS from their designers which is forcing less hold-out designers to convert because their clients demand it.

The main benefit to designers and to companies is that CSS speeds the time it takes to develop and update site layouts. Communication is easier among multiple developers because the workflow is standardized.

All in all, CSS is a development method that every designer will be using in the near future, and one that is very beneficial to everyone involved, from the designer through to the end user.

Wednesday, June 29, 2011

Google Analytics Filters

Google analytics is one of the most commonly used web analytics program today. While most of use it how many of us are actually aware of its full potential. This wonderful free analytics platform has got some really good features which if used effectively can provide great insights to marketers and business. Filters in Google Analytics is one such extremely powerful feature. Are you using it ?

Filters in Google analytics is one of the most powerful feature that allows for a lot of customization and manipulation of the data. Filters are applied to the data that is received in a Google Analytics account to manipulate the final data to provide more accurate information. They allow you to include, exclude, search and replace data in addition to the options for creating custom and advanced filters.

In this article we will discuss some of the Filters that you must have, if you are using Google analytics for tracking and website performance.

How to Create a Filter in Google Analytics
You can access the Filters from your Profile Settings page in Google Analytics. Just click “Add Filter” to add a new filter to a profile.

RegEx in Google Analytics
RegEx or Regular Expressions are extremely important when it comes to creating these filters. Regular expressions are special characters that match or capture portions of a field, as well as the rules that govern all characters. You can read in details about the RegEx used in Google Analytics here .

Google Analytics Filter to Exclude Internal Traffic

Every website gets a fair share of internal traffic that is visits by webmasters, marketers and other members of the team who are part of the same business. It is important to exclude this traffic from your analytics data as otherwise you would have an inflated traffic count.

Google analytics provides a predefined filter for this, after you have clicked on the “Add Filter” on Profile Settings page it would take you to the “Create New Filter” page. On that page..

  1. Name for your Filter

  2. Select “Predefined Filter” from the radio buttons

  3. Under Filter Type, select “Exclude” in the First drop down box, “traffic from the IP addresses” in the second drop down and “that are equal to” in the third dropdown.

  4. A box would appear below, where you need to put your / your client’s IP address that you want to exclude

  5. Save Changes and you are done .

Tuesday, June 28, 2011

Some cool tips for Internet Marketers

  1. Location Based Marketing: Its true that we have seen Foursquare, Google Places, Tags, Boost, Facebook Places, Gowalla and innumerable more and this definitely going to grow. With increasing number of people using internet from mobile devices, people would get more comfortable checking into places, merchants would work actively in tapping into this audience by offering coupons, discounts and local offers. I would expect search engines would probably also tap into this data and use this for improving their local search results and location based web search results.


  2. Search & Social – Search is likely to get more and more dependent on social, in other words, search engine algorithms would factor in social media metrics in much more details and these would become crucial functions for your search rankings.


  3. Videos : Videos are going to be one of the most important marketing tools on the web in 2011. We have seen how brands have been increasingly using videos effectively and this is going to get all the more intense. Besides typical video syndication, I would predict live streaming on the web become more frequent and more and more businesses would be using this for effectively reaching out to their target audience. Besides, YouTube, it would be wise to keep our eyes on sites like Daily Motion, Viddler, Vimeo and UStream. Adoption of Universal search has already made videos an easy way to hit the first page of search results for competitive terms and with more brand conscious marketing strategies and the inherent viral nature of videos would make them all the more important in this socially focused web.


  4. Social Commerce: This has also taken off already and is going to get bigger by days! The same reason why word of mouth marketing is immensely powerful, social recommendations are going to be big time influencers in purchase decisions.
    Merchants have always set up shop where people are and in 2011 what better place to set up your shop than the social platforms like Facebook ? Facebook already has a full-fledged ecommerce integration option and it would not be surprising to find other social platforms offering similar facilities and even simpler point and click setup for ecommerce stores within social platforms. The ease of setting up such social ecommerce stores would be a big determinant of the growth of social commerce in 2011.


  5. More Than Your Website: If we look back a few years, we would remember where businesses were just dying to have a website, anyone who had a website had a clear advantage over the ones who didn’t it. Now in 2011, that almost all businesses have a website, what would make the difference? The differentiator would be whether the businesses are present where their customers are, namely, social platforms. It would be equally important for businesses to establish their presence in Twitter, Facebook, YouTube, LinkedIn FourSquare and similar social platforms – having a website is just not enough anymore.


  6. Reputation Management : The wave of reputation management would continue to get bigger. Even smaller businesses would get extremely brand conscious and work actively towards reputation management. This is also likely to give rise to a lot of new businesses who would start offering/ claim specialization in reputation management. From a SEO’s perspective, educated customers are likely to get demanding in ensuring that SEOs are careful about what they do to achieve ranking, so as not to affect the reputation of the brand in any way during the process.


  7. Mobile & Smartphones: Most companies would start considering a mobile strategy very soon. A huge number of users are already accessing internet on their mobile devices – the smart phones and tablets are getting increasingly powerful. Businesses would leave no stones unturned to tap into this audience and mobile apps and advertisement would be the two most effective and popular channels adopted by businesses. The war for establishing your apps in the crowded appstores have already started and it is going to get fierce in 2011. There would be a lot more independent agencies and mobile strategy companies that would start offering app marketing as a stand-alone service.

Monday, June 27, 2011

Add your Blog to Facebook

Many Bloggers don`t know how to add their blog on Facebook. This is the best way!

PUT BLOG LINK IN PROFILE


New applications are being developed everyday. To promote your blog and search for new applications type in the word 'blog' in the search box above the 'Applications' link in the sidebar. Click on the application you want and then click 'Add Application' to set the settings and add it to your profile. There are applications to add a screenshot of your blog as well.

Sunday, June 26, 2011

Facebook Anthem

This song is cool to watch but i am not bored of facebook!! Yet :-)

Enjoy the Facebook song. The Facebook song lyrics is shown in subtitle so you can sing along.

This Facebook song is actually a parody of Billy Joel's "We Didn't Start the Fire"
and the lyrics are really funny !


Saturday, June 25, 2011

SEO for images

"The method also includes searching a collection of keywords including keywords extracted from image text, retrieving an image associated with extracted image text corresponding to one or more of the image search terms, and presenting the image."

Now, once Google gets the ability to extract and read texts from images and with the increasing availability of high speed internet and increasing bandwidth, it would probably reduce the eternal clash between web designers and SEO and the SEO s would definitely be more open to having their headings and other important texts done up in fancy images.

We would also need to see whether this technology would be effective in identifying objects in images without the help of alt attributes or surrounding keywords.

Successful implementation of this technology by Google is sure to initiate a lot of changes in the way WWW works today.

Friday, June 24, 2011

AskEraser of ask.com

When a searcher activates the AskEraser, Ask will stop recording the searchers queries and cookie information. This includes the users IP address, user id, session id and the search query. Ask Eraser facility is available across several Ask.com seach facilities including, images search, video search, blog search, Ask city, Maps and Directions besides the normal websearch on Ask.com

To activate this facility you will need to click the link for AskEraser on the top right of the screen which will ask for your confirmation and once you agree the feature is turned on. To put it off you will need to follow the same process.



Also, as Ask has been using the user's search data in their algorithm, with this new feature in place it is to be seen whether the relevancy of Ask's results get affected.

On the other hand it is also to be seen how the other search engine giants address the increasing concern on user's privacy, especially, now that Ask has already taken the first step to address that.

Thursday, June 23, 2011

10 reasons to fail in blogging

1. Irregularity - This is probably the biggest killer so I put this one first. Irregular posting is a surefire way to kill off your blog. You need to make sure you post on a regular basis so that you’re readers can establish some sort of timescale as to when you will be posting. If it’s once a week… stick to that, if it’s once a day… stick to that. But don’t try take on something you can’t handle so you end up losing interest or not being able to keep up. Something mental like 20 posts a day… you might end up running out of ideas so quick that you could not post for a week. Keep your posting regular!

2. Writing for search engines - Another deadly killer. In-fact, you can still get traffic to your blog obviously if you just write good organic text, but the main point here is it will only ever be that. It will be hard to establish any sort of word of mouth, blog to blog kudos or social following unless you are strongly opinionated or an exceptional writer or both. Make sure you write for your readers, not Google.

3. Lack of effort - This is obviously… well, obvious. But alot of people do it. Sometimes you can start to build some traffic and you think you can just start riding that traffic and you become sloppy. Or sometimes the opposite, you’ll get no traffic so you’ll become annoyed and just do wild or sloppy posts. Make sure you always keep up your post quality to entice your readers and keep your blog a fresh quality source.

4. Not citing sources - Sometimes you can just do this accidentally, you can forget to credit people. Make sure you always give credit when due to make sure nobody thinks you are a content duplicator. Also, if you are a content duplicator… DON’T BE!. It’s one of the most annoying things ever and in the end, will get you nowhere, remember to cite your sources if you ever happen to ‘borrow’ something.

5. Lack of creativity - Try and be as fresh as you can be. Obviously if you are in a saturated market it can be hard to come out with constant fresh posts, but that’s where personality comes in. Don’t be afraid to be yourself and give your opinions in your posts and be as creative as possible, people get fed up of reading the same stuff. Stand out from the crowd by pushing your creative intelligence to the limit.

6. Bad grammar - Generally this wont kill a blog off but I think it can harm the perspective your readers have on you. Good grammar and spelling will help make your blog and you seem more professional so… just use the spellcheck. Is it really that hard?

7. Swearing - I actually swear alot in real life but this isn’t a good thing for a public blog. I mean… it all depends on who your audience is and if you can get away with it but generally I would avoid swearing alot as you could kill off alot of ‘easily offended’ people. Which like it or not, could be good potential readers.

8. Lack of opinion - This is similar to the creativity point but I think it should be said again. Bloggers with strong opinions succeed, why? because there are alot of people who agree with them! obviously there are also alot of people who don’t agree with them. But what do they usually do? argue! which creates? more comments, which creates? better blog! So let your true opinion come out in your posts and don’t worry about who you’re pleasing, there will be enough people out there who agree with you.

9. No marketing - Try and market your blog as best you can. I mean, even if you are absolutely BROKE, no money to market what so ever. Marketing can still be done. Think about it - social networking, forums, friends, viral marketing. There’s lots of ways to get your blog seriously noticed without money and I think your brain can conjure up a smart enough way to do it. So do it!

10. No branding - Another big killer. Without a brand, or something unique, a logo, tagline or something to identify your blog in a unique way. It’s unlikely that you will stand out in people’s mind. As I instantly think of a branded blog I think of Shoemoney because his blog is branded so well, I immediately think of the big S logo. It’s class. Do something to help readers identify your blog and stand out from the saturated, ad covered blogs they come across every other day.

Wednesday, June 22, 2011

Internal Links are important

As a webmaster you would definitely want your visitors to be able to visit every part of your website and for that they need a easy navigation path. Your need to set up your internal links in a way that they guide your visitors in a logical path throughout the website. Though a cool flash menu or an equally atractive Javascript menu might be pretty interesting for some visitors, think about those visitors whose browser do not support scripts or flash - It is most important that you provide a simple HTML links for all your pages.

Besides, this ensures that search engine bots are also able to crawl your site properly. Search Engines hate flash or JavaScripts and they would not crawl the links you set in them. Feed the bots with plain HTML links and your pages will definitely be indexed.

To add to it, if you are using suitable anchor texts to link to relevant pages that adds more value to your internal links. For example, in your site about Widgets, you can have a particular page about Red Widgets - linking to that page using the text "Red Widgets" is much more beneficial compared to using "Widgets1" or "Other Widgets" etc for the anchor text. This helps your visitors to understand where the link leads them to and also the page gets benefit in terms of search engine positioning.

In addition to enhancing the navigation system and facilitating search engines to crawl the site properly, your links can also help to increase your conversion - Yes, Links can affect your sales.

Think of a big retail shop, you have just picked a shirt that you like and have almost made up your mind to buy it but you dont see a salesman anywhere -- you might just consider looking for a few other shirts and in the process forget about the one you thought you would buy :( Yes - this happens in web too !!

If you want to increase your conversion add links stratezically; if there's a page giving small intro about the various products you sell make sure all of them have a link directly to the page that gives details about the products and from there it should have a prominent link to the order page.Make your links attractive and easy to recognize so that more people clicks on it.

Tuesday, June 21, 2011

Search Engines: Introduction

Search Engines are Websites that enables users to search for information on the internet based on the keywords that they provide. Some of these websites gather information from all across the World Wide Web and furnish them to the user in the order of importance and relevance that it assigns each page based on the entered keyword.
Search engines use specialized softwares that take the search term you ask for and deliver a list of web pages that are deemed most relevant to what you search for. Each search engine maintains a huge database of millions of web pages.


Search Engine Optimization

What Is SEO?
SEO: The Acronym for Search Engine Optimization.

Search Engine Optimization is an expression used to describe the process/technique of preparing a webpage/website to enhance its chances of being positioned on the top of the Search Engine Results Pages for a partiucular search query or keyword. The SEO process is undertaken based on the study of various factors and algorithms the different Search Engines employ in order to rank the pages for the query terms.

Monday, June 20, 2011

Top 10 tips of web designing that you should follow


1. Write down your web design ideas on paper. Decide how many pages will be the part of your web site.

2. Check out other websites for references and web design ideas.

3. Decide the languages to be included (Java, CGI etc).

4. Make a good logo and place it on the top of your website. It will help your visitors to recognize you easily.

5. Create an attention-getting Tagline that would catch the interest of people.

6. Include a search box, because without a search box visitors won’t be able to find what they are looking for.

7. Draw the ideal web design layout on a paper that you have in your mind so you can easily alter the elements before going for the real designing.

8. Always remember, don’t put too many images or scripts, as the more things you put in your web design, the more time the web pages will take in loading.

9. Make sure your web design is SEO friendly in order to achieve maximum benefits.

Sunday, June 19, 2011

Top 10 tips to make your design projects more successful

1. Truly Get to Know the Client and Their Customers/Visitors
In order to create a website that maximizes its potential for your client, you’ll first have to get a clear understanding of the client, how they do business, how they brand themselves, and you’ll also need to become familiar with their target market. Depending on your familiarity with the client and their industry, this may require a considerable amount of time and effort. The better understanding you have, the more likely you will be to create a site that meets the needs of the client and their users.
A common mistake, especially for new designers, is to jump right into the design process without dedicating time to getting familiar with the client. This often leads to a site that may look good on the surface, but doesn’t effectively fit the needs and personality of the client.
Different designers have their own methods for getting to know their clients, so do whatever works best for you. Some designers have a standard intake questionare or form that they have clients fill out to get information about their business and their customers. Others meet with clients, discuss and observe. Whatever your process, be sure that you prioritize the need to get to know your clients, and account for this in your estimates and scheduling of projects.
2. Have a Clear Set of Goals for the Project
Some clients will want a website just because it is the thing to do, but they don’t really know what they specifically hope to get out of having a website. Others will want to re-design their existing site because it is outdated or because they don’t like the look anymore, but they may not know exactly what they want to improve about the website. Having goals for the project will help to get a clear determination of what will make the project a success, and it will help to keep the project focused on what is most important.
Take the time to talk to clients about what is most important to them, and together you can establish a few specific goals for the project. It’s best to focus on a small number of things rather than having too many goals and getting distracted by things that are not as important. This process will assist you by getting your clients to think and communicate with you about the most important reasons for going through with the project, and it will give you some methods for measuring the project to gauge its success.
3. Clearly Define the Scope of the Project
A problem that every designer runs into at some point is failing to set boundaries on the scope of a project. Your idea of what is involved in a website design or re-design may not match up with your client’s idea of what should be involved. Disagreements over the scope of the project can lead to clients feeling like they are not getting what they paid for, or you doing more work than you expected when you quoted the project.
The solution to this problem is to have a clearly defined scope from the start, in writing. Be sure that you and the client are in agreement on the scope before starting the project, and get it incorporated into the contract. The details of scope can always be negotiated along with the fees, so there are opportunities to work out differing opinions when trying to secure the work.
If you’re looking for a contract that will help you to have a written record of a project’s scope, we have a web design contract template available at Vandelay Premier.
4. Allow Plenty of Time
Creating an attractive, functional, and effective website takes time. One of the biggest hindrances to the success of a project can be a lack of time. When scheduling your projects be sure that you are allowing enough time to give each project enough attention. Plan some extra time for unexpected challenges or situations that arrive, because things tend to come up.
The amount of time that you’ll need to schedule will vary from one project to the next depending on what is involved, so it will take some practice to get it down, but learn from your mistakes and avoid unrealistic expectations.
One challenge that often arises is being held up on a project because you are waiting on information or decisions from the client. When preparing a timeline and setting deadlines for the project, the deadlines should not only apply to you as the designer. Setting deadlines for clients to get you certain information or to do their part is reasonable and will help to keep things moving forward. If the client doesn’t live up to their end and meet their deadlines, you’ll have a clear example of why the project slowed down if you have trouble meeting a deadline.
5. Focus on the User
It is the users who will ultimately determine the success of a design or re-design project. While we as designers like to create something that meets our own expectations or fits into what we think is a good website, the site is not for us, it’s for the users. If you can keep your focus on the user and work to create the best site possible for them, the project will be successful.
User focus starts with the first point of this article, getting to know and understand them. If you don’t take the time up front to get familiar with your client and their users, it’s difficult or impossible to create a site that focuses on the users’ needs.
6. Know What Actions You Want Visitors to Take
A successful design project will result in visitors taking some kind of action on the site. Depending on the client and the type of website, that action could be purchasing a product, filling out a contact form, opting in to a newsletter, downloading an informational product, or any number of things.
It’s important that you and the client have a clear understanding of what actions from visitors are critical to the success of the website. After you have established which specific actions you want visitors to take, leading visitors to those actions should be a priority throughout the design process. In the end, leading visitors to take the desired action is much more important than having a site that looks great or has a lot of bells and whistles.
7. Communicate with the Client Throughout the Process
Communication between designer and client is a critical aspect of the project for several different reasons. First, in order for the project to be successful the client must be happy with it, and that is very difficult to accomplish if you’re not doing a good job of communicating with the client from the start.
Second, consistent two-way communication helps to improve efficiency and eliminate time for unnecessary revisions and changes.
Third, good communication will keep the client in the loop with what is being done on the project and they’ll feel more comfortable knowing that the project is moving forward. Even when work is being done, if the client isn’t hearing anything they will often assume that nothing is being done. Simple communication can avoid this.
The web design process can be rather overwhelming and intimidating for many clients, and good communication helps to put them at ease. Communication is a skill that most designers continually work on throughout their careers. Learn from your experience and always work on ways to improve how you can communicate with your clients.
8. Incorporate Feedback Throughout the Process
We’ve already talked about the need for communication and to keep clients happy, and a big part of that is incorporating their feedback into the design. Even though you will have made a strong effort to get to know the client and their customers/visitors, the client will still know their target market better than you will, so their feedback can be extremely valuable. Also, their feedback is critical to wind up with an end product that is an accurate representation of their business.
Web apps like Proof HQ and ConceptShare are great resources for helping to organize the feedback the your design projects. Regardless of your methods for gathering feedback, in order to make the project a success you will need to take that feedback and use your professional judgment and design abilities to incorporate what you are hearing from the client. You’ll need to be able to create something that the client is pleased with and that works for the users.
9. Consider the Future
Many websites are continually growing and evolving. When designing the site take the future into consideration and try to get a feel for where the client may like to go with the site in the future. The most successful projects will be well structured so that growth and additions don’t require a re-design too quickly. As new content or products are added to the site, navigational issues sometimes arise, so try to anticipate the challenges that may occur in the future and structure the site in a way that will allow for this growth.
Considering the future is also important in terms of the design style. Avoid trends that are likely to phase out in the near future that will leave the site looking dated and out of touch. A timeless style of design is more valuable to the client in the long run than a trendy design that must be changed a year later.
10. Test
Successful projects must be well tested. Don’t rush the testing stage in order to get the site launched quickly, or the visitors are likely to experience unnecessary issues with the site. An effective testing phase can help to ensure smoother launches and a more positive experience for users.

Saturday, June 18, 2011

Tips for designing an SEO friendly website

Top Tips for Designing an SEO Friendly Website

Keyword Research

Before I even start a website design/build, I establish what the business objectives are. Many businesses will have a clear plan of what they want to achieve in terms of targeting. This may range from targeting the local area, national area or even global.

With this in mind, when designing wire frames, deciding on customer journeys and sitemaps, you can start to build, in addition, pages for content that target these specific keywords based on your findings, or at least have a plan of where these pages may go down the line once the site has launched.

From a design perspective, there is nothing worse than going back to a website six months later and having to change the structure and internal elements for additional content that may be used for SEO purposes. So my advice would be to plan early.

Search Engine Friendly Navigation

Now when I say search engine friendly, I mean a navigational system that the search engines can read and follow. One of the many factors of on-page SEO is the internal linking structure and the navigational system is the backbone for this. Having buttons and links which are text-based is a major plus and great for accessibility.

In my opinion, I would always avoid flash based navigational systems for one simple reason; Google along with the other search engines can’t read text on images. The other thing to consider with this is, as the web moves more and more to mobile devices how many of these will support flash? Apple has already said they won’t support flash elements and even my Blackberry doesn’t do a great job of flash websites. Please don’t think I’m not a lover of flash, because I do like the concept, but from an SEO point-of-view it can be a big barrier, especially with navigations.

Instead of flash, why not use CSS methods or jQuery? These can be just as good if not better, but make sure the load times for these elements are fast.

Also with navigational systems, it’s important to clearly label the links. If a link says "about", it should take the user (and the search engines) to the “about” page. As mentioned above, your internal link structure needs to be good, if not bullet-proof! Another example would be, if you have a page about "restaurants in London", label any links that go to this page from the navigation or other internal links with the anchor text "restaurants in London". Make it clear and descriptive for the search engines, thus adding that little extra internal link juice from a SEO perspective.

Website Load Times

Every so often a big update is done to the search engine algorithms. Normally the news is about Google and a SEO factor that was introduced early 2010 was website load times/speed. I experimented with this and found by speeding up a site in terms of various elements, did have an affect, so much so that a website I experimented on moved up 3 places in Google.

Now when I say various elements, I mean things like:

CSS files – remove unwanted/unused code or place all the code on one line per div/class.
The amount of JavaScript in the code – this can be really slow depending on what you are using it for so I’d advise using it sparsely.
Website image size – see point 4.
File size – remove white spaces and any unessential line breaks in code, keep it streamlined.
Making improvements on the above, will increase speed and generally help with the SEO (not forgetting the user experience).

Website Images

As a golden rule, a website has eight seconds to sell the company and/or products and there is nothing worse than waiting for a website to load, especially large images and backgrounds. As mentioned above, website load time is a factor and the two best tools I have used to reduce image file sizes are Adobe Photoshop and Adobe Fireworks – admittedly Fireworks did the slightly better job, even though it was only a few kilobytes.

Also if the website is an e-commerce site, create smaller images for the galleries. There is nothing worse than waiting for an image to load that is only 200px x 200px on screen that has been re-sized using HTML code – remember speed is now a key factor with SEO and can’t be avoided.

Keyword Placement

So, one of the major factors of SEO is telling Google what the page is about. This is done by writing great “user-focused” content. Within this content it’s important to get the keywords in the right position on the page. Here are the best places:

Title tag
Meta description and keywords
Website slogans
Navigation
Breadcrumb trails
H1, H2 and H3 tags
Bullet points
Alt text
Title attribute on links
The main website copy
Internal links
Footer links
URL’s
File / folder names
One thing to remember with the above is, don’t over-do it. Google has become heavily focused on the user so make sure the content is focused at the user; it will also become link-worthy content.

Add Social Elements

2011 has had a shift in terms of SEO; social is now a contributing factor. Not only is social a good way to demonstrate to potential customers that the company has a voice but social networks like Twitter helps towards good rankings.

It’s crucial with the design of the website that social elements are added in on 2 different levels.

Make it clear that the company is available and contactable on social networks with prominent buttons and icons
Adding the Twitter feed on site can also help with keyword placement, regular updates (you must be a daily user of Twitter) and can also speed up the Google cache rate (i.e. the amount of times Google visits the website and checks for updates).
Friendly URL’s and image filenames

One major thing I have noticed over the past few years is the number of websites that don’t contain friendly URL’s, so an example may be:

http://www.websiteshop.com/products/item1?=20193

A better example for a friendly URL would be:

http://www.websiteshop.com/formula-one/clothing/ferrari-tshirts

As you can see from the two examples, the second option has a good selection of keywords, this will help Google and the other search engines identify what the page is about and having keywords in the URLs is a good SEO method for keyword placement, as mentioned above.

In terms of images, also having an appropriate file name is vital. An example would be women that are looking for a wedding dress – they will more than likely go to Google images to find design ideas. Having an image named "img310.jpg" isn’t going to help with the Google image algorithm. So a better idea would be to have a file name "wedding-dress.jpg" for example.

Sitemaps

Sitemaps are purely designed to tell the search engines about all of the content on the website. This will ensure that the search engine bots find all of the content that may be 2 or 3 folders deep within the website so this content has a good shot at ranking for specific keywords and phrases.

One thing I have noticed with large e-commerce websites without sitemaps is the lack of pages that are indexed in Google. A great example would be an e-commerce site I worked on recently that had a catalogue of over 2,000 products. After conducting research on this, I found that only 500 pages had been indexed in Google. With the introduction of sitemaps, their indexed pages had gone up to 1,500 in 3 weeks – this also increased their exposure in Google. They then started to gain more long tail keyword searches and overall conversions increased off the back of this.

In terms of sitemaps I always recommend to use 4 different sitemaps:

XML
ROR (aka RSS Feed)
URL List
HTML
This give the search engines a variety of choice when it comes to locating all of the pages on site. Another thing to mention would be to include links to all 4 sitemaps on every page of the website (usually in the footer) to help the search engines further, especially with buried content which could be 2 or 3 levels (folders) deep.

Google Web Fonts

Creating visually interesting designs usually consists of using unfriendly web fonts. Creating text elements with an attractive font normally consists of using images as a work around. As mentioned in this post, Google and the other search engines can’t read text which is an image, which in turn could cost you really good real-estate with keyword placement on-page.

Back at the beginning of last year Google opened up a new Font Directory (http://www.google.com/webfonts). So instead of using images for text, you now have a large collection of open source fonts to use on the web completely free!

So in a nutshell, you can keep those super attractive designs with a readable web font, which in turn results in the search engines being able to read the text and use this as a ranking factor.

301 Redirects

Now I’m sure as a designer you have come across the re-design scenario. So, you have finished the design and launched the new website and then all of a sudden, rankings drop!

A great way to combat this, especially if you have restructured the website with new file names or moved content is to use 301 redirects in the .htaccess file.

This does 3 things:

Tells the search engines that the page has moved to a new location and needs re-indexing
Tells the search engines the page has been renamed and needs re-indexing
Any links that were pointing to the old page will now flow through to the new page via the redirect. As links are an imperative part of SEO, you can’t afford to loose these valuable links, thus retaining good rankings.

Prediction: W3C Validation

Over the past 18 months I have blogged about validated websites don’t have an impact on search results. With Google updates such as "caffeine" and "panda" which focus on search quality and user experience, I believe this may become a factor in the future – so I believe its important to look at this area sooner rather than later.

Friday, June 17, 2011

Top Three Fixes to Land That Next Web Development Project

Fix Your Site
Although there’s an old riddle about the barber with the messy hair, it certainly does not apply to web development. Your web presence is often one of the first, if not the first, opportunity you have to showcase your body of work. Thus, you can lose potential clients before ever having the communicate with them directly.

Fix Your Portfolio
You need to include a wide array of sites on your portfolio. Sites for internal departments in companies, sites for small businesses, sites for big businesses, sites for a variety of industries, and sites that even showcase a variety of design concepts you have (artsy, fun, professional, simple, complex, etc.). The wider range you can cover, the better. A client will feel much better when they find a site that matches closely to what they are hoping to have themselves.

Fix Your Sales Pitch
You don’t need a fancy sales team to get the job done. In fact, you’re probably better off without a sales team. A majority of web development projects will have some unique element. These unique elements make it difficult, if not impossible, for a sales person to accurately quote the services that will be needed. Developers should either be your sales people, or always accompany your sales people. Developers can take in a potential clients requirements and ask the right questions to assist both making an accurate quote and the client’s understanding exactly what they want. This becomes a win-win scenario, and improves overall satisfaction of the future transaction of the parties.

Start with these three simple tips, deliver on your promises, and we should have that whole web developer image sorted out in no time.

Thursday, June 16, 2011

7 Tips for Prioritizing Tasks Effectively

Most designers, regardless of whether you are self employed or an employee, have a to-do list full of all kinds of different tasks that are fighting for attention. It may include finalizing a project for one client, working on an estimate for another client, responding to emails, recording payments and working on financials, etc. With so many different things going on and a to-do list that likely includes tasks related to several different projects, knowing how to effectively prioritize can be a real challenge.

Having productivity in your work day is important, but having productivity on the right tasks is what will really lead to a successful use of your time. In this article we’ll look at 7 tips that may be of help to you when struggling with knowing what to work on next.

1. Respect Deadlines

When working for clients the most obvious factor that determines priority and urgency is the deadline. If your project has a deadline approaching or if you are behind the pace to meet a deadline in the future, the work should have some added urgency. Meeting deadlines is an important part of giving your clients a positive experience working with you, and most designers understand the need to use deadlines in prioritizing work.

2. Set Milestone Deadlines

If a client project only has a deadline for completion of the project, make an effort to break down the work that is needed to complete the project and put it into a few different steps or parts. Assign each part with a deadline to hit a certain milestone that will allow you to move on to the next step, and use these self-imposed deadlines to help with prioritizing. This way rather than just seeing the final deadline, which may seem like it is far off into the future, you’ll have a clear understanding of the smaller steps involved in the project and what you need to do now in order to stay on pace.
These milestone deadlines that you set for yourself may not even need to be shared with the client, they can be used just to help you stay on track and to view the big picture of the project. Staying on pace with a project can also have an impact on everything else that you are working on. If one project gets off track you may need to dedicate extra time to getting caught up, which of course takes time away from your other projects. So staying on course will allow you to prioritize effectively, rather than being forced to dedicate your time to certain things because you’re behind.

3. Consider the Consequences

Most likely there will be times where you’re not sure how you’re going to be able to get everything done. If you have several different things that are pressing for your attention and you’re not sure how to prioritize, consider the consequences of not getting the work done or not meeting the deadline. Chances are, there will be much different consequences from one task to the next.
For example, you may have a client project that would be disastrous if you can’t meet the deadline. Maybe the client has other things, such as a marketing campaign, that are dependant upon you getting your work done by a specific date. On the other hand, you may have a client project that has an upcoming deadline, but there really are no significant consequences if it falls a little behind schedule.
Another factor to consider is your relationship with the client. If it’s a client that you have worked with for a while and have always met deadlines, they may be more understanding if you’re struggling to meet a deadline (depending on the situation). Or you may have a situation where you’re working with a new client and hoping to get more work or referrals in the future from this client. In this case, your relationship with the client may be important enough to shuffle things around to get the work done.

4. Consider Payment Terms

You’ll also want to take into consideration the impact that a task will have on getting paid. You may have a project where you will be paid at various milestones throughout the project. If you are just a small step away from reaching one of those milestones you may want to give added priority to getting it done and getting paid.
Likewise, there may be a situation where a client has already paid for your services and you just need to complete the work. Completing this client’s work may take priority since they have already paid for your time.
If you’re a freelancer you’ll always need to be considering your cash flow situation. So taking into consideration the situation with money and how/when payment will be made will help you to know what you need to be working on to keep your business functioning smoothly.

5. Consider Time Required

There may be times when you have two or more equally urgent tasks that are competing for your attention. However, although they are equally urgent they may not require the same amount of time to complete. My preference is to prioritize the tasks that will take less time to complete so that I can get it crossed off my list and be able to focus more effectively on the remaining tasks.

6. Set Monthly Goals and Work Backwards

Setting goals can be very helpful for determining what needs to go on your to-do list. This process is made a little bit easier if you take a look at the big picture before setting your to-do list for a particular day. Try starting with monthly goals of what needs to be done. Then look at the specific actions or tasks that need to be done in order to reach this goal. For the first week of the month take the most urgent actions, those with deadlines and those that are foundational for other tasks, and put them onto a to-do list for the week. Then you can plan your week more effectively by splitting them up and setting certain things that need to get done each day.
This can be a much more effective way of prioritizing tasks than simply trying to decide what to work on for a particular day without really giving much though to the big picture. With weekly and monthly to-do lists in addition to a daily list you’ll be able to see how each task impacts the other things on your list, and priorities tend to clearly emerge.

7. Schedule a Percentage of Your Time for Personal Projects

There are other tasks that are important aside from just working on client projects. Things like working through tutorials, reading a book on a topic that you’d like to learn more about, re-designing your portfolio site, maintaining a blog, etc. often get pushed to the back burner because they don’t seem to have the same urgency as other things on your to-do list. In the long run though, these types of personal projects and opportunities for development or improvement are very important.
The best way to make sure that you get time to work on these things is to prioritize them by setting aside time in your schedule. You can decide that you’ll dedicate 10% of your time (or some other amount) to working on projects like this, and set aside time each week to do something for your own improvement. If you don’t set aside the time, most likely you won’t get around to it since other things will always come up.

Wednesday, June 15, 2011

How to make your site mobile friendly?

Start with the basics

If you begin with standards-based HTML that is formatted with logical, semantic markup, you’re ahead of the game already. A well structured document with clear organization and semantic markup will display cleanly, be usable, and be accessible on any device – mobiles included. Using CSS to separate content from presentation means your content will be accessible, even on the least capable mobile device. Pay attention to other basics as well. For example, good alternative text is an essential for any non-text element in your pages. Make sure that form fields are properly labeled.

Clean, semantic markup is crucial when you consider the variety found in mobile devices. Some phones may only understand WAP. More capable phones may understand WAP2, which opens them up to rendering websites with XHTML and CSS. Some devices may display only monochromatic screen colors, while others may have full color. Some devices support CSS, some do not. Some only understand HTML 3.2, while others understand XHTML. Some devices undertand tables, floats, frames, JavaScript, and dynamic menus, but many do not. Most devices don’t support cookies. Devices at the high end of the mobile market such as BlackBerry, Palm, or the upcoming iPhone are highly capable and support nearly as much as a standard computer.

All those possibilities are enough to make you long for the days when the browser wars meant coding for Internet Explorer 4 or Netscape Navigator 4! But we have two things now that we didn’t have in the bad old days: a large body of knowledge about how to write standards-based HTML and XHTML using semantic markup and about how to separate content from presentation with CSS. If you stick to best practices in those two areas, the need to worry about every single rendering possibility from mobile devices diminishes and you can develop with confidence.

Testing your site

None of the free or fee-based testing options can equal the testing results you get with an actual device. I recommend testing with real mobile devices much as possible, but I know it isn’t feasible to run out and buy every single mobile device. There are some fairly reliable ways to test your site without going to that extreme. Some of the testing techniques are free, some are not. First, let’s look at the free options.

Opera provides two good testing tools. Using the standard Opera browser, select View > Small Screen to see your page rendered in an approximation of what a mobile screen might display. The Opera web developer bar has a button called Display that allows you to toggle CSS on or off when viewing a page using small screen view. Here you see two Opera small screen views of my blog, Web Teacher, first with CSS, then without.

As you can see, Opera renders the images in small screen view. (We’ll talk more about images later.) Note that the small screen view renders the content in source order, that is, the order in which the elements appear in the HTML. Elements are clearly distinguishable from a semantic viewpoint: headings, links, paragraphs, blockquotes. The organizational and semantic underpinnings hold up so that the content is readable and useable. This is especially easy to see in the second screen shot, with the CSS toggled off. Keep in mind that neither of the displays in the previous two screen captures are influenced by a handheld CSS media type stylesheet. When a heldheld CSS stylesheet is present, Opera’s small screen view will take it into account. More about this in a bit.

Opera provides a free browser that can be downloaded and installed on handheld devices. It’s called Opera Mini. (You can purchase Opera Mobile for even more capability.) Both are available at opera.com. Since Opera is in the business of providing browsers for mobiles, the company made a helpful online mobile simulator at operamini.com/demo. Here, you can load a page into the Mini Demo and operate it with mouse or keyboard as if it were a real mobile phone. The screen capture shows that the Mini Demo renders images and CSS. Again, there is no handheld CSS media type stylesheet affecting this rendering.

Another free way to test your site for clear structure, organization, and proper semantics is with Firefox’s Web Developer extension. Use this tool to disable images, JavaScript, and CSS and you’ll have a good idea about whether your content is going to make sense and be navigable in one of older and less capable mobile phones.

Here’s a Firefox screen capture. For this, the Web Developer Toolbar was used to disable all CSS, all JavaScript, and all images.

Viewing the page without images and with no functioning JavaScipt is very useful in terms of testing for older mobile devices. Keep in mind that some of the less capable mobile devices don’t render tables. None of them understand frames. Seeing your site this way really drives home the importance of standards-driven, semantic markup.

Using specific emulators

Some of the phone and PDA manufacturers have emulators on their sites that you can download and use for testing. Depending on your target audience, testing on a specific emulator might be helpful. If you are interested in specific device or manufacturer, check their site for developer resources.

Testing CSS Handheld media stylesheets

An important tool in the Firefox Web Developer Toolbar is CSS > View CSS by Media Type > Handheld. If you look at Web Teacher in a standard monitor, you see that it is a simple two column layout using a left float for the content div and a large margin-left to create the sidebar as a second column. I’ll add a stylesheet for handheld media to the testing mix. It contains only two rules รข€” to reset the sizes of the content div and sidebar div and to remove the float. Here’s the entire stylesheet:

#content {
float: none;
width: 95%;
}
#sidebar {
width: 90%;
margin-left: 5%;
}

The link to this stylesheet was added to the document head after the all media stylesheet, so as to be last in the cascade. I’ll use a link element for this. For those mobiles that do understand CSS, using link is more reliable than using @import for bringing in styles, although some of the more capable devices understand @import.Here’s the link element:

Media types are mutually exclusive. A user agent can only support one media type when rendering a document. If I want to retain any of my existing styles in a handheld display, I need to take one more step, and that is to list all the media types I want my existing styles to apply to in a comma separated list. I change the link element for my existing stylesheet, which is called 2col.css to include this media attribute:media="handheld,all". The two link elements are now:

The styles and the color scheme I have in 2col.css should also apply to handheld renderings, but the two column layout will be removed by the mobile.css rules.

Testing with the Firefox Web Developer Toolbar menu CSS > View CSS by Media Type > Handheld should now show handheld media results, and it does.

The first screen capture shows the two column layout, as it normally displays with the all media stylesheet. The second shows Firefox using the handheld media view.

From the second screen capture, you can see that Firefox has expanded the content div to 95%, according to the mobile.css rules. If you scrolled down the page past the content div, you would find the sidebar div now displays at 90% width after the content div. Note in the second screen capture, that styles from 2col.css such as the presentation of the list under the title image and the background gradient behind the headings are retained because of the handheld media designation in that stylesheet.

You may not want to retain any of your all media styles in the handheld CSS rules, as in this example. Keeping the background images, for example, results in longer page load times. Since many wireless mobile devices load very slowly, you want to really simplify things for handhelds. In that case, simply leave the handheld media attribute out of your main stylesheet. I’ll give you more tips for simplifying things for handheld media shortly.

Testing with subscription services or with software

The testing tools I just mentioned are all free. There are other options that are not free, but you might find them helpful and worth the expense. Browser Cam, where you can test your sites in all sorts of browsers, has added a testing area called Device Cam. Here you can test a page in a smattering of Windows Mobile-based PDAs and several BlackBerry versions. Here’s a screen capture of the test page in a Device Cam rendering of a BlackBerry. Note the strong resemblance to what you saw previously in Opera’s small screen view when the CSS was toggled off.

A brand new option for owners of Adobe’s latest CS3 software is Adobe’s Device Central. Device Central uses skins for dozens of mobile devices to display your content in various ways. Here’s a rendering of the test page in a Nokia 7390 skin.

Device Central can load a live URL or a file from many of the Adobe CS3 applications. It responds to the presence of a stylesheet of the handheld media type when the page is rendered using Opera’s small screen view. Using the Opera small screen view is an option with each of the skins in Device Central. Deselecting the option to view the rendering with Opera’s small screen view in Device Central rendered this page as two columns, in spite of the presence of the handheld stylesheet rules meant to eliminate that.

Tips for handheld CSS

Handheld media stylesheets can be more extensive than the two rule example I showed you previously. A few more rules would certainly benefit Web Teacher, but keep in mind that handheld stylesheets should be as small and compact as possible because of download time.

What can you do to simplify your site and make it more usable in mobiles? First, eliminate some of these problematic items from mobile display.ups or pop out menus in favor of plain old HTML and simple text menus
  • Eliminate decorative images that slow down the loading process. Use display:noneto remove anything that isn’t absolutely necessary, such as links to external resources. Remember, however, that devices that don’t understand CSS won’t do anything with display: none. Any essential images need to be reworked for the small screen and the width and height attributes need to be included in the HTML.

  • Eliminate nested tables and layout tables. If you have tabular data, consider finding a way to present it in a linearized alternate display.

  • Once you’ve simplified through elimination, start building the rules you need to add. Consider these ideas.
    • If you’re not already using relative measures, switch to ems or percentages rather than pixels
    • Reduce margins, paddings and borders to suit the small screen
    • Use smaller font sizes for headings and paragraph text
    • If you have a long navigation list at the start of the page, add a skip to main content link, or move the links to the end of document flow. Keep the number of clicks required to get to content as minimal as humanly possible. Without a mouse or keyboard, most mobile users have to click laboriously through any top navigation.
    • Make sure your color combinations provide good contrast between foreground and background colors, particularly for devices with fewer color options.

    Related Posts Plugin for WordPress, Blogger...