Design Focus is a regular Online Friendly feature that examines well-designed sites to show how Web designers have overcome some of the challenges of their profession.
UK type design firm Fontsmith caught our attention with their calalog of creative fonts. In this Design Focus, we take a look at their website, and see if they put as much attention to their divs and style sheets as they do counters and serifs. Read the rest of this entry »
The site for electric vehicle technology firm Better Place happened to be so stylish and well-organized that we thought we’d feature it on Design Focus.
It’s a clean and focused corporate website that shows a progressive, professional, and practical company — exactly the image an engineering firm would want to present. And it incorporates a lot of design, marketing and SEO features that make the site notable. It also incorporates the content management system WordPress, which makes updating content easier, and up-to-date content adds to the site’s overall value to visitors.
In this post, we’ll show you some of the smart decisions the website’s designers made, and offer some constructive criticism that can be used to enhance an already brilliant website.
We want to make the Web a friendly place, and that means including everyone. Many sites, however, aren’t fully compatible with special browsers and technologies that give those with special needs full access to the Internet.
Luckily, Web developers are learning to build “accessible” websites which are able to work in conjunction with assisstive technologies such as screenreaders and talking browsers.
There are many reasons to make your site accessible, including reaching a wider audience, showing a philosophy of inclusiveness, and even the side-effect of having better search visibility.
We recently had a chance to ask Web accessibility expert Marc Hamann some questions about what companies should know about Web accessibility. Marc is the accessibility consulting manager at CNIB, an organization that provides support to Canadians who are blind or partially sighted. His job involves evaluating websites for accessibility, and training people to build and maintain accessible webpages.
In this Q&A, we talk about how accessibility is becoming mandatory, where it currently fits into an organization’s priorities, some simple ways to test accessibility, and more.
Online Friendly: It’s becoming mandatory for government sites to meet accessibility requirements. Will there be a similar requirement either legally or otherwise for private firms to do the same?
Marc Hamann: Yes, at least in Ontario. Starting Jan 1, 2014, all organizations, public or private, with 50 employees or more will need to have a website that meets the A level of compliance for W3C Web Content Accessibility Guidelines (WCAG 2.0). Some private firms, such as banks, that are under federal regulation may need to meet higher standards sooner.
OF: What are the current attitudes towards Web accessibility? Is it treated as an afterthought?
MH: With the new awareness of regulations, things are changing a bit, but there is a strong tendency for organizations to only consider accessibility at the end of a project. I routinely get requests to check projects just before they launch, with the expectation that there will only be small fixes required. This is rarely the case. Unless a project was developed from design onward with accessibility in mind, there are often major problems that need to be remedied, especially in more elaborate sites. For this reason, we recommend that people incorporate accessibility as a design criterion from the start, and test for it throughout the project.
OF: What resources are available for those wanting to learn how to create an accessible website?
MH: There are a number of smaller resources on the Web that can help, and the WCAG Standard is available on the Web as well, though it probably isn’t for the faint of heart.
CNIB offers a one-day course in Web accessibility that digests the Standard and gives participants the basic principles and practices they need to produce accessible websites.
OF: Say I run a small business and have gotten a developer to create an accessible WordPress site. What can I do to make sure that that the pages and blog posts I create are accessible?
MH: Obviously, being familiar with the principles and practices of accessible web sites helps. We encourage people to test websites with a screen-reader ( a freely available one for Windows can be found at http://www.nvda-project.org/, and Macs come with VoiceOver). We also recommend testing a web page using only a keyboard. This is an important requirement for Web accessibility, as there are many disabilities that can prevent the effective use of a mouse, including vision loss and restricted mobility .
OF: Given the relatively large-scale adoption of large-print books, audio books, closed captioning and described video, do you see accessible websites taking off in a similar fashion?
MH: Unlike some of those alternative media, we don’t recommend that people produce separate versions of their website for accessibility. Whenever possible, we recommend a universal design approach: make a website that everyone can use, with or without disabilities. With the increase in regulation and awareness, I do think that soon accessibility will be as much a requirement for all Web projects, just as security and scalability already are.
Your website finally looks perfect in your Web browser — it’s the jewel of your desktop. But what about people coming to your website through mobile phones?
 |
|---|
It’s more important than ever, in fact, to have a website that’s mobile friendly.
According to research from Morgan Stanley, global shipments of smartphones and tablets have surpassed those of desktop PCs and notebooks by the last quarter of 2010, and this gap will increase over the next few years.
The report goes on to say that more and more people are using their phones to interact online, and that means that organizations with great mobile websites will inevitably have an advantage over others.
There, of course, are many challenges to creating mobile websites. Mobile Web browsers often render sites properly, but not always. Also, with smaller screens, the Web design adage that every pixel counts gains even greater importance.
To make sure that your website is prepared for mobile visitors, we’ve come up with three questions to ask your Web developer.
Many sites have contact forms that let visitors enter their email address and other information. Entering data is often more difficult on a mobile device than on a desktop computer because you don’t have the luxury of having a full-sized keyboard.
Luckily, the latest iteration of HTML, HTML5, supports tags that tell a mobile Web browser what type of data belongs in the form field.
The latest browsers for mobile phones use these tags to adapt the text entry keyboard to suit data entry for that field.
 |
|---|
For instance, when an iPhone user focuses on an email form element, they get an on-screen keyboard with a shortened space bar (spaces are less important for email input), and it adds “@” and “.” keys next to the spacebar. When inputting into a telephone form on an iPhone or Android phone, it will switch from its regular text entry keyboard to a number screen.
HTML5 forms make it easier for visitors to interact with your site, making them more likely to do so. We recommend updating your forms with HTML 5.
Flash is used to add animation, video, and interactivity to webpages, however, not all smartphones are compatible with it. It’s best to make sure your website gracefully falls back on alternative ways of showing animations, video and interactions.
Your animated and interactive elements that use Flash can often be recreated using jQuery.
There are some options to ensure your Flash videos are properly displayed. Video for Everybody is a HTML code snippet that uses the HTML5 <video> element to embed a video into a website. If the HTML5 video doesn’t work, it will fall back to an embeded quicktime movie, and then to Flash.
If Video for Everybody isn’t able to show a video, a placeholder image is shown and the user will have a link they can click to download the video.
 |
|---|
You can easily add an alternate stylesheet for mobile devices to create a set of style options specifically for mobile devices.
On mobile screens, there’s less space for extravagant layouts. When designing the mobile-specific page, it’s important to eliminate clutter, and keep it simple. Evaluate every button, badge, ad, photo, and any other page element, and determine if it’s absolutely necessary. This may mean eliminating many elements, or changing a three-column layout to a single column.
When creating your mobile stylesheet, keep in mind that simple pages often look better on mobile devices, and are more useful to users.
–
An easy way to evaluate your mobile website is to simply borrow your friends’ phones and see how your site looks and functions on them. Try to browse your site from as many different phones as you can. You can also see how your site looks from online mobile emulators like Opera Mini Simulator or any of the downloadable emulators.
Need help ensuring that your site is mobile friendly? Kobayashi Online is here to help deliver great experiences to your visitors, no matter what device they use!
Modeling and designing your website’s user experience means attempting to understand all aspects of the user’s online and offline interaction with your company, and how the site is perceived, learned, and used in order to make informed decisions that will improve your users’ experiences.
Designing a great user experience or “UX” sounds like a tall order, but this post will provide you with some of the resources you’ll need to create content that will meet visitors’ expectations.
Web writing, Web design, and blogging consultant Lorelle VanFossen said in a recent presentation, “Every user experience journey begins with the words ‘I want…’, ‘I need…’ or ‘how to…’” Users will pursue a relationship with your organization while looking for answers to a want, need, or problem.
In her July 2011 presentation at the Word11 Prefix online conference, VanFossen laid out three UX pillars for website content:
This knowledge will help you identify your target audience and articulate your user goals.
It’s also important to note that the Internet has a complex topography, and you must identify where discussions are happening. They could be happening on blogs, Twitter, forums, or mailing lists, so make sure you look at all possible platforms.
By knowing what the current discussions are about and where they’re happening, you can identify competitors’ strategies, evaluate what topics are most popular so you can join the conversation with your own content – especially if you can identify content that is being overlooked.
You should be able to find a gap between what your target audience expects and what is currently available to them. This will help define the UX challenges to solve. For instance, if the competition is all competing on price, you can engineer a UX that emphasizes quality, customer service and support, product knowledge, or anything else that differentiates you.
For a small business that competes with larger corporations, this could be emphasizing the benefits of “local” or direct access to the owners. An independent burger joint, for instance, could discuss the locally sourced tomatoes and lettuce it uses, or show pictures of the business owners visiting a local farmers market to buy choice cuts of meat.
Finding your niche often involves asking yourself what the competition is not talking about.
Make your touch points count
Your website is a major point of customer interaction or “touch point”, but it certainly isn’t the only one. Roll your UX research into all your touch points. From an initial phone call to the payment of your invoice, there are various “touch points” with customers in a typical business relationship. VanFossen says “Touch points are the dots on the map of their journey, where they encounter your business.” She says, “These are the moments where you connect, and have an opportunity to create a relationship.”
UX Magazine suggests coming up with at least 10 touch points. Examples include sending a birthday card, or calling every month or quarter to ask how business is doing. These touch points are all opportunities to make a connection. One touch point we tried to perfect is our outgoing phone message. Call 416-410-3266 when you have a chance and let us know what you think of our (hopefully friendly and fun) message!
On our website, we thought an important touch point was our Contact Page. Instead of a generic number, we added all the people in our office to show how accessible (and friendly!) we are. We even had our ladybug help people find out “How do I get here?”
Website UX design can have a profound impact
 |
A great example of a business that was able to change its online UX is outdoor sports and clothing store REI. A main part of the in-store REI experience is that employees can offer customers expert advice. Initially, the REI website didn’t offer the expertise provided at the brick-and-mortar store, which led customers to look elsewhere on the Web for product advice and reviews.
Recognizing this, UX designer Samantha Starmer helped translate the in-store experience into the online experience. by integrating expert advice and reviews into product pages. The site now includes dozens of online how-to articles and videos from REI’s vast pool of outdoor knowledge with timeless advice on topics like how to fit your backpack, and even more modern lessons like how to go “geocaching”.
Recreating the experience of having an expert on-hand while shopping online helped transform the UX at rei.com, making visitors more confident in their purchasing decisions, and reinforcing the impression that REI knows its products well, are focused on quality, and providing customers with the information they need.
For a small business touting the expertise of the owner and his or her availability, you could add an “Ask Bob” form. You could even integrate a live chat feature into your site using Google Talk or though a hosted service like Live2Support, or RealChat.
Gauging the effect of UX design
There are a variety of tools that you can use to identify user goals and gauge the quality of their UX. A simple way is to use tools like Google Analytics which provide statistics on your site’s visitors. Google Analytics can be used to help determine if your website is meeting your business goals, and it can be set up to show traffic changes over time. It can also specifically help track conversions, search traffic and keywords used, traffic location, and the effect of social networks.
The regular use of an analytics tool, along with a heavy dose of clever analysis, can help you make informed decisions on the direction of your UX design.
Make sure that you benefit too
The hallmark of a good UX is that customers get what they want, what they need, and you get what you want. You have to make UX choices that don’t just satisfy visitor needs, but ones that also meet your organization’s goals. For instance, you could make it easy for visitors to get valuable information by giving away your knowledge in a whitepaper or report for free, but you lose an opportunity to gain a lead. Instead, try providing a Call To Action (or CTA) form that gives your knowledge in exchange for the visitors contact information. Good UX means that everyone wins.
Have any UX challenges or experiences you want to share? Please let us know!
We’ll be covering more UX topics on Online Friendly, and Kobayashi Online is always available to help you align your website UX and your specific business goals.
In July, we started a blog series on the importance that an updated website has for your business.
In our first blog post about website updates, we discussed how regular updates are a great way to legitimize a small business website. We also explained ways to find website content for your visitors and how to do website updates.
In our previous blog post, we talked about the power of social networks and how you can help your visitors share the content of your website with their friends.
In our last blog post of this series, we talk about how you don’t have to wait for your site visitors to share your content, you can start the sharing!
Facebook, Twitter and LinkedIn are three of the most popular social networks in the world. Facebook itself has more than 500 million users.
According to the micro-blogging company Twitter, 50 millions posts are published on their platform everyday – that’s almost 600 tweets per second. And just this past August, LinkedIn hit 75 million registered users.
The power of social networks is reformulating the concept of communication and networking. According to Social Media guru, Brian Solis, “the spirit of social media is enlivening industries, refreshing marketing, and humanizing businesses”.
Social-networking can have an impact on your business as well. Online social networks make communication easier for people and businesses.
And every time you share your company news and insights you get a little bit of attention from your network, re-enforce that you are active company and knowledgeable in your area of expertise.
At the same time, just the act of publishing and communicating helps you refine your message, your knowledge, and how you communicate your expertise.
Facebook, Twitter and LinkedIn are all social networks with different approaches and types of users. Before you create a profile on any of them, you should learn what you can do on each platform and what kind of connections you will probably find there. Here is a brief overview:
For all business people, we recommend our clients to start their foray into social media by creating a profile on LinkedIn. This will help you keep in contact with the people you meet and strengthen ties to people you already know.
After LinkedIn, the next step is typically Twitter in order to gain current industry news, and to allow anyone to easily follow your company news.
Finally, a Facebook page is a must if you have a B2C company. For B2B companies, Facebook can probably wait until you have mastered the first two social network platforms.
Your social network profile is the most important way for your clients to find you. It is also the first impression of you and your business. The three most important things to include in it are:
As you can imagine, getting the most out of social-networking can be a daily job. However, at the very least update your social profiles with your news about your company, products, and services at the same time you update your website – and of course include links back to your site!
In addition, talk to your customers. Remember that this is all about having an actual conversation with them. However, do keep in mind that you are having a public conversation and other users could quite well be reading what you are saying (always be courteous, service oriented, and on-brand!).
And if you would like to know more about how to be social with your website news and updates, feel free to contact us at our Toronto office.
This week we want to tell you more about updating your website. In our previous posts, we explained why you should keep your website updated. We also listed some ways to discover interesting and useful content for your site.
After you have your content, the next step is being able to update your site with it. Here are four ways to keep things up-to-date:
+1: Content Management Systems
Can I do it all myself? This is one of the most common questions clients ask us. Brent explains how Content Management Systems (CMS) like WordPress have changed the concept and difficulty of ‘web updates’. “CMSs allow anyone with basic computer skills to update some or all of a website”, he comments. “About an hour of training will be enough to start you easily keeping your website up-to-date”.
Most popular CMSs – like WordPress, Joomla and Drupal – have friendly interfaces that make the process of updating your website easy for you. They usually include a WYSIWYG (What You See Is What You Get) editor to make HTML easy, and a media manager which helps you upload images and videos so you can insert them into your updates and make your content more attractive for visitors.
One thing to keep in mind
If your updates do not fit a pre-defined template, or have many elements such as pictures and video, you may still want to hire a professional to do the update, or at least tweak an update you have made.
This will help keep your website always looks its best, and doing the most it can to support your business.
Feel free to contact us at our Toronto office if you would like to know more about how to change and update your home page.
In our previous post, we introduced you to the concept of regular ‘website updates’. As we explained, when you frequently change your home page, you tell your visitors that you are an active company.
In addition, you show them the value that you give to the communications you have with your clients and potential clients.
Your Update Checklist
When companies ask our president Brent Kobayashi about ways to create content for their sites, he usually draws a quick checklist.
As he explains, this list helps our clients to understand the multiple options they have to easily find new and useful material for their sites. Here are some of them:
1. Has your company done anything new or interesting recently? This can be things such as finishing a larger job, gaining a new client, hiring a new person, or sponsoring a charity.
2. Will your company be attending any events such as a tradeshow in the near future?
3. Are there any new products on the market that your company is using or selling?
4. Are there any trends or news in the general industry that your company is in?
5. Is there anything happening seasonally or periodically that a visitor should be aware of? This can be things such as tax deadlines, or checking your furnace in the fall
6. Are there questions that you frequently answer for your clients?
7. Is there anything that you wish all your clients knew?
If the answer to any of the questions is yes, congratulations you have an update for your website.
In other words, you have a way to let your clients and potential clients see that:
- You are current
- You communicate well
- You are ready for their business
And if you would like to know more about how to discover content and change your home page, feel free to contact us at our Toronto office.
When was the last time anything on your home page changed? As you probably already know, your home page is the most important page of your site.
Your homepage is the first impression that your clients get of you and your business. Changing it frequently tells your visitors that you are an active company. It will tell them the value that you give to your site and how you see your business.
Keep in mind that your website may be the most frequently viewed image of your business.
In this first article, we introduce you to the concept of web updates. In future entries, we will give you some questions to discover content for your website, what search engines think of web updates (they like them!), ways to regularly update your site, and the importance of having a social site.
Recently, I spoke with our president Brent Kobayashi about the concept of ‘updating a web site’. At Kobayashi Technology, we encourage our clients to update their homepages frequently.
I asked Brent to define the expression ‘web updates’ for this blog post.
“Web updates are news and information as it relates to the company, and the industry the company is in. The content a small business should create to update their website does not need to be extensive, but it should be relevant to their target audiences.”
Brent believes that updating a website is very important, especially for a small business. According to him, it helps re-enforce the legitimacy of the company.
“One of the main battles for any small business is legitimacy. Current dynamic content on a website home page is possibly the most effective way to show that a business is actively engaged as a business.”
How Often You Should Update
“Once per month is good. However, once per week is great” Brent says. “Once per week shouts to the world that your business is responsive, current, and has its processes in good order”.
At the same time, updating requires planning and maintenance because, as he says, “the only downside to regular updates is the need to keep it up”. To help with this, Brent recommends creating a marketing calendar and a few months’ worth of updates.
“If you are struggling to create content, consider hiring or outsourcing a marketing/communications coordinator.”
And of course, feel free to contact us at our Toronto office if you would like help updating your homepage.
Where you can get the simple facts on how to create online friendly and desirable websites and experiences. Our mission at Kobayashi Technology.
Registration |
| Please enter your email address below to sign up for our mailing list. |
Blog by
Are you stopping visitors from commenting?
Blog comments are something that you should typically encourage because they give readers a chance to participate in the conversation. Comments give readers the opportunity to relate their experiences, offer their point of view, and provide related information. This interaction within the blog can help to expand the original blog post, sometimes giving it a life of its own.
If one of your blog’s goals is to encourage commenting, you should try and make the commenting process as simple as possible.
In this post, we will describe some ways to encourage WordPress comments, while dealing with the inevitable, unwanted comments posted by finding ways to moderate them.
A CAPTCHA, seen at the bottom of this comment form, could stop website visitors from posting a comment.
Avoid CAPTCHAs – A CAPTCHA is an automatically generated test where a user is typically asked to read distorted text and type the letters they see. Because an automated spam program cannot easily decode this distorted text, a CAPTCHA helps ensure that comments are submitted by a human.
The downside is that humans can find CAPTCHAs annoying. The squiggly lines of text can be extremely hard to read, making it frustrating for the commenter, who may have to try several times to guess at the characters. Many give up.
Eliminate unnecessary forms – Posting a comment should not involve filling out a long form; it should be as little work as possible.
We recommend not having any unnecessary forms to fill out such as entering your email twice, or having a pull-down menu of your “preferred title”. Unless it’s absolutely necessary, those commenting should only be required to enter their display name, email address, and comment.
Consider using OpenID – There are tools available that make it easier to sign up or sign in to comment.
The OpenID plugin for WordPress, for instance, makes commenting easier for those who already have OpenID accounts. OpenID gives users control of their online representation across multiple websites, so that their account and username are the same for each and every website. From a usability perspective, giving visitors the option of signing in using OpenID means they doesn’t have to manually enter an email address or handle, and their account is consistent across many sites.
Tools to eliminate spam – By making it easy to comment, it could be easier for spammers to post comments. Eliminating spam is crucial because comment spam not only can it reduce the overall quality of the conversations, but it can also bring down your site’s search engine page rank.
One tool that helps manage spam is Akismet, which helps filter out comment and track-back spam by running each comment through hundreds of tests to determine if it’s spam. This means you don’t have to waste time sorting through and deleting spam from your blog.
One of the great things about Akismet is that there are plugins for many popular platforms including WordPress and Joomla.
There is a trade-off between making a blog easy to comment on, and mediating spam. Tools like Akismet make moderating comments easier, but you must also spend some effort manually finding and deleting spam comments. We think, however, that the extra time and effort this is worth it, given the value that legitimate comments can provide to your blog.
Feel free to share any questions or tips about how to encourage blog comments. If you need help simplifying your blog’s commenting system for your visitors, or dealing with comment spam, please let us know!