28Oct

Around the Office: Facebook/WordPress integration, real-life e-commerce, more

Posted in Around the Office Tags: , , , , , , , ,

Around the Office is a weekly group blog that shows what the OnlineFriendly.biz team and Kobayashi Online have found interesting, funny, poignant, or otherwise notable over the past week.

Roberto knows some ways to make Facebook and WordPress work together. For instance, you can link your WordPress blog and your Facebook account to automatically show your followers every new post when they sign into Facebook. You can also configure Facebook to record social analytics for your WordPress site, giving you insight into user engagement and demographics on the Facebook network. Using Facebook in conjunction with a WordPress site can help reinforce its impact.

Brent likes the idea of bringing e-commerce into the real world. It’s not science fiction! The Korean division of Tesco supermarkets made it possible to go shopping on a subway platform using a mobile phone. They put full-scale images of their aisles and cellphone scan-able QR codes in the subway, letting commuters browse and scan the items want to buy as the wait for their train. Once they’ve filled their virtual shopping cart, they can purchase the items and have them delivered for when they get home. Going to a shop sounds downright tiresome in comparison.

Eva found a new online application this week that extracts colors from images. Whats Its Color not only does it find the primary and complementary dominant colors, but it also finds visually unique colors in an image. This application can be extremely useful for creating a design around an image.

We love getting feedback from the people around us, and that’s one of the reasons we liked how Heidi Cool crowdsourced the focus of a WordPress talk she was presenting. By asking for input on LinkedIn, Twitter and Facebook, she was able to get some topic suggestions and valuable advice. Relying on the crowd to make decisions isn’t always the best idea (for instance, would you only listen to music from the current top 40 charts?) but asking for crowd input can give you a great place to start. According to feedback after the presentation, she, in fact, did come up with a relevant and useful presentation by first asking what people wanted.

Be the first to leave a comment »
27Oct

Q&A: CNIB’s Marc Hamann on Web accessibility

Posted in Website Content, Website Marketing Tags: , , ,

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.

2 Comments »
25Oct

Don’t lose your domain: Tips to keep your domain safe

Posted in Website Marketing Tags: , ,

Losing your domain is a big deal for any site owner. A client of ours recently had their domain expire because they didn’t renew their domain, leaving them without email or a working website. As anyone can imagine, this can have a devastating effect on your business and productivity.

Usually, someone will notice that their website is down and figure out that they have to renew their domain name contract, and after it expires there’s usually a period when you can get it back. However, after this period, which typically lasts anywhere from two weeks to 30 days, your domain is up for grabs, meaning that you could lose it for a year or more.

There are many reasons why someone would buy your domain after it expires. They could register your domain to try to sell it back to you for to someone else, or create a webpage at the domain for ad revenue. Of course, they may not be hoping to get your domain for a nefarious reason. Someone could be waiting for your domain to expire so that they can start a legitimate website using that perfect domain name.

We put together the following suggestions to help you avoid losing your domain:

Sign up using the email address you use regularly – If your domain expires, all the email addresses that use that domain name will also expire. To get around this, you should register for your domain using an email address that doesn’t end in your domain name. This will be the address that your domain provider will use to contact you. It could be a free email address from a service like Gmail or Hotmail, but make sure that you sign in regularly or else the account could be closed because of inactivity.

Create a paper file of your domain information — Your business should have a hard copy of your domain information. Make a special mention of when the date the domain registration is due to expire, and when the credit card used to pay for the account expires. Making a paper copy of your login information and putting it in a safe place can be a great way to keep this essential information available, and save you from being locked out of your domain account in case you forget any of the credentials.

Keep contact info up to date — It’s vitally important that your domain provider know your current email and billing address so they can contact you. It’s in your domain provider’s best interests to remind you to re-register your domain, and most will send you reminders to renew your domain before it expires.

Put your domain provider on your email safe list — To ensure you can receive emails from your registrar, place their email address on an email whitelist so that an important renewal reminders don’t accidentally go into your junk email folder.

Opt for auto-renewal – If your registrar has an automatic renewal, you may want to use this option. It’s usually easy to turn auto-renewal off if you decide to

Have a current credit card on file – Be sure that your credit card information is up to date. If the credit card your registrar has on file expires, so does your domain.

Make sure your domain is yours – If you deal with a Web designer or Web host, it’s possible that your domain name is not registered in your name. You can find out what name is registered to your domain buy searching your domain’s WHOIS info. If your domain is owned by someone else, you should request a change in the registration info so that you’re the named owner of the domain. You should have the domain in your name because it will be easier to transfer to a new service provider if, for instance, the company that manages your domain or website goes out of business.

What to do if you lose your domain

Sometimes it happens that your domain accidentally expires, and someone else has registered the domain before you’ve been able to buy it again.

In this case, you may be able to contact whomever bought it and buy it back from them. If your domain corresponded to a registered trademark or business name, you could file a complaint with the domain name regulatory body known as ICANN under its Domain-Name Dispute Resolution Policy. If these options don’t work, you may have to wait a year or more before the domain becomes available again, and hope that whoever bought the domain didn’t think to renew it.

As long as you’re careful, you’ll be able to keep the domain you have for as long as you want. Need help keeping tabs on your domain? We’re very careful at Kobayashi Online that the domains we manage don’t expire without you knowing about it.

Be the first to leave a comment »
21Oct

Around the Office: WordPress SEO tips, Googling images, Chrome’s arcade, more

Posted in Around the Office Tags: , , , , , , ,

Around the Office is a weekly group blog that shows what the OnlineFriendly.biz team and Kobayashi Online have found interesting, funny, poignant, or otherwise notable over the past week.

This week Roberto found a great summary of some simple practices to make a WordPress site more visible in the eyes of search engines. Including keywords in page titles and headings, install an SEO plugin, and use descriptive tags and keywords were all among the top 10 tips.

We’re very happy with the current WordPress plugin Formidable Forms, but to make it even better, we suggested that the developers, Strategy 11, add a query parameter after the form has been submitted. This would help us collect data for analytics purposes. Strategy 11 helpfully obliged, telling us this feature will be added in a future release. We’re eagerly anticipating it!

If you don’t have words to describe something, you certainly don’t have words to search for it. An image may be the answer thanks to Google’s new image-based search, which lets you simply drag and drop an image file into the search bar and wait for the results. Wayne finds it great for finding a specific location, such as identifying the places vacation photos were taken.

You can now play your favourite classic arcade games in the Google Chrome Web browser thanks to an adaptation of the popular game emulator MAME. Daveed has been checking out the case study which explained the process of porting MAME to run in the Chrome Web browser in only four days. Understanding the the particular technical challenges sweetens the experience of playing classics such as Star Fire or Robot Bowl.

Brent has lots of experience with BlackBerry phones, but he’s afraid the name of its new operating system, BBX, is lackluster. He agrees with commentary by brand identity expert Andris Pone, who wrote this week: “BBX is a meaningless, boring name that suggests a lack of any technology that can compete with that on the iPhone.” And while the software itself seems to be impressive, it seems that BlackBerry has squandered a precious opportunity to tell a compelling story using its name.

Be the first to leave a comment »
14Oct

Around the Office: virtual worlds, online privacy, the two sides of versatility, more

Posted in Around the Office Tags: , , , , , ,

Around the Office is a weekly group blog that shows what the OnlineFriendly.biz team and Kobayashi Online have found interesting, funny, poignant, or otherwise notable over the past week.

Wayne has been checking out Chrome Experiments, a collection of applications to inspire anyone interested in experimenting creatively with the Web. Wayne’s been exploring 3 Dreams of Black, three virtual dream worlds which are created collaboratively and combine rich 2D drawings and animations with interactive 3D sequences. He also recommends Z-type, a space shoot’em’up that uses typing skills to save the galaxy (like a mash-up between The Last Starfighter and Mavis Beacon Teaches Typing). While you’re at it, check out an elegant Chess game that features some unusual-looking pieces, and challenging AI.

Brent came across a Toronto artist this week who creates original pin-up art and accessories she sells on Etsy under the name Bombshell Artillery. It’s good to see that working in technology doesn’t dull one’s taste for classic design.

Daveed thinks that weak online privacy, exposed by a new Stanford University study, will help “Do not track” legislation gain steam. The study looked at the 185 most visited websites and found that more than half shared username or user ID information with another site. And while it’s possible to avoid being tracked, the US Federal Communications Commission has proposed a law to limit what personal information can be collected online.

Roberto wants you to know that WordPress is not only for blogging. As Make Use Of explains, WordPress is a versatile content management system that can be used for e-commerce, classified listings, members-only sites, review sites, and discussion forums.

Given all this power, however, it’s important to hide some features so as not to overwhelm clients with too many options, which can irritate them or lead them to break the site. According to a recent Six Revisions article, Web developers should try to streamline their client’s experience so that they only have access to what’s necessary.

Be the first to leave a comment »
12Oct

Carousels: Rotating your featured webpages to help turn heads

Posted in Website Marketing Tags: , , , , , , , ,

You cannot count on website visitors to scroll to find your content, so why not scroll your content for them? You can do this using what are known as “sliders” or “carousels”. Like their fairground counterparts, website carousels rotate — but rather than moving model horses and unicorns — they move images and links.

Bell Canada is one of many major businesses that
uses changing images to draw attention to its various
initiatives.

A carousel is actually a standard application that you’ve likely seen when visiting high-profile sites. For instance, telecom company Bell Canada features a carousel prominently on their homepage, showing visitors a links to pre-order the iPhone 4S, sign up for high-speed Internet, get a promotional PVR, and more as it cycles through.

It’s a great way of showing your site’s content without overwhelming visitors with too many links and images at once. We also think the movement and anticipation of the next content makes the rotation of your posts or pages a visually stimulating element to most sites.

There are lots of companies that are using carousels well, and based on these companies. The following are some guidelines we’ve picked up for creating an effective carousel:

Write engaging content – You should strive to give your blog posts and webpages short, descriptive titles. When the each headline is scrolling by, it’s important that you write something that spurs people to visit that page. Also, make sure it can be read within the allotted time because you can’t count on someone going back to read it.

Canadian photography store Henry’s makes its
carosel interesting to visitors using compelling
images that accurately show the products and
services it offers.

Have attention-grabbing images – You only have a short window to capture the visitor’s attention so you have to make sure that the images are clear and compelling. A consumer-grade camera will certainly capture greatt images in the right hands. Otherwise, you can hire a professional photographer, or use stock image that can be used to convey the topic of the blog post or page.

Give users control – Your gallery is like a subway, taking users from one place to another, and you don’t want someone to miss their stop. By giving users the option to stop the rotation, they can hold open the subway doors for as long as they want.

Also, letting users cycle through the rotation allows them to browse at their own pace, which could be faster or slower than the default setting. Instead of having to wait for the subway to get to each destination, it’s like the user can teleport to each station.

GO BIG — We often limit the size of static images and text because we have to be economical with space. When these links and images are contained in a carousel, however, they often benefit from being large and immediately visible. You should think of carousel images and text somewhat like road signals that guide your website traffic — they should be large and clear.

We designed the website for electrical supplier
Avnan to show the various aspects of its business,
including its custom engineering, high product
and assembly quality, and its inventory logistics
expertise, all on the home page.

Do it right — When you talk to your Web developer about how to install a carousel, they should know there are various options. We like the Anything Slider, which is a plugin for the jQuery JavaScript library that can be used to create a custom carousel and display any HTML content. Another option is bxSlider, a feature-rich  plugin for jQuery that shifts through images and links.

If you’re using the WordPress as a content management system, some themes like MagPress already have a rotating story gallery. If your theme doesn’t have a built-in carousel, you can use an add-on plugin like the Featured Content Gallery by iePlexus, which automatically rotates your posts or pages for use anywhere within your theme. With some customization, it will fit with nearly any theme.

We’ve found carousels to be extremely versatile, having designed ones to show the features of EchoWorx’s mobilEncrypt ENDPOINT encryption software, display some spectacular photos taken at Casa Duma Cottage, and give website visitors a sense of what Fathom Co. lifestyle public relations is all about.

If you’re hoping to draw attention to specific pages and different initiatives on your site, adding a carousel could be a good option for your website.

Need help getting your carousel running? Kobayashi Online is here to make online friendly, and we’ll work with you to create the right website for your business!

1 Comment »
07Oct

Around the Office: custom grids, proper CSS3 use, what Google knows, more

Posted in Around the Office Tags: , , , , , ,

Around the Office is a weekly group blog that shows what the OnlineFriendly.biz team and Kobayashi Online have found interesting, funny, poignant, or otherwise notable over the past week.

Grids are an important part of both online and offline layout. Eva created a custom webpage grid system this week using the Grid System Generator. Choosing from a variety of base templates, you can plug in custom page widths, margins, and column numbers to quickly create a CSS and XHTML-compliant base for rapid prototyping, development and production. What you do with your grid is up to you.

A post on Web design blog Six Revisions this week confirmed our notion that CSS3 sites are only as good as the experiences they create. Author Delwin Campbell explains that CSS3 hasn’t ushered in anything new in terms of fundamental design and visual presentation principles. And while cosmetic CSS3 properties work on the aesthetic level, they shouldn’t get in the way of the user experience. It’s tempting to go overboard with new CSS3 options, but “Because I can” is not a good reason for design decisions.

Want to start running, but need some motivation? Wayne thinks running away from Zombies could be the motivation you’re seeking. Zombies Run is a new interactive iPhone game that lets you experience the terror of approaching Zombies safely through your headphones. Keeping pace means remaining alive. And while you’re not actually in harm, the game will help prepare you for the inevitable zombie uprising.

An article in the London Review of Books on why we should care that Google knows a lot about us resonated with Daveed who knows enough to be critical of how personal information is collected and used. Once considering the implications, Google’s seemingly innocuous mission “to organise the world’s information and make it universally accessible and useful”, starts to lose its charming veneer.

While it seems to us that Google has done reasonably well not to betray the public’s trust even while photographing all the world’s streets or scanning all the world’s books, an ethical conundrum arises because Google is, in fact, in competition with other companies for the world’s information. The problem is that information shouldn’t be the property of only one company. On one hand, what company could compete with Google’s head start on information? And on the other hand, what other company would have the imagination to pursue these projects?

Finally, on a sad note, Steve Jobs died this week after a seven-year battle with pancreatic cancer. We’ve written about Jobs on Around the Office from time to time, largely due to the distinct vision he brought to technology. It goes without saying that he will be missed. As a true memorial, we hope that others are inspired by Jobs to bring creativity, insistence on perfection, and elegance to what they do.

Be the first to leave a comment »
04Oct

The Path to Accessibility: Six Questions to Ask Your Web Developer

Posted in Website Marketing Tags: , , ,

With about 15 per cent of the world’s population living with some form of disability (pdf), accessibility is increasingly becoming an issue that cannot be ignored when, for instance, hosting an event or planning a building, yet it’s still often an afterthought for websites.

An image of a keyboard key showing the accessibility symbol

In an effort to simplify the process of making a website accessible, the W3 Consortium set out to provide a set of recommendations to make Web content more usable by everyone in its Web Content Accessibility Guidelines.

An accessible site should work with normal browsers and assistive software like screenreaders and talking browsers, which make the Web more accessible for those hard of hearing. There are also keyboard and mouse-replacement solutions that help users overcome physical limitations, allowing people to access websites using hands-free software that tracks use movement with a webcam.

Without getting into too much of the nitty-gritty technical bits, we’ve put together a few questions to ask your Web developer to will help make your website more compatible with browsers and assistive software so that everyone can access your online content.

1. Are there text alternatives for all non-text content?

Any multimedia on your site should have a text-only substitute. This means that images should have text descriptions have text descriptions, and audio and video should have alternative ways to get the same information such as transcripts. The resulting text can be changed into other forms such as large print, braille, speech, symbols or simpler language.

A great thing to do to boost accessibility is to add closed captioning to videos for the hard of hearing. Aside from making a site’s content more accessible, having the spoken content of a video written out can improve your video’s search visibility, and subtitles can be translated to multiple languages, making your video watchable by more people around the world.

2. Can my site be navigated using just a keyboard?

Because not everyone uses a mouse to browse the Web, all clickable elements and forms should be accessible with only a keyboard. Many keyboard users navigate through links by pressing the “tab” key, and “click” using “enter”.

These users require your page to make it clear what page element is selected or “in focus”. By default, webpages show an outline around the element the user is focused on, but some designers disable this function because they think it makes the page less attractive. Quite the contrary, this is an opportunity to add style, and make it much clearer for keyboard-only users where their focus is.

3. Is my site tagged appropriately?

Writing clearly is not enough to make your site accessible. Certain elements have to be tagged correctly within the underlying code. For instance, there should be a descriptive site title (using the <title> tag), and major headings should be tagged (using the <h1> tag), as well as subheaders (tagged with <h2> to <h6>). Screenreader software often lets users skip between them, simplifying navigation and letting visitors who cannot scroll scan a site.

4. Can users skip repetitive navigation links?

A consistent list of navigation links at the beginning of each page can be helpful, but they can be frustrating for those who are browsing with a keyboard or have software read out loud the links over and over again. To make this less irritating, there should be a way around having to go though them on every page.

A hidden “Skip to Content” or “Skip Navigation” link, for instance, can be included before the site’s main navigation so they can get straight to the page’s content. To ensure these links don’t disrupt the browsing experience of conventional browsers, they can appear invisible to all users until they come into focus when they’re selected using a keyboard or other input device.

5. Is my site laid out and formatted using CSS?

With its advanced capabilities and consistency, Cascading Style Sheets (or CSS) are more powerful than the old layout tables and inline HTML code we used to use to style websites.

While the difference in terms of accessibility between using CSS and tables for layout and formatting is minimal, according to Penn State’s statement on accessibility, CSS’s main advantage is that maintenance is much easier because it usually requires less code to make site-wide changes.

Another downside to using HTML tables for laying out page content is that tables are typically read by screenreader software starting from left to right and top to bottom, which may not be the order you want the page to be read.

If a browser doesn’t support CSS, the content of each page will lose its formatting but still be readable and usable. CSS elements can be placed in a logical order so that the text is coherent when CSS is disabled.

6. Is my text as visible as it can be?

For greater visability, you should ensure that the site has good contrast between the text and background colour. Black text on a white background is usually a safe bet, but the Microsoft Developer Network offers some advice on using the colour wheel to pick high-contrast color combinations. While not always the case, warm and/or dark colors work best for text, and cool and/or light color work best for the background as a rule of thumb.

Various browsers let users enlarge page text, but it’s often up to the designer to make sure that enlarged text doesn’t cause truncated or overlapping elements that ruin the site’s layout and make the text illegible. To avoid this, you can use what’s called “fluid” styling techniques to specify styles in percentages rather than in rigid pixels, and fonts in “ems”, a relative size that’s the font equivalent of percentage.

This guide is meant to help you and your Web developer on the path to creating a more accessible website for everyone. Be sure to test your site with various browsers and assistive technologies, and seek feedback from users. Also, accessibility standards are constantly changing, so it’s important to reevaluate your site from time to time.

At Kobayashi Online, we’re working to get more knowledgeable about accessible Web design, and we’re eager to set you up with some of the accessibility practices discussed in this article. Need some help? Give us a shout!

3 Comments »
01Oct

Around the Office: banking apps, Ninite Updater, font mustaches, more

Posted in Around the Office Tags: , , , , ,

Around the Office is a weekly group blog that shows what the OnlineFriendly.biz team and Kobayashi Online have found interesting, funny, poignant, or otherwise notable over the past week.

Brent has been finding his way to the bank using the TD Canada Trust app, which shows the closest locations for banking. Of course, if he doesn’t want to go in person, the app shows his account balances and activity, pay bills, transfer money between TD accounts, and send or receive Interac Email Money Transfers. And it’s not just TD that’s getting on mobile banking — all Canada’s major banks, in fact, have mobile apps including TD, Bank of Montreal, RBC Royal Bank, Sociabank, and CIBC. It is, however, easier to locate a bank than to figure out where your money goes.

How does Wayne manage to stay on top of the latest software updates? It’s not precognition, just Ninite Updater, which keeps software at its latest stable version. Where other software updaters tell you when new versions are available, Ninite goes further by automatically downloading and installing all your updates in the background. For just $9.99 per year, per machine, it can make fixing and reinstalling systems a lot easier.

Eva has been wondering how you’d look with a stylish typographic schnauz (or mustache) on your face. You pick the font, and typoschnauz will let you see how you’d look with a sideways curly bracket for a ‘stache. While you can make your typo schnauz your own, UK designer Ryan Davis has pointed out that certain bracket moustaches strangely correspond to the iconic lip ‘dos of Freddie Mercury, Tom Selleck and Hulk Hogan.

Once upon a time, automobiles dominated its streets, but Holland managed to change direction and become one of the world’s most bike-friendly cities. Daveed discovered a beautifully shot video this week that tells the story of the city’s embrace of biking.

Bicycles were relied upon in Post-War Holland, before the 60’s when increasing prosperity led to a rise in cars and the prioritizing of roads for cars. Finally, the 70’s, with its oil crisis, automotive casualties, and other world turmoil, ushered a two-wheel revival that has led to Holland leading the world in cycling infrastructure such as dedicated lanes and underground parking which enable and encourage everyone to bike.

Be the first to leave a comment »