The layout of your website is an important element to consider because it is a part of the end product that affects the user interface and experience. In my recent post about screen sizes and resolution, I mention the variety of screen sizes out there and how they horrify designers. Well this entry intends to help by introducing frozen and liquid web layouts.
What is a Frozen Web Site Layout
Frozen web layouts refer to the static nature of a website. Whatever the size of the screen or browser, the layout will stay the same, along with the text and elements. This layout convention was used by the earliest websites and is still commonly found on the web. Frozen web layouts give the designers more control over users’ viewing habits. They are great for business because they seem stable and professional. This is not a great layout convention for a business with a wide user demographic because it will not cater to every user’s browser.
What is a Liquid Design Layout
Liquid web layouts are the opposite of frozen layouts. The text and elements change in length, to a certain degree, depending on the the screen and browser size. Liquid web layouts gives the users control over how they view your website, which is a good thing depending on the use of your website. It is also useful to deliver content to an unknown screen size population. An example is Amazon.com, which implements a liquid design for their wide variety of users.
The standards for both frozen and liquid web design is given by the World Wide Web Consortium through html, css, and other coding conventions. You can find these standards on their website at www.w3c.org . Frozen layouts use fixed size tables and elements, while fluid layouts use % based tables.
What is more Common?
Nowadays 100% fluid web layouts are hard to come by because they are hardly conventional. Most fluid websites have a base size and when the screen is below that size, the user will have to use the scroll bars. According a statistic provided by w3schools.com, 96% of internet users have a screen resolution of 1024×768 or higher. It gives designers assurance that most of their viewers have a pretty big resolution and they can design their layout to be at least 1024 by length.
Design Problems with Mobile Devices
Mobile devices web viewing is almost another story on its own. In recent years, technology has been upgraded to a degree where viewing a regular website on a mobile device has the same user experience as it would on a computer. A really good example would be Apple’s pinch and zoom.
Here is a website that promote liquid web design: http://www.cssliquid.com/about/, if you want to tackle challenge and feel that liquid web design will be beneficial to your business.
Screen size and screen resolution are two basic concepts taken in to consideration when designing a website. The two concepts are also somewhat tricky to get acquainted with, but once you get to know them a bit, you can make your website friendly to more users.
The reason I say this is because there are a lot of different screen sizes out there.
They range from netbooks to flat screen TVs. There is not a standard screen size for everyone because of all the different uses a computer can have; movies, pictures, games, etc. If your website has pictures with large resolution, then small computer screens may cut off your picture. This blog intends to get you more acquainted with screen size, resolution, and the designing your website to fit your users’ screens.
Screen size and screen resolution are definitely related on a high degree, but they are still two different items. Knowing these two concepts should help you with designing your website. Screen size is just as it sounds: It is the diagonal measurement of a screen. Some netbooks have as low as 7 inches, while some computer screens go to 20 and 30 inches.
Screen resolution is related to how your screen displays graphics. It is measured in pixels. A pixel is a smallest point on a screen. If you have an image and zoom in to the farthest, the single squares are the pixels of that image. With that being said, the more pixels you pack in to a certain space of the screen, the more crisp and more resolution you have. The standard pixels per inch is 72 for computer screens. That means that a line with a length of 1 inch should have 72 pixels in it.
Designers’ nightmare: variable montiors
The different resolutions and screen sizes kind of creates a nightmare for designers because you really do not have a optimal size for your design. All you can do is try to make your design fit to most screens. Lets say you have a design that is 1500 pixels wide, but an user’s screen resolution only displays up to 1000 pixels wide, then that user would have to scroll right to see the rest of your design.
Web Screen Design Standards: a constantly changing enviroment
800 x600 used to be the standard viewing size of websites, but nowadays a lot of websites are 1024×768. Websites like Yahoo.com and Wired.com are all 1024 in length. You really need to consider who your audience is to choose the right size for them. Are they always on the go? Or do they browse your website sitting at home? If they’re sitting at home, then a bigger size would work better for them.
Take control and preview your designs!
You can go to www.anybroswer.com/ScreenSizeTest.html to see how your website looks in different web browser sizes.
Location, Location, Location-Your Domain Names are your Online Location in the Marketplace
Domain names are the real estate of the Internet. That being said, a good domain name is the same as a good location where your business can grow and prosper. In this blog, we will go over important characteristics of good domain names, having multiple domain names, and having a single destination for those domain names.
Having a prominent domain name directly relates to your company’s marketing and branding strategy. Therefore, when choosing a domain name, you should consider your company’s marketing strategy and the relation between the domain name and the product and service you offer. Some general characteristics of a good domain name are that it is: memorable, short length, relates to your product, descriptive, and have prominent extensions.
First off, a good domain name should be memorable.
The whole reason the Domain Name System was created is to make it easier for users to remember addresses. To make your domain name easier to remember, do not include extra characters like hyphens and numbers. Sometimes users can forget them, and they will be taken to another website.
The domain name should also be short, which ties in to the memorability aspect of domains.
People are reserving domain names rapidly with the growing number of websites out there, so short domain names are in demand. Single and double word domains are getting harder to acquire, but nonetheless a great asset if you reserve some. The longer your domain name extends, the less the credibility and prominence of your website.
Domain extension are also a very important part of your domain name.
Common extension are [.com], [.net], [.org], [.edu], and etc. To clarify, you can have the same name for different extensions, like abc.com and abc.net. If you are thinking that more people will visit abc.com than abc.net, then you are right. Generally [.com], [.net], and [.org] are the most prominent, in that order. [.org] extensions are more catered to organizations, but you don not need to be an organization to to buy it.
A way to create extra brand image for your company is to buy the same name for different extensions. This way, when people enter different domain extensions for your name, it will take them to your website. This will not only increase the brand of your company, but also the traffic your website receives.
Buying different extension also decreases a competitor’s ability to take advantage of your domain name. Your competitor will not be able to buy your domain.org or direct traffic to their website using your brand.
You can also use a feature called domain forwarding to make all the domains go to a single domain address. If you buy a domain names with different extension like [.com] and [.net], you can use domain forwarding to make it so that when a user puts in the [.net] domain, it takes them to the [.com]. It is better to buy and reserve the different extensions for your domain name because you do not want your competitors to grab them. It does not cost that much for each year and there is definitely a greater return for the investment.
Domain forwarding does not only have to work with the same domain names. You can basically forward a visitor to any other website. The benefit is that you can buy different domain names that relate to your business and have them forwarded to your main site.
You can even include keywords in these secondary domain names.
For example, if you own a book store called Past Memories and you bought pastmemories.com, you can also buy domains with keywords like bookstore, new york, ny, and etc. You can increase traffic to your site by buying bookstoreny.com and nybookstore.com and have them forward to your main site.
Keywords in your domain is getting towards SEO, but generally search engines rank keywords in domain very highly. Let us say that someone is searching for book store in new york in Google. Past Memories will rank higher because you have bought the secondary domains. Keywords in domains are a great asset, but to rank higher in search engines, you also have to perform SEO on your site.
The Importance of a Domain Name
Having the right domain name for your business is a cornerstone to develop the brand and presence of your company. Using an easy to remember domain that relates to your website will definitely increase the traffic of your website. In this blog, we will go through the basics of what is a domain name, how to register for one, and information to consider when choosing and registering for a domain name.
Photo by Ivan PW's-Flickr
What is a Domain Name?
First off, a domain name is a name that that users put in to their web browser to get to your website. An example is www.google.com. The Domain Name System was created in the 1980s to make it easier for users to remember the unique identifier that takes them to different websites. Before the Domain Name System, users had to remember the specific ip addresses, such as 209.85.135.105 for Google. Of course the ip address still works if you put it in the web browser, but domain names are much easier to remember.
How to Buy and Register a Domain Name
In order to register for a domain name, you will have to do it with an organization call ICANN through a domain register. There are many domain register websites out there and they have made it easy to register for a domain name. Domain names usually costs around $10 to $35 to maintain on a yearly basis.
Privacy and Ownership
You can also tell your web host or web designer to register your domain name for you. However be sure to to clarify who’s ownership it will be under. If this is not clarified, some web hosts and designers might hold your domain name hostage and charge you extra for that domain name.
On the other hand, owning a domain name might subject you to an intrusion of privacy because you need to supply your mailing address, phone number, and e-mail address to the register and ICANN. In addition, the credit cards you use also have private information about you. This increases the chances of spam, identity theft, direct marketing, and etc.
You can try to fix this risk by using a domain privacy service, offered by a number of domain registers. Generally, the domain register will replace your private information, submitted to ICANN, with a forwarding service information. However, this is does not absolutely gaurantee the safety of your information; the register still has your information and may even sell it to people seeking to use them.
There are a number of domain registers out there. Here is a list of some:
www.whonami.com
www.cheekydomains.com
www.register.cocm
www.domain.com
www.1and1.com/domains
Designing and building web sites includes facing acronyms and web lingo. We use them to refer to different technical problems and specification. But for our clients these terms are confusing. So, we asked our summer high school interns to do a little bit of research and demystify some of them for you. Here are their first blogs about about photo formats and their usage.
By Jonathan Beaver, Senior, expected graduation HS 2011
I was on facebook the other day and I noticed that posting different photo extensions changes how a picture will come out looking on my profile. This confused me, and I became annoyed because I wanted my photos to look amazing the way they should look. So what I did was I started to research the different photo extensions and this is some of the information I found
Jpeg: Jpeg is the most commonly used extension and almost all cameras use jpeg as its default extension. It is also the most common extension used on the Internet for images. Jpeg stands for Joint Photo Experts Group. Jpeg compression is able to reduce image size and compression levels also the quality of an image. Jpeg is the best image format for photos and pictures because of its large numbers of colors for Internet and email use. The first Jpeg standard was released in 1992 and since then has been updated and grown into what it is today.
GIF: Gif stands for Graphical Interchange Format File and is also a very common photo extension. It contains up to 256 indexed colors. It has a lossless format, which means that the clarity of the photo is not compromised or messed with Gif compression. Gif files are very common in Wed design graphics, it is mostly seen in small images that have words in them such as on website navigation bars. Gif although is not the best at showing photos so I recommend Jpeg for that.
PNG: Png stands for Portable Network Graphic. Png is similar to Gif in the way of using lossless compression. Png was created because of the limitations of Gif; one notable difference is that Png files are able to change from opaque to transparent. Png however has several fallbacks such as its not able to become animated like Gif. Png is usually not used for professional designing but it is support by most web browsers.
TIF: Tif stands for Tagged Image File. Tif contains High-quality graphics format often used for storing images with many colors, such as digital photos; Tif which is short for “TIFF;” includes support for layers and multiple pages. Tif files can be saved in an uncompressed (lossless) format or may incorporate into .Jpeg compression; they may also use LZW lossless compression, which reduces the TIFF file size, but does not reduce the quality of the image.
References:
Jpeg Picture- http://upload.wikimedia.org/wikipedia/commons/2/23/Lake_mapourika_NZ.jpeg
Gif Picture- http://www.usna.edu/Users/math/meh/impact.gif
PngPicturehttp://sxi.ngdc.noaa.gov/images/DeepCoronalHoleImages_GOES13/PTHNWIDE_WaveletsGamma_LVGamp16Contp8.png
Tif Picture- http://elmore.cc/images/Apr04/Small/tn_PICT1879_tif.jpg
Keywords are the foundation upon which Search Engine Optimization and Pay-Per-Click advertising rests on.
Without the right keywords, you will not be able to connect your website to your audience. Any campaign that tries to bring traffic to your website will be a waste of time and money. Therefore having the right tools and knowledge on keyword analysis is critical for the success of your website.
Where to Start: Brainstorm an initial list of keywords by using different sources
These are words that you will base your keyword research on. Think of words that mainly relate to your product and services, as well as synonyms for those keywords.
There are a variety of sources that will diversify your base of keywords. These include:
- Yourself, as you are the most knowledgeable about your product.
- Your audience, because they can offer another perspective on your product.
- Your competition might also give you insight on different ways to word your product.
It is also important to brainstorm keyword from different perspectives of your audience. There might be different situations where an audience will search for your product, so it is important to consider different angles when brainstorming for keywords.
Online keyword tools like Google Keyword Tool and Word Tracker will help with thinking of keywords as well.
Another tip when doing thinking of keywords is to think of keywords that are related to your product but does not have your main keyword in them. For example if your main keyword is fish, then supporting keywords might be different fish names, etc. Analyze the keywords that you have by using online tools like Word Tracker and Google Keyword Tool.
Word Tracker is a very accurate service that offers deep insight to keyword analysis for a fee. However, there is a free version of it that only allows you to try it out. The full version of Word Tracker will allow you to see
- Searches – the number of daily searches for a certain keyword over the last year
- In Anchor and Title – see the number of web pages that have that keyword in the anchor and title texts. It will give you a general idea of the competition for that keyword
- KEI – A mathematical formula that will give you a scale for the effectiveness of a keyword based on its popularity and competition.
Google Keyword Tool also offers the amount of search, but it is given in a month. Google also offers the estimated Cost-Per-Click for people looking to see how much money they will invest in a PPC campaign.
Generally Google is a good way to start of the research. However as you get deeper, you will have to fine tune the analysis with Word Tracker. Rosalind Gardner’s blog offers a very clear explanation between Google Keyword Tool and Word Tracker.
- If you are just starting up on SEO or PPC advertising, it is very hard to have your page rank well for popular keyword. It will also be expensive to bid for popular keyword when doing PPC. Therefore it is best to use medium to small volume keywords.
But none the less you should include popular keywords in your website copy. Your audience will expect them and by having them there, you will lay a foundation for the long run.
You should also add words to popular keywords to make it more specific. This will lower the competition and increase your chances to rank well in a search. There additional words can be a specific location, description, etc.
Here are some blogs that are great to learn more about doing keyword research:
Fifth Ave in a ‘Flash’
Upscale clothing translates to top notch websites in the world of high fashion. Flash seems to be the only option when you take a stroll down ‘Fifth’ on the World Wide Web. High fashion brands such as Louis Vuitton, Chanel, Christian Louboutin and Yves Saint Laurent all utilize flash on their websites.
Flash has its benefits. It calls for an interactive browsing experience where the client can take a glance at the designer’s collection and even check out their fashion show in Paris, all from the convenience of their own living room.
Flash makes browsing fun and captivating, but it may not work efficiently on outdated devices. Also, with the increased popularity of mobile browsing, an alternate site for wireless phones should be available. Popular mobile Apple products such as the Ipad, Iphone, and Itouch, are known to be anti-flash as well, however, there are loopholes. Learn how to Install Flash on Your Ipad. Also, refer to Nathalie’s article on Flash for more information. All of this should be in mind when considering using flash for a website.
The utilization of flash seems to be working perfectly well for the high fashion world, after all, the big boys are all doing it! The sites all have a similar format beginning with a welcoming page that wants to know your location. They then take you to their site for your specified language. Then, you can find the nearest store location and browse their collection. Don’t try to sneak a peak at work because music and sound utilization is popular as well. These sites can draw you in because they are indeed entertaining and slightly addictive.
The Christian Louboutin Site seemed to be a cut above the rest and a tad more innovative with their use of flash. On their welcoming page the infamous ‘red bottom‘ shoes clicked their heels across the cyber space street and brought you to the next page to reveal Christian Louboutin in sorcerer form, with his eyes glowing while his shoes and bags eerily hovered at his side. Christian Louboutin’s are the official “it girl” shoes right now and their site certainly reflects that with their creativity.
So next time you want to take a stroll down Fifth Avenue, there’s no need to grab your pearls, pajamas are welcome! Just make sure your computer is up to speed and you’re good to go. Now that’s what I call fashion forward!
Having a website and online presence is incredibly important for businesses in the 21st century. However, it is challenging for small businesses to hire a marketing firm to create a campaign that drives traffic to their website. In this blog I will introduce you to Pay-Per-Click advertising and how you can drive additional traffic to your website.
Pay-Per-Click (PPC) refers to an internet advertising model where the advertiser is charged only when their ads are clicked on. The main type of PPC relates to advertising on search engines, but it can also be a model for content based websites. With search engines, your advertisements appear when a user types in certain keywords. You can find an example by looking at the top and right side of the page, which shows “Sponsored links”, when you do a Google search.
There are many advantages to doing PPC advertising. PPC offers a dynamic way to advertise on the internet by allowing your company to address your target market through using specific keywords. PPC allows you to advertise through geographical tracking as well. It is a quick way to start off an internet advertising campaign and gives you feedback with return-on-investment tracking systems. This also permits you to change your advertising strategy quickly based on the feedbacks.
Currently the top three search providers in the U.S. are Google with 65.1%, Yahoo! With 13.8%, and Bing with 13% of search market share (Nielsen 2010). The pricing structures for all three are based on a budget and keyword bidding systems. You can set your own budget as to how much you want to spend each day, as well the cost per clicks you receive. Consequently, this system will have a range of estimated prices on different keywords based on their popularity. In this case doing keyword research (which will be discussed in another blog) will allow you to make good decisions and get the best bang for your buck.
PPC advertising is possible to do by yourself or by a professional. With a professional, you can rely on their knowledge and experience to help generate better results. However, you can also do PPC advertising by yourself just by doing some research and learning more about PPC. The three search engines have also made it user friendly to do PPC advertising. But be warned, doing PPC advertising yourself can be time consuming and costly if you dive in headfirst. Here is a good blog about deciding to do PPC yourself or hiring a professional.
If you are doing PPC advertising by yourself, here is a list of tips and tricks on effective search engine marketing.
- Create a campaign structure. For example if you want to advertise paintbrushes and paint, you can have two different campaigns for the different products. This will allow you to cater the ad copy, text of the ad, to that specific product.
- Create ad copy that is keyword rich. For example if your keyword is “ABC Paintbrushes” then include “ABC” and “Paintbrushes” as much as possible. This will increase the quality score in the search engines.
- Create a detailed negative list. Negative words are words that you do not want your ad to show up for. These words might be related to your keyword so having them blacklisted will decrease cost.
- Select a precise landing page. When a person clicks on your advertisement for paintbrushes, they do not want to see your homepage. They want to see paintbrushes. Taking them to your homepage will make them disoriented and irritated.
- Test different advertising strategies by using different ad copy and keywords to see which is more effective and which generates more return.
- Similar to five, but very important—track your campaign performance. By tracking your campaign performance using key performance indicators, you can increase the effectiveness of your campaign and generate revenue.
Here are two blogs that also have great tip on PPC advertising: Highrankings, Milestoneinternet.
I hope this blog gets you a little more familiar with PPC advertising.
User Interface (UI) and User Experience (UX) are essentially two sides of the same coin. They both deal with the relationship of a product and its users. The difference in the two is that user interface describes with the interaction between the user and the product, while the other deals with the users’ experience and perception of the product through those aspects. In a more simple matter, user interface deals with the technical and formal aspect of a website and user experience deals with the sensitivity and reception to the users.
UX testing by Lars Flem (Flickr)
Seeing and projecting how (UI) customers will navigate and interact with a website is just as important as seeing customers’ perceptions and reactions to it. A successful website will employ testing in both of these areas, as they are critical to the development and the reception of a website. With a positive feedback, a website will have the ability to gain more attraction, traffic, and ultimately business.
Although the two subjects are similar and closely related to each other, testing them involves different variables and measurements. UI testing generally involves testing the performance of the website. An example of performance includes how many steps it takes for a user to go from point A to point B, or how much time it takes for a user to find out how the site works. UI testing also involves testing that the website is working the way that you want it to; if all of the buttons and functions work. UI testing is very formal, quantitative, and an important part of developing a website.
UX testing deals with the more qualitative aspect of a website. It ultimately deals with the marketability of the website to your customers. The important question is if the generated experience from your website satisfies your customers. A better user experience, needless to say, increases productivity, happiness, and sales. The measurements of UX testing involve observation of your target market with the website; their reactions, feelings, and thoughts about the website.
Both UI and UX testing go hand in hand when developing a website for your consumers. As you would expect a well developed UI will generate a good UX and a mindset for a satisfying user experience will generate a well developed UI.
You have 3 seconds to grab the attention of new website visitors. In these 3 seconds they decide to click away or to stay on your site. They are curious to explore your service or product offering because they are salivating for more information.
Flash is a great design tool to entice, but you need an attention grabbing animation or video (.flv) and have a clear marketing message. Instead of looking at a static web billboard, flash engages visitors into moving pictures, cool effects and ultimately raise curiosity. They want to know about you-and your products. Keep in mind that sites build entirely in Flash can cause major SEO (search engine optimization) problems.
Here are some great Flash samples where corporation used Flash as a web site component in a banner design. It is effective in getting visitors’ attention, but does not keep the essential information away from search engines.
Corporate Flash Banner Examples
Mercedes uses Flash to show off the features of their different car classes.
Nick embedds the video via the Flash video format (flv)
New York Real-Estate agency Flash animation shows the diversity of NYC.
Let me know how you use Flash and if you love/hate it.