Archive for the ‘Web Design’ Category
Do it yourself Web Design
March 2nd, 2010
MatthewI’ll be the first one to let you in on a secret: building a basic website isn’t too difficult. However, building a creative, search engine friendly, and professional website Is very difficult. One large aspect of building a website correctly is an html validator.
There are several specific reasons for writing valid HTML, and using an HTML validator to insure that what you write is valid:
Future compatibility
As browsers evolve, they come closer and closer to supporting the standard HTML as written by the W3C. Even if they don’t fully support the most recent version of HTML, the browser builders go in and make sure that they are compliant with older versions of the standard.
If you are writing non-standard HTML, there is a chance that as browsers evolve, they will no longer support your Web pages. A good example of this is a trick that some Web developers used with an older version of Netscape. If you included multiple body tags with different colors, Netscape would load them all in in succession creating a fade-in or flicker effect as the page loaded. This trick no longer works, as it relied on an incompatibility of the browser.
Unless you know for a fact that your entire audience is using a specific browser, you are setting your site up to annoy some of your readers if you make it inaccessible to them through invalid or non-standard HTML. Many HTML validators will check your HTML for browser specific entities and alert you to their use.
Browser specific HTML can be part of the standard (IE supports the iframe tag, but Netscape does not) or not a part of the standard (the <marquee> tag is supported by IE and the <layer> tag is supported by Netscape, but neither are a part of the HTML 4 standard).
For example, often people will design a beautiful page with tables and view it in IE. Then, a couple days later their friend calls them up to ask them why they have a blank page up on their site (as viewed in Netscape). The problem is that Netscape interprets the tables standard (the ending </table> tag is required) strictly and IE does not. You could argue that IE is being more flexible, but what if they decide in IE 6 to interpret the HTML standard more strictly? With the merging of XML and HTML into XHTML, this may easily become a reality. And suddenly, your pages no longer work for IE. But if you had written valid HTML, you wouldn’t have had that problem.
We have found that more experienced entreprenuers stick to what they know. Sure, I can paint the outside of my home but when it does not look good, whom is to blame? We have designed hundreds of websites over the past 8 years.
Let us do what we do best. Make happy web design customers.
Video Testimonials
October 19th, 2009
adminWe are the first web design company to add video testimonials to our website. How soon until local competitors follow?
Its been a while
June 30th, 2009
MatthewIn eCommerce usability improvements usually have a huge impact on conversion rates. However, usability doesn’t only mean better visual guide or better site hierarchy. It also means a better communication with potential customers using a professional, trustworthy design, delivering the right information at the right time and communicating with users instead of throwing ad-slogans at them.
In this article you’ll learn what to consider when preparing a perfect landing page for your product, how to focus user’s attention on the most important parts of your sites and also how you can use videos and user ratings to improve your conversion rates.
Professional Design Builds Trust
The most important rule for website usability is to keep it simple. Make your links speak for themselves. Make the structure of your website predictable. Provide clear and visible feedback. Comfort your visitors and make it hard for them to do serious mistakes.
However, while these (quite obvious) guidelines may help your readers to get a solid understanding of how your site works, they will not necessarily lead to more sales. Besides, you may have some goals that conflict with this paradigm of simplicity, the most important of which are probably up-selling and cross-selling.
Build Trust and Credibility
When it comes to building customer’s trust in your company, a professional, trustworthy design becomes crucial. In the Web, people are very likely to mistrust online-business, so you better make sure that you appear credible and serious. Inkd.com does just that with a professional look, a solid grid-based layout and following classic usability conventions.
For everything you do on your website, keep in mind that the user always has to be in control of what’s happening. This holds true for expert users, who will use your internal search to quickly access products they are interested in. They may want to be able to filter search results in a certain way. And it holds equally true for the users-newbies, who wants to see proof of the teasers on your home page and will likely use your primary menu to navigate.
When a user is attracted to the advertising campaign of a product, you have no alternative but to lead that user directly to the product page itself. The next click after that should lead the user directly to the purchase page. By the way, why should you use a shopping cart in this case, if the user wants to buy only one product? The cart becomes totally useless and creates more steps in the sales process. With each additional step, the risk of cart abandonment increases.
The rule of thumbs: if a user finds a product through your internal search engine, he or she shouldn’t have to click more than twice to find essential information about the product.
Deliver the right information at the right time
Speaking of good information, another important rule for leaving users in control is delivering the right information at the right time, whether the information is related to the product, shipping, credit card security risks, privacy or what have you. Because of the large amount of information you can deliver to the user, you need to sort it by priority.
Delivering the right information at the right time is important. Scribbles: before users type in any data, the site informs them about payment methods, privacy and purchase opportunities for educational purposes. However, both privacy data and the “education”-link could be given more visual weight on the page.
The user will have certain questions at each stage of the shopping process; focus on the answers to these questions, and make them the most prominent on the page at that time. Additional useful information can be “hidden” behind a hyperlink (as the “education” link in the Scribble-example above).
Don’t advertise, lead the users
Be careful about using graphic elements to prioritize information; don’t make them look like advertisements. People tend to overlook page elements that look like ads. Of course, you can illustrate the advantages of your products with big pictures — really big pictures. Jakob Nielsen even recommends using full-screen-sized views: “If I click on a product image on a product page, I am certainly asking for a bigger version of that image. And as I intentionally clicked, I’m able to wait for the really great picture. I’m not only able to but I even expect to wait for some loading delay.”
The paradigm of simplicity means that store designers have to be very careful experimenting with new techniques such as AJAX and rich Internet applications based on Flash. If you use these, you will have to run usability tests. New studies show that many people are still unfamiliar with functions like dragging and dropping and do not know what words like “tagging” mean.
Newsberry uses a beautiful layout with attracitve design elements. However, it fails to attract readers to sign up for the service immediately – users need time to find the obscure, modest “sign up”-button. How much time do you need to find it? Probably making the button stand out would work better in this case.
Be careful about using visual elements to prioritize information; don’t make them look like advertisements. Good example: Five Simple Steps
Mark Boulton’s Five Simple Steps does a good job of focusing users’ attention to purchasing options while not making them look like advertisements. Clear visual design and layout reinforce the sales funnel effect.
Getting back to the questions that customers pose, one of their big questions on landing pages is, “What next?” Take a look around the Web. You’ll find tons of stores that hide their order buttons or label them with ambiguous terms. For example, the German store Werbemittelguide includes the terms “Order or ask for an offer” on a single button. While distinguishing between direct orders and solicited offers gives users more control, placing these two different ideas on one button is confusing. In this particular case, clicking on the button does nothing other than put the product in your cart. And the cart is positioned in the bottom-left corner: a clear violation of user expectations.
Highight What’s Important And Use Proper Wording
Go to the website www.guut.de, look for a second and then close your eyes. Open them again for a second and then close again. What did you notice? The big product picture on the left? The countdown? The huge orange order button? The label on the button says “Order now” — a couple of years ago, a lot of Web designers would have regarded that as outrageous, outdated design. Today, it’s state of the art.
“Tell people clearly what they should do next,” says US e-commerce expert Peter Blackshaw. What works with online shopping also holds true for online communication, downloading a PDF brochure or any other form of conversion. Make the most important option the biggest. Links to “More information,” “Details” and “Technical data” are also important, but less important than the conversion itself. They should be displayed in a smaller font or in less aggressive colors.
The US agency MarketingExperiments learned first-hand how strongly wording can influence conversion rates. It tested its own campaign, which aims to convert readers to paid subscribers. Every single element of the email campaign was tested. The button that triggered conversions was labeled “Continue here,” which at first glance would seem to work perfectly. The outcome of the test surprised even experienced experts. A new button labeled “Continue to article” converted 3.3% better than the first; and a third version, labeled “Click to continue,” convinced almost 10% more users.
Video Is Often A Silver Bullet
It is becoming common sense for product descriptions and product pages to include videos that show the products in action. In Germany, almost 60% of all retailers surveyed by the BVDW indicated that they planned to increase their efforts with video.
The bike retailer Fahrrad.de invited sales agents from all brands to its new studio, which was built solely for producing videos for its website. The sales agents were advised to explain why their products were better than others. And most brands sent not only sales people but also cross-country world champions to stand in front of the camera. Some retailers might argue that their products are not suited to online video. By now, though, we can quickly find many products that are being advertised with online videos.
…and GoodBarry.com use prominent video blocks on their start pages. Videos are often used to quickly explain what the product is all about and what advantages it can bring to the customers.
What is very important to understand is that the videos don’t have to be full-throttle studio productions with enormous budgets. In many cases a hand-made personal video will do. It may even perform better than a traditional advertising video because it’s more honest. Websites that push new concepts, like eBags.com, try to build community websites around their product videos, and users can vote on which video they like best.
A very nice idea was used by Pleo, a company that sells a kind of robot pet that looks like a dinosaur. Pleo hit the sidewalks in certain cities, put the dinosaurs on the ground and shot people’s reactions. You could hardly advertise with more authenticity.
And don’t let anyone fool you, there is only one format for online video these days: Flash. Only Flash allows video to be seamlessly embedded onto a Web page and integrated with other elements on the page. Because of YouTube’s success, most users are able to play back Flash video. And producing video is really not expensive, even if it is farmed out to an agency.
Don’t Underestimate The Importance Of User Ratings And Customers Reviews
This may be one of the most important topics of all these days. In tourism, about 60% of all travellers base their decisions on online research. They visit ratings websites to find the best destinations and hotels, free from the marketing overtures of the companies themselves. Similar websites can be found in the electronics and other industries.
This leads us to two questions:
- Should store owners build their own ratings system?
- How should one deal with criticism?
The first answer is pretty simple. In most cases the answer is, “No.” And there are a lot of reasons for that. The most important reason is that no retailer is trustworthy in this way. People would know that commercial interests are behind any recommendation; the cost and effort to maintain such systems are immense; and only the biggest websites attract enough users to build a valuable rating system. If a website owner decides to build his own system, he must provide the ratings right in the spot where users expect it: beside the products.
Take Thomas Cook Travel an example. After a lot of research, it built its own user ratings system, which is now one major filter in its internal search. An external system like Idealo.de (or PriceGrabber.com) might be a better alternative. Idealo gathers ratings from a lot of platforms and aggregates them with tests and reviews from websites and magazines. The plattform itself is neutral because individual retailers cannot influence the content.
Screen Dash
April 28th, 2009
MatthewScreen Dash combines screenshot capture abilities, paint and photo editing tools, and instant image hosting. This process may seem simple but it saves the average photo user over 120 seconds. Think about it: if you find a image or story you want to put on your blog or website, you would have to either copy or take a screenshot, go into Paint and add some comments, then go to an image host to upload the photo, and finally insert the code into your page. Screen Dash combines this all into one smart utility.
You can simply grab a photo you want to post to your website, edit the photo, and then instantly upload it online. The Premium version is even cooler, you can host your own images on your site, use your own Adsense to profit from pictures you post to Screen Dash, and use more advanced editing tools similar to those of GIMP and Photoshop. Download Now!
What is website propagation
February 26th, 2009
MatthewYou’ve registered your domain name, and paid for hosting with a hosting provider, and uploaded your website to the web server. If this is all done, why can’t you see the results of your hard work right away? What is this DNS propagation people keep telling you about?
In order to understand DNS propagation, you must first understand a little about how DNS works. When you set up your website with your hosting provider, they create a Master DNS record in their Domain Name Servers. Your domain registrar (the company you paid for the honor of owning your domain name) points to your web host’s DNS server as being the master authority of your domain.
When any outside source wants to know how to find your website, they first go to the registration database to find out who the DNS authority is for your website. Then they visit your hosting provider’s DNS servers to find out what the IP Address is for your domain name, and from there your audience can now view your website.
The problem with this whole scheme is that in order to speed up the rate at which their customers can view the internet, each Internet Server Provider caches their DNS records. This means that they make their own copy of the master records, and read from them locally instead of looking them up on the Internet each time someone wants view a website. This actually speeds up web surfing quite a bit, by (1) speeding up the return time it takes for a web browser to request a domain lookup and get an answer, and (2) actually reducing the amount of traffic on the web therefore giving it the ability to work faster.
The downside to this caching scenario and what makes it take so long for your website to be visible to everyone, is that each company or ISP that caches DNS records only updates them every few days. This is not any kind of standard, and they can set this time anywhere from a few hours to several days. The slow updating of the servers cache is called propagation, since your websites DNS information is now being propagated across all DNS servers on the web. When this is finally complete, everyone can now visit your new website. Being that the cache time is different for all servers, as mentioned above, it can take anywhere from 36 to 72 hours for DNS changes to be totally in effect.
Flash. SEO Friendly?
October 17th, 2008
MatthewAdobe is teaming up with search engine powerhouses like Google and Yahoo to enhance search engine indexing of Adobe Flash content. Read the press release here.
This is an amazing step forward for web content writers and producers! Now it’ll be easier and faster to make engaging, interactive, rich web content and still leave it accessible to search engine crawling. These are the kinds of trends we look for when we research and develop marketing solutions for our clients–and you better believe this will impact the deliverables we provide.
lightview
October 4th, 2008
MatthewI came across a great option for galleries. Lightview:
Lightview was built to change the way you overlay content on a website.
- Clean: Designed to compliment your content.
- Fast: Smart image preloading.
- Easy: Customizable without having to know CSS.
- Rounded: Adjustable rounded corners, without PNGs.
- Smart: Content resizes to always fit on your screen.
- Slideshow: One button slideshow.
- Works on all modern browsers.
Adobe Creative Suite 4
September 23rd, 2008
MatthewAdobe Systems Inc. plans to unveil the latest version of its flagship Web-publishing software Tuesday.
The new software, called Creative Suite 4, is intended to make it easier to design Web sites that combine different types of media, such as animation and live video. These features are becoming increasingly important as Web sites evolve from the text-filled pages and static images that dominated the Internet’s early days.
“It used to be that video on the Web was enough to make you say ‘Wow,’ ” says Johnny Loiacono, senior vice president of the Adobe business unit responsible for the software. “But now it takes richer and richer experiences to keep our attention.”
Creative Suite 4 is made up of 13 individual software products, including the San Jose, Calif., company’s Photoshop for photo editing, Dreamweaver for Web-site design, and InDesign for desktop publishing. The new software runs 20% to 50% faster than its predecessor, says Mr. Loiacono. The different products are also more integrated with one another so a designer can now work with a video made with Adobe’s Flash technology while using InDesign, a task that previously required separate software.
The new software will cost $1,699 to $2,499.
Businesses are increasingly buying or developing visually compelling software that employees or customers can access over the Web, says Jeffrey Hammond, an analyst at Forrester Research. As the line between Web design and software development blurs, Adobe faces increased competition from technology giants like Microsoft Corp., whose Silverlight video software competes with Flash.
8 Bad SEO Web Design Moves
September 23rd, 2008
MatthewSome web sites receive hundreds or thousands of unique visitors a day, whilst others only get a handful or none. The reason is often because the web designers or Webmaster has built the site in one �really bad way’ or other. This can end up hindering the potential success of the web site. If you want to make sure your site is not a �traffic flop’ then here are some simple rules to follow.
Bad Move 1: Build the site using a frameset.
Framesets may save designers time but are bad news for search engines. They can struggle to follow links into the web site or read text on the page unless you use a no frames tag effectively. In addition to this, if an engine does keep a cache of a site with frames it will often pick up the individual frames/ pages and not the complete frameset. The downside of this is that you may lose your navigation for many of your pages, which is likely to turn visitors off. Whilst one or two partial fixes to framesets are out there, it’s still no wonder that many web site promoters still cry �Please No Frames�. For more information on why framesets can cause problems visit http://www.html-faq.com/htmlframes/
Bad Move 2: Build the site purely in flash.
Flash intros and web sites can be visually stunning, but at the same time they can be rather limiting when it comes to search engines. If your main site is all one flash site it will typically play in just one html page. Some search engines simply can’t read Flash and so your web site to them is just one relatively empty HTML page. If your competitors web site has 15 or 20 pages in HTML talking about their good sand services then they will have a big advantage on you. If you must have a Flash site for graphical reasons then it would be wise to budget for a separate HTML web site to have along side the Flash so your site content can be read and indexed by search engines.
Bad Move 3: Decide that graphics are more important than words
Be careful. As great as some images can be, try not to let designers convince you that you don’t need copy on your web site or that a few lines is enough. Only very occasionally is there ever an excuse to fill your web site with graphics at the expense of text. If the graphics look great, then match them with great copy. Sales copy is important to tell your audience why your goods and services are important. Search engines also like to index plenty of useful copy too. 250-500 words is a sensible starting guide for most pages or ½ of the amount you would place in a brochure. Text copy is important and will always be so make sure web site has some!
Bad Move 4: Leaving out the Meta tags
This is a bad move as Meta Tags are important to search engines. Clear and concise title tags should be written for every page reflecting what it contains. Avoid writing things like �Home’ or �welcome’ as it’s fairly meaningless. If you page is selling blue widgets then get �blue widgets’ in the title and keep the title to 10 words or less.
In addition to this create a well-written objective Meta description for each page, and list your Meta Keywords. These keywords should also reflect the content on your web page. Leaving these 3 things out, or doing them badly can be disastrous. The impact of Meta tags on rankings may vary from engine to engine, but without them your pages could be ignored. Most HTML editors allow you to easily insert Meta Tags into your web page and it only takes a few moments to add to a page. So there are no excuses. Make sure you have good Title tags, Meta Description and Meta Keyword tags on your pages today!
Bad Move 5: Use lots of JavaScript
Search engines have a few problems understanding JavaScript in pages. At the best of time they struggle with it, at worst they may even ignore it. On its own, it can be an unreliable way to make web site navigation. If you must use JavaScript for your navigation make sure you have some alternative ways to get to pages by using HTML text links at the bottom of the page. If you have a large amount of JavaScript think about linking to it as a separate JavaScript file.
Bad Move 6: Don’t have sites linking to yours
Unless you want your web site hidden from the outside world you want to be found right? Well search engines ideally find a new web site by following a link from another site. This happens when people link to you and this kind of underpins the Internet. By having sites link to you search engine crawlers will find your web site and you never need to submit your web site to the likes of Google. It is still the case that web sites that rank highly on Google and Yahoo for relatively competitive key phrases often have scores if not hundreds of web sites linking to them Google help to explain the importance of linking here http://www.google.com/technology/ . So �think links� and be sure to get your site listed in some quality web directories as part of the process.
Bad Move 7: Focus on submitting your web site to thousands of search engines and forget the ones that matter
Now and then you will see some companies attempting to promote this idea - often by using Bad Move 8! It is true that there are thousands of search engines but the highest volume of traffic comes from less than 10 major search engines. The logic of �If I get one hit a day off each of the 1000 mini search engines I’ll get a 1000 visitors a day� unfortunately in practice does not ring true. It is a fact that a huge volume of search engine traffic comes from a small handful of search engine: most notably the Google, Yahoo and Msn.
Bad Move 8: Using unsolicited/ Spam email
This may seem obvious that this is not the best way to promote your business but is always worth stating. If you’re in any doubt simply ask yourself: �Do I like getting Spam emails?� It’s common sense to avoid using techniques that annoy people or damage your brand. Using unsolicited email campaigns could result in complaints and at worst your ISP could ban you. If you want a successful email campaign it is advisable to target genuine opted in newsletter subscribers and to always offer an opt-out button in every email.
Have a successful website
September 23rd, 2008
MatthewWhat makes any web site successful? What increases the number of your visitors, making them coming back again and again? The answer is simple - surely, web graphics on your web site! If you have a professional web design you may consider to have half the battle on the business battlefield! Bright and efficient graphics on your web pages will catch an eye, help to promote your business, serve as your visiting card and generally make the first impression about your business and its owners. The elements of graphics on your web site must be loaded simultaneously with the page and then be reflected properly in the web browser.
All the graphics elements should be placed in the same folder named IMG or images. Then the IMG folder is copied into the html-pages catalog. Now the person involved in professional web deisign and web development may think about how to implement the the image into the web pages. We use the attribute SRC to specify the location of the image resource. SRC stands for “source”. The value of the SRC attribute is the URL of the image you want to display on your page. In other words, the attribute SRC shows the file’s location. Here is how the syntax of a defined image should look like: <img src=”url” > where URL stands for image location (i.e. where the image is stored). However, besides this one, there are other attributes responsible for different additional features related to image placement on the web pages.
The ALIGN attribute serves to align the graphics on your web page. The attribute allows two values assigned - left and right. The value LEFT makes the web browser place an image on the left of the text as well as the value RIGHT allows to place the image on the right relative to the text. You should note that if the attribute ALIGN has already been used to align the text relative to the graphics on your specified page, you will not be allowed to set the parameters of text flow around the image. The attribute ALIGN allows to place the text between two graphical images. In this case the tags describing the image shall be placed over the text that is to be enclosed between them.
The ALT attribute helps to add comments that will be reflected if the web browser cannot load the graphics on your web page. The attributes WIDTH & HEIGHT help to assign the width and the height of the image you are placing. However, these attributes are not recommended to be used for the images in jpg format since an incorrect value assignment may result in deterioration of graphics quality. So before you insert any graphics on your web pages you should correct its parameters with the help of any graphics editor. If the while background of the page is not what you really want, you can put any graphical background on your page with the help of the attribute BACKGROUND of the tag <BODY>. Since the web browser automatically places the image copies the way they fill in the whole page, so the image you apply for your background may be done small in size.
You should remember that while creating a graphical background of your page you should use such images that provide interesting visual effects and at the same time that would not disturb your customers from reading the text itself. For example, placing a text on the page with tiger background would result in lost of interest to your content since the reading would be completely uncomfortable in this case. A good image being repeated multiple times looks “smooth”, without any seams or joints. Don’t forget to pay attention to the color and size of your font if you make a graphical background to achieve absolute easiness in reading. The attribute BORDER helps the designers to assign the frame’s size around the graphical image. Experienced web graphic designers recommend to use gif format for graphics web site elements such as menus and banners and for jpg format for full-color images. Anyway, whatever you apply, keep in mind the fact that you are creating your professional web design for your potential customers and your web site should be easy to use from the point of web graphic design and web development.