Web Design & Development Blog

Last months browser statistics were very unusual for the browser trends. Since it was vacation time for most of the people in the world, the ratio of home to business usage rises. Typically, with IE the usage would drop and the other browsers would rise.  With the drop of IE you would expect when businesses go back into full swing again that it would be back to where it was. Lets take a look at worldwide Statcounter statistics to see what actually happened.

The table above shows the market share estimated for desktop browsers. The change column shows the absolute increase or decrease in market share. The relative column indicates the proportional change. For example, IE6 users has dropped another 12.4%, which is good thing because we want everyone to abandoned the browser altogether.

In previous months, Chrome 15 was the most used browser version, which didn’t last long. With Chrome now releasing new versions of their browser every month or so, it didn’t last long as being the most used browser version. The release of Chrome 16 back in the middle of December split the user base between 15 and 16, giving IE8 back its title as the most used browser version.

With Chrome 16 coming to the end of its life, Chrome 17 is soon to be released. Chrome 16 has only been out for 8 weeks and the vast majority of Chrome users has been using version 16, approximately 25.79%. With the new version of their browser ready to release it will split their users base again but it’s going to be hard for IE8 to maintain its’ lead in the browser race. IE8 had dropped 1.88% in the month of December and continued to drop in January with another 1.3% decline. It looks as if the browser will plummet below 20% before the next month browser trend is released.

Even though IE8 is in decline, IE9 still had a pretty good month but overall IE declined 1.19%.  IE isn’t the only browser, who saw a decline. Firefox lost a half of a percent from last month.  With IE and Firefox both in a decline, most of their users shifted to Chrome with Safari also seeing some growth. With the holidays just finishing up many of you were lucky enough to receive a new Mac or iPad, which is probably partially responsible for the half percent jump in Safari browser.

Right now Chrome is looking like they are the browser to beat, but can it take out IE as the most used browser. If Chrome can continually rise 1%, as they have been, they have the potential to pull ahead of IE by the middle of the year.

Google is always trying to improve their search results and have the best experience for the users.  Google is using a new algorithm for page layout, so that users are able to find more high-quality websites with actual content that users want. They have been receiving complaints from their users results and how it is hard to find actual content, which isn’t good for their user experience. Google’s latest algorithm change attempts to improve the user experience by downgrading sites with too many adverts.

Here is what Google had to say:

We understand that placing ads above-the-fold is quite common for many websites; these ads often perform well and help publishers monetize online content. This algorithmic change does not affect sites that place ads above-the-fold to a normal degree, but it does affect sites that go much further to load the top of the page with ads to an excessive degree or that make it hard to find the actual original content on the page. This new algorithmic improvement tends to impact sites where there is only a small amount of visible content above-the-fold or relevant content is persistently pushed down by large blocks of ads.

Google has estimated that the change will only impact about 1% of searchers, which would only effect result reordering for every 100 searches. The algorithm analyzes adverts in fixed positions; it shouldn’t affect the pagerank for sites using pop-ups, pop-unders or overlays. If your site happens to be affected by the change, Google recommends testing it with the Browser Size Tool.

Don’t Fear

A great deal of site owners are thinking that they are going to have to change the whole design and layout of their site but site owners don’t panic. Google’s announcement seems like they are using it as a marketing spin trying to get better user experience rather than advancement in technology that will affect the way designer’s layout out their pages.

The new algorithm should have minimal impact on the majority of websites because other factors, such as keyword relevancy and even page weight will have a bigger effect. An easy way for designers to avoid being downgraded is to simply place all the adverts at the bottom of the page and rearrange the content accordingly. That would be intrusive advertising which doesn’t create a good user experience at all and is far worse than a little bit of scrolling. Its unfortunate for Google, they wouldn’t know unless they checked the site manually.

Designers and site owners shouldn’t focus on the specific algorithm tweaks that Google is making, instead keep focus on delivering the best possible user experience on your website. Google is expected to make over 500 improvements to search this year, so don’t try and adjust your site accordingly to each change. What do you think about the new algorithm? Do you think it will affect your site?

If you currently own a website, you probably have been approached by website developers before suggesting that it is time for a redesign of your website. There is a possibility that your website is fine, so how do you know when you really need a new website design? There are many different reasons that your website might need a redesign and there are certain indicators that will tip you off that it is time for one. Your website needs to reflect your brand, your business and you.

Whether you think it’s time for redesign or a web developer told you that your website needs a makeover, you need figure out if you or the web developer has viable reasons for these changes. The worst reason to redesign a website is because someone told that you should. There should be valid reason why your website needs a makeover, you don’t see stores constantly re-furnishing and redesigning, unless there is a justifiable reason.  The reason might be for the customer, so that they can navigate easier through the store or for a certain trend that is going on. Whatever the reason is make sure it is a logical reason, if it isn’t, you create a greater chance of confusing users or even possibly lose those users.

Here are some valid reasons for overhauling your website:

• In numerous cases websites are outdated, they have been around for many years and they aren’t taking advantage of the new technologies, new coding changes, or new services that are available to clients and customers who use the site.

• The web is constantly evolving, adding new features and new technologies all the time, so you want to make sure that your website is compatible.

• The designs from yesterday are not as logical and attentive as they are with today’s website designs. Was your first website designed, coded and programmed properly? These factors are very viable reasons for a website redesign, which Chico Web Design specializes in.

Other factors that might cause you to redesign your website would be if the bounce rate is high. You can take a look at this by getting a Google Analytics account, it will also show you other important information that you should know about your website. The bounce rate indicates how fast a user goes to your page and leaves; this should be a definite red flag that you need to change something. Another factor would be that the navigation on your website is difficult or complicated, this could contribute to the bounce rate. If users aren’t able to navigate easily through your website and find the information they need they will most likely leave and you will lose a user.

There are many factors that contribute to websites demand for a redesign.  As a website owner you want to consider all these factors, then determine where the problem lies, if there is a problem, and then figure out if website redesign is right for your brand, business and you.

Thinking about the concept of visual balance in a web design would be similar to that of physical balance on teeter-totter. Physical elements have weight that they needs to balance, well so do the elements of a web design. If the elements of a web design on either side of the layout are equal weight, then they balance each other out. There are two main forms of visual balance: symmetrical balance and asymmetrical balance.

Symmetrical Balance

Symmetrical balance or also known as formal balance occurs when the elements of a composition are the same on either side of an axis. If you were to look at a website that was symmetrically balanced you would see that on both sides the figures would be in similar positions and proportions. If you split the website in two both sides would look close, if not perfect, to being proportionately equal on each side. This photo of two fish, one lighter and one darker, illustrates this concept very well. This photo of a passageway with bare trees on each side, illustrates this concept very well. The trees are split perfectly down the middle making each side balanced equally. The trees look mirror images of each other, this shows that the photo is showing perfect symmetrical balance.

For web design, horizontal symmetry is applied to website layouts by centering content or balancing it between columns. Websites can have many different layouts but you want to make sure that the space on the page isn’t jumbled together, making different columns so that users are able to distinguish what content goes with which column. If the user isn’t able to figure out what content goes with each column you might have a problem with your spacing, there should be enough space between columns so that they are easily distinguishable.

Here is one of the websites that Chico Web Design designed for the Boys and Girls Club, this website is an example of horizontal symmetry. Notice the screenshot of the website, the picture in the middle splits the page right down the middle with one column on each side that balances each side. Then look at the bottom of the page at the three columns they have enough space in between each other to notice that there are three columns and if you were to split the middle column in half they would be even on each side. Even though there is a photo and columns below the layout still maintains the symmetrical balance.

There are two other forms of symmetrical balance but are less common in website design. They are, however, commonly used in logo and print design.
-Bilateral symmetry, which exists when a composition is balanced more than one axis.
- Radial symmetry, which occurs when elements are equally spaced around a central point.

Asymmetrical Balance

Asymmetrical balance or informal balance is a little more abstract and more visually interesting in general than symmetrical balance. Rather than mirror images on both sides of the website layout, asymmetrical balance involves objects of differing size, shape, tones or placement. These objects are arranged on a website so that, despite their differences, they equalize the weight of the website. For example if you have a large object on one side of the website and place several smaller objects on the other side, the website can still feel balanced.

The website Inman Group designed by Chico Web Design is a good example of asymmetrical balance. The first thing you notice on the left upper corner is the name of the company in a odd shape with another box with the contact us and the bottom there is content that goes two thirds of the page, on the right side the photo also goes two thirds of the page along with the navigational bar and there is a little column on the right side with company information. The two boxes in the left hand corner are balanced by the little box on the right side bottom corner with the navigational bar, photo and content evening out each side of the website layout.

Take a look at the photo below of the chess game. We all know chess is an exciting game along with this photo that shows asymmetrical balance well. If you were to use something to cover any of the chess pieces it changes the photo, the entire photo would feel unbalanced and unfinished. This is a general concept of the way balance works. Its just like if you had a picture hanging from the wall by a single stud in the wall. If you were to shift the picture on either side barely, doesn’t take much, and the whole picture will be off balance.

Different from symmetrical balance, asymmetrical balance is more versatile and is used most often on the Internet. If you were to look at most two column website layouts, you will notice that the wider column is often lighter in color; a tactic that creates well contrast for the text and main content. The diminutive navigational column is often darker, has some sort of border, or is made to stand out in another way, in order to create balance within the layout.

Here is the latest statistics of the browser market. The table is tweaked a bit to make it so that Firefox 4, 5, 6 are combined into one. Since Firefox is doing the rapid release its hard to separate the figures since most of the users update their browsers as new version appears.

This table shows the browser market share estimated for desktop browsers. The ‘change’ column shows the absolute increase or decrease in market share. The ‘relative’ column indicates the proportional change, for example another 9.6% of users have dropped the browser last month.

IE9 displayed another good month. It progress remains steady but there are a couple solutions if Microsoft want massive adoption. First they should offer Windows 7, the hardware, which runs it, installation, migration and training to everyone for free. The second solution, alternatively, release a version of IE9 which is compatible with XP. The other browsers support XP and still manage to offer fancy features, such as hardware acceleration and CSS3 text shadow.

Firefox 4, 5, 6 is seeing increase in their market share but not at the same pace Firefox 1, 2, 3 are dropping. The rapid releases users seem to like but users are becoming frustrated with add-on compatibility failures and memory usage problems on Mac OS. Mozilla is trying to address the issues that they are having but they are losing user and who knows if they will ever come back to Firefox.

Opera and Safari have little to report on since both the browsers made little gains but neither are in the front running for the top market share.

Chrome is last browser to discuss. Chrome just celebrated its third birthday, the browser launched 3 years ago on September 8th. Chrome usage continues to grow at the same pace, 1% per month, sometimes more. If Chrome continues their current trend, Chrome will overtake Firefox in December 2011 and has already occurred in the UK where Chrome has 23.41% lead over Firefox’s 21.75%.

Chrome is recommended by many, its fast simple and stable and updates without a fuss. Firefox has a range of essentials add-ons for power surfing and development. They both have specifics that might make them better than one another but I want your feedback. Which one do you think is better and why?

Google recently released a new tool called Page Speed Service, which will help speed up the load time of web pages. The new service works by automatically taking care of the optimization on the site by rewriting pages and delivering them to users through Google servers. In testing out the new service, Google said that they have measured 25% to 60% faster load times on several sites. Google also has a gallery and a comparison test that users can try for themselves to see if it really works.

A user must sign up and appoint their site a CNAME for their URL on Google’s own servers in order to use the new tool. Page Speed Service then fetches the content from a user’s server, rewrites the page by applying Web Performance Best Practices, and then sends them back to the user via the world-wide Google server. People will then be able to access a Page Speed Service user’s site again, but this time with faster load times.

This service is only offered to a limited number of web developers right now, but you can request access by filling out this form (what form? Hyperlink?). Google said that after a trial period, Page Speed would be released to everyone. However, there are no further details about the costs, except that Google officials state, “pricing will be competitive.” Google rarely comes out with a plan for a pay service, but this is case where they should be able to charge. Do you think you would pay and use the service to optimize your website page speed?

Google has created some hype with their new social network called Google +, which is still in the beta phase with an invite-only status for new users. With close to 10 million users already, it is predicted that it could reach 20 million by the end of the weekend (no longer time-relevant. The information I’ve seen says that it’s already at 25 million users). Nevertheless, this social network has become possibly the fastest-growing product in the history of the Web, which is huge for the search-engine giant since their previous social media efforts – Buzz and Wave – didn’t go so well.

Getting started with Google + is just like getting started with Facebook. First, you create a profile with your personal information. The profile allows you to add a tagline, employment information, education, contact info and a photo scrapbook. If you want to upload photos to your new profile, Google lets you link to your Picasa Web Album, which is Google’s version of Flickr.

Once you’ve created your profile, the next step is adding connections. You can use your Gmail account information to find people or search your Google Buzz account, or find people randomly as well. You can also see who has already added you into their connections by using the tab “People Who’ve Added You.” The most important thing to pay attention to when adding people on Google + is creating Circles, which allows you to group people into categories of friends, family, acquaintances and following. The Circles feature also allow you to control which Circles get to see what on your profile or in your updates. For instance, if you posted something that you don’t want your family members to see and is meant solely for your friends, you have the option to leave family members out and create privacy for yourself. This is one thing Facebook doesn’t allow you to do, which means if you update your status, then all of your connections have the ability to see it.

One of the features that has been causing some hype is what Google calls the “Hangout.” This feature allows you to video chat with friends using a webcam. You might question what the big deal is since you can video chat on an iPhone, iPad, or Skype – but with Google +, users are able to video chat with multiple friends at the same time, just as if people really were “hanging out.” This can be a a cool feature for those busy people out there who aren’t able to see their friends as much as they like. Now, all you have to do is go on your Google + account and click the “Hangout” button and chat with all of your close friends.

Another feature that Google + offers is the” +1,” which allows you to “+1” something that you like – just as you would press a “Like” button on Facebook. You can see how many people “+1” the post and view how popular or interesting the post may be. People are even able to see different websites that you have visited by using “+1.” This helps to show which websites people enjoy the most and in-turn suggest sites to others who share the same interests. The “+1” feature has its own tab on the top of your Google + account for users to click and see what other people like.

On Google +, sending updates also allows you to send photos, videos, links or locations based on updates. You can also choose who can view the post by using the “Circles” feature.

This was an insight of how to get started with Google +. If you don’t already have one, then just be patient. Everybody will be able to join soon enough. But, if you already have one, then I ask: What do you think about it? Do you think you will use this more or less than other social networking platforms, such as Facebook or Twitter?

ICANN (Internet Corporation for Assigned Names and Numbers) approved the growth of generic TLDs that will allow companies and organizations to choose and create domains. The domains are about to change substantially from domains such as “.com,” “.net,” “.org,” to whatever domain name companies want – but they will come at a price.

Businesses have the option of choosing names to match their domain to their brand name or their products. For example, if Coca-Cola were to choose a domain name, they might choose something like “.coke” or “.coca-cola.” Businesses that are all about going green might choose to put their domain name at “.green.”

However, the option of changing a domain isn’t going to be cheap. The application fee alone is $185,000 with an annual fee of $25,000. For large corporations, this may not seem so expensive and we will probably see them spend millions on these domains very soon. We might also see a good portion of corporations in the same industry compete for certain domain names, so let the bidding begin.

“ICANN has opened the Internet’s addressing system to the limitless possibilities of the human imagination,” said Rod Beckstrom, president and CEO of ICANN. “No one can predict where this historic decision will take us.”

Applications for new generic TLDs will be accepted from Jan. 12, 2012 to April 12, 2012. New domains should be popping up within a year.

Chico Web Design is teaming up with 51 Fifty Energy Drink to make a website to display their product catalog, purchase online, and display their event calendar!

Chico Web Design has already helped 51 Fifty Enterprises create 51 Fifty Apparelwhere they have an online ecommerce store for their apperal.

Designing a beautiful website that is pleasing to the client takes multiple steps. The design of the site is very important and designers will naturally want to make the site aesthetically pleasing, but the highest priority should be to meet the needs of the client. Sometimes the information given by the client is detailed and elaborate, but they could also just give essential information and leave most of the details to the designer. Failing to listen carefully can lead to the failure of the entire project and won’t do justice for the designer’s reputation. There is a process for creating a successful design comp that deals with three key tasks: Discovery, Analysis and Implementation.

You might be asking, “What’s a design comp?” Well, a design comp is an image layout of what the client wants, which is created before beginning the prototype design in HTML. This is also known as a mock-up of the design. Below is an outline of the three key steps in building a design comp.

Discovery

The discovery phase of the design process is when Chico Web Design meets with clients to learn what the clients do exactly. Gathering information about who your clients are and how their business is run is essential to coming up with a suitable and effective design.

Before we have our first meeting with clients, we spend some time researching their business. If the client asked us to create a website, it’s a good possibility that they do not already have one or their current website is poorly designed. We gather as much information as possible about the client’s business and their industry before the first meeting. We Google the client to see if they already have a website, but if they don’t, then we try to get additional information from another source.

The first meeting with a client is usually conducted in person; if the client is not located within a close distance to you, then the meeting will take place over the phone. This first meeting is all about communication, listening and establishing what the client wants. We emphasize listening more than speaking, which allows our client to get their wants and needs across effectively, and then writing down the details of that conversation. Meeting with clients in our offices, in cafes for coffee or over lunch is an effective way to make a business meeting more personal.

Here are some questions that we ask clients, even if we know the answer from our research:

• What does the company do?
• What is your role in the company?
• Does the company have an existing logo or brand?
• What is your goal in developing a website?
• What information do you want to provide online?
• Who comprises your target audience? Age, sex, location?
• Who are your competitors and do they have websites?
• Do you have examples of websites that you like or dislike?
• What kind of timeline do you have for the project and what is the budget?

For a redesign of an existing website:

• What are your visitors usually looking for when they come to your site?
• What are the problems with your current design?
• What do you hope to achieve with a redesign?
• Are there any elements of the current site that you want to keep?

Analysis

The next phase of the design process is to take the information that we received from our clients, analyze the info and then use that to build the website. We get an understanding of the products and services the client offers and then analyze how that information can be arranged within the website. We put ourselves in the shoes of the users – the people who visit the website – and try to grasp what these people are looking for. If users are thinking about buying a product, what information they need to know before they buy it? If users are signing up for a service, where they can learn about the service and which level of service they need? Create the clearest possible way for a user to get where they need to go the website.

To do this, we use information architecture, or IA, as the beginning process for a website, which gives you the guiding principles to provide a solid foundation. The Exploration stage focuses on organizing the content and flow of a website into a structure that we can then design around. You don’t want users feeling overwhelmed while searching the site. It is crucial that all the information they desire is one click away from any page on the website, essentially having all information as easy to reach as possible.

Implementation

Now that we’ve gone through the first two steps, the next phase is the Implementation of the design process – creating the layout. Creating the design for the interface is the most important step because every user is going to see and be on that page, so the overall look is critical. Do not worry about the technical abilities of the website until we get an approval of the actual layout, which should first be presented to the client. This will give them an idea of what the design is going to look like and then give them the chance to change anything.

While there are many stages in the design process, these are the most important steps that need to be taken in order to implement what the client wants. The process may seem simple, but it is a process that takes patience and creativity in order to wind up with a pleased customer.