30Sep

Kobayashi Online gives Hair Dynamics a corporate identity makeover

Posted in Kobayashi Online Tags: , , ,

Hair Dynamix is a top-notch salon and spa in Toronto’s Beach neighbourhood. We’ve known them for a while, having redesigned their website years ago. And when they decided they needed a corporate identity refresh, we were very happy they came to us again.

This corporate identity makeover involved creating a new logo and reworking marketing materials

Some examples of Hair Dynamix's signage and marketing materials

What resulted was a new, unified impression across its business cards, brochures, signage, and monthly email blasts. Why go to these lengths? It all serves to communicate what Hair Dynamix is all about.

For the past 30 years, Hair Dynamix has been a family owned and operated salon and spa. It’s known for its great service, familiar faces, and, yes, its famous cappuccino.

The font featured in the new logo incorporates thick and thin strokes, mimicking hair’s organic waves and curls. The new design is professional, contemporary, timeless, and distinctive. This helps show Hair Dynamix’s unique approach to hair styling.

Like any makeover, there’s a lot of anticipation about how it will turn out. A covered sign on Queen Street East had many curious about Hair Dynamix’s new image. The new logo was unveiled today to a crowd of supporters and local media.

Judging by the response we received, we think we did a good job.

Below are some photos from today’s launch:

Be the first to leave a comment »
29Sep

Accessible Web design: Why make your website accessible?

Posted in Website Marketing
A speech bubble made up of various accessibility-related terms (image by Jil Wright)

Image by Jil Wright

The World Health Organization estimates that about 15 per cent of the world’s population lives with some form of disability. Furthermore, nearly everyone will be temporarily or permanently impaired at some point in their life and those surviving to old age will experience increasing difficulties in functioning. Though often ignored, disability is part of the human condition.

Accessibility is increasingly a concern when planning a building, yet many websites are designed without accessibility in mind.

Accessible design helps make online content open to a wider range of people including those with disabilities that impact sight, hearing, comprehension and learning disabilities, movement, and speech. An accessible site basically ensures that people can navigate the site using a browser and assistive technology that is designed to help people interact with webpages.

With this in mind, we put together some reasons why you should think about accessibility when building a website.

Reach a wider audience

As stated above, 15 per cent of the world’s population lives with some form of disability. Nationally, 14.3 per cent of Canadians reported a disability according to Statistics Canada, and more than 12 per cent of Canadians live with some form of vision loss according to the Canadian National Institute for the Blind.

This means that a site that’s compatible with screen reading software and other adaptive technology solutions can reach a significantly larger segment of the population This can also make your site stand out among other, less accessible sites.

Comply with Government Standards

World governments are implementing accessibility standards for people with disabilities for the webpages they operate.

In the US, Section 508 requires that federal agencies’ electronic and information technology be accessible to people with disabilities.

To meet its commitment to Web accessibility, the Government of Canada has adopted the Web Content Accessibility Guidelines 2.0. The latest Standard on Web Accessibility lays out a plan to make public-facing government sites more accessible over the next few years, and all new webpages created after October 1, 2011 must immediately conform.

Search engines favour accessible websites

Search engines tend to overlook visual content in favour of simple, readable text and text labels found in the underlying Web code. Basic things that are expected to make a website accessible such as alternative text for images and distinguished headlines make a website visible to search engines. This is a win-win for Search Engine Optimization and accessibility.

Accessible websites work better on mobile phones

Good Web design practices are essential to making webpages that translate well to mobile browsers, but they’re also a baseline requirement for accessible sites. Some of the practices that make websites mobile friendly and accessible are the use of DIV elements and CSS styling, and avoiding Flash, which isn’t universally supported.

Accessible websites require more preparation and well-written source code. This added attention to detail means that sites are not only more accessible, but better interpreted by mobile browsers, and more intuitive to interact with on different sized screens with or without a mouse.

Accessible sites are more usable by everyone

Audiences of all stripes, especially older people and “non-techies”, find it easier to interact with a site that has usability taken into account.

“A primary focus of accessibility is access by people with disabilities. The larger scope of accessibility includes benefits to people without disabilities,” said Shawn Lawton Henry in the first chapter of her book Web Accessibility: Web Standards and Regulatory Compliance. Making websites more accessible helps everyone, and as the “Baby Boomer” generation ages and more services go online, accessible design will play a more important role on the Web.

Your Site Can Express a Philosophy of Inclusiveness

Meeting accessibility standards can show visitors of all abilities that your organization values inclusiveness. If there aren’t specific accessibility requirements for your organization, you can be seen as a trailblazer.

The CNIB even lets you display an exclusive Site Check certification badge on your website if it passes an accessibility audit, showing visitors your organization’s forward-thinking approach to barrier-free Web design and commitment to customers.

The inventor of the Internet, Tim Berners-Lee is quoted as saying, “The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” Websites that follow Web accessibility guidelines help meet the Internet’s promise of connecting people from around the world.

In this spirit of connectivity, Kobayashi Online creates friendly online experiences, and is working to design sites that all visitors can use. Have any questions about accessible Web design? Please let us know!

1 Comment »
23Sep

Around the Office: TEDxToronto, Khan Academy, a massive IE crash, and 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 listening to the TEDxToronto conference today, in which Adam Garone talked about the genesis of Movember, a brilliant, real-world viral marketing campaign that helps create prostate cancer awareness among men. It’s proven every November that a ‘stache is a great conversation starter. Can’t grow a moustache? You can always go with the stick-on variety.

Wayne’s been doing some night school at Khan Academy, a website that has 2,400 odd educational videos on topics ranging from Black Holes to US social security, the French Revolution to linear algebra. Wayne’s been watching some of the finance lectures, but he’s interested in pursuing more topics. Given enough time, he might be able to take on A. J. Jacobs and his encyclopedic knowledge.

Having an article featured on Google News can drive loads of traffic to your website or blog. Roberto has been interested in Google’s largely secret process by which it picks its top stories. According to the Atlantic Wire (which often tops Google News), your article has the best chance if your site is the authority on a particular topic (like ESPN is to sports), there are relevant keywords in the title, and the story is being shared a lot on social networks. Some things to avoid are posting content copied from other sites and vague headlines that lack keywords. For more tips, check out the Atlantic’s Google News tip sheet.

Eva knows how annoying it is when Internet Explorer crashes expectantly. The comedy site 9GAG, shows a screen capture of someone who must have had a lot of windows open when it crashed, causing a cascade of messages. It reminds us of the waterfall of cards when you finish a game of Windows solitaire. If this came up after IE crashes in the middle of writing a long email, it would soften the blow a little… just a little.

Be the first to leave a comment »
20Sep

Kobayashi Online wins WMA WebAward for Word11.com

Posted in Kobayashi Online Tags: , , , , ,

The Web Marketing Association announced the winners of its coveted WebAwards on Thursday with Kobayashi Online being recognized for Outstanding Achievement in Web Development for Word11.com, the website for Toronto’s first 24-hour blogging festival.

The WMA also awarded OPTIMUS | SBR and Grace Marketing the Consulting Standard of Excellence for the OPTIMUS | SBR Corporate Website, which Kobayashi Online helped develop.

The WebAwards have been around since 1997, and are judged by a team of independent Internet professionals representing various relevant fields including media, advertising executives, site designers, creative directors, corporate marketing executives, content providers and webmasters.

According to the scores given to Word11.com, the site ranked well ahead of other sites based on design, innovation, content, technology, interactivity, and copywriting.

The WordPress theme we developed for Word11 includes a menu for the whole site and four custom sidebars. The theme header features two different designs with day and night colors, which change when the user updates the browser or goes to a different page.

To enable compelling header fonts, we incorporated a JavaScript-based typographic engine that allowed us to use the Yanone Kaffeesatz font available through the Google Font API.

We also put considerable work into designing a colourful logo that helped set the tone for the website, and communicate that Word11 is a significant, modern, forward-looking event.

One judge commented: “”The color palette stood out to me on this website. I enjoyed the color choices and the grey-style combination. The inclusion of share features and displaying new media platforms emphasizes knowledge the entity has in conducting this type of event.”

Word11.com lets visitors share its content on more than 300 social networks and aggregators using the”AddThis” social bookmarking plugin.

One of the other great things about Word11.com is that it lets site administrators make updates and change content easily. All the content of Word11.com, including its sidebars and header, can be easily edited using the WordPress dashboard without HTML or programming knowledge.

Kobayashi Online also helped create the award winning website optimussbr.com, which provides both existing and prospective clients with a central place for information regarding the firm and its services. For more information on the Optimus | SBR website, check out the news release on the Optimus | SBR Insights blog.

We’d like to thank the WEA for the recognition, and congratulate all the other WebAward nominees and winners who continue to expand the horizons of Web design.

Be the first to leave a comment »
16Sep

Around the Office: Rating Places, Winning WMA Awards, “White is the New Green”

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.

We’ve been noticing more clients writing reviews on our Google Places page, and excited about what’s being said about us. Toronto interior design company Shaw-Pezzo said, “The tech area is one that we are hopeless in but with Brent and his wonderful team we can rely on them, so that we can do the things that we do best.” What really impressed us is that they were so determined to do a review that they stuck with a submission process that they found difficult. We think this type of testimonial is invaluable for any business. Thanks Shaw-Pezzo!

This was a busy award week with the Web Marketing Association awarding its WebAwards for excellence in website development. Kobayashi Online won a coveted WebAward for designing Word11.com, the website for Toronto’s first 24-hour blogging festival. We’d also like to congratulate our friends at OPTIMUS | SBR and Grace Marketing which were recognized for optimussbr.com. We’d like to thank the WEA for the recognition, and applaud all the other WebAward nominees and winners who continue to expand the horizons of Web design.

Eva saw Greenpeace’s new “White is the New Green” ads in South Africa as an example of how design can have a real-world impact. These ads show shanty towns with white roofs that show the shapes of adorable arctic animals. The images are designed to encourage South Africans to paint their roofs in reflective white to conserve energy and lower local temperature. Cooler cities mean even cooler poles, according to Greenpeace, helping preserve the natural habitats of polar animals that may seem a world away.

Some bloggers point out that those living in poor rural villages are less able to make changes like painting their roofs white, than more wealthy city dwellers. However, the shanty towns may, in fact, be more effective in spreading this message, given that reports show that the poor are most affected most by climate change.

Be the first to leave a comment »
13Sep

Responsive Themes Help Make WordPress Sites Mobile Friendly

Posted in Website Marketing Tags: , , , , ,

We’ve been getting more and more requests for mobile friendly websites – sites that deliver a consistent experience on any screen from enormous 27-inch monitors to iPhones. These sites don’t just redirect mobile users to a different, mobile-specific site — these sites conform to their specific needs. All mobile users have to do is type in the website address and they have a site that works and looks great.

We’ve found that good design often translates well to mobile browsers. Just like when we designed sites before the growth of mobile, we use div elements, CSS styling, and avoid flash. A key addition we’ve made to our bag of tricks is adding mobile friendly forms thanks to HTML5.

Another important element of designing for mobile is responding to different screen sizes using different CSS styles. This is known as “responsive layout”, and can be done using “media queries”, which help browsers define which stylesheet to use.

Developers can also 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.

Rather than delve into creating a responsive design from scratch, the user-friendly blogging platform and content management system WordPress makes responsive design simpler thanks to a handful of themes that are designed to show content on screens of different sizes and dimensions.

A great example of this is the Twenty Eleven theme, which was the new default theme when WordPress 3.2 was released recently. Just by changing the width of your browser, you can see how this theme changes for different browser and screen sizes. In browsers wider than 800 pixels, the website is shown normally. But as the browser gets smaller, things start to get interesting.

When the browser is 800 pixels or narrower, the basic layout is simplified. Any content on a right-side column has been moved to the bottom of the page. This streamlined layout emphasizes a single, linear column that makes scrolling through content easy.

As the browser shrinks to 650 pixel width and lower, the font sizes reduce for better readability on smaller devices. Also, because fonts in Twenty Eleven are defined in ems, they will scale based on what’s normal in a browser. This means that when a reader changes the browser font size, large fonts will remain relatively large, and small fonts relatively small.

These are some of the ways Twenty Eleven helps ensure your website looks its best at any size.

Twenty Eleven can be used to easily create many types of sites, but one of the most impressive is a mobile-friendly photography or design portfolio site. To make sure your image posts look their best, choose the click the right “post format”. There are various post formats such as “asides” and “links” but the one you’ll pay attention to most for this type of site is “galleries” and  “images”. These post formats help you neatly display your photos and designs, and, on top of it all, it’s mobile friendly.

Aside from Twenty Eleven, there are some other free WordPress themes with responsive layouts, such as the beautiful Yoko theme, the clean and minimalist Scherzo theme, and the Mac-styled iTheme2 theme. These themes offer many different options for creating different sites that all respond to the browsers and devices they are shown on.

Need more help ensuring that your site looks its best on any screen? Kobayashi Online can help you deliver great experiences to your visitors, no matter what device they use!

2 Comments »
09Sep

Around the Office: Augmented reality, Web radio and background music

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.

360 Langstrasse, a site that lets visitors navigate a Zürich street by scrolling down a webpage, has made us think about navigation online and off. Wayne noted that the immersive experience of exploring a city is done relatively well on mobile interfaces. Layar Vision, for instance, can recognize real world objects and overlay an “augmented reality” layer on top of them. iPhone, Android, or Symbian OS phone users can download the app, allowing seemingly ordinary objects and places to come alive with interactivity.

Daveed has been enjoying the TuneIn radio app for iOS, which is free with ads or only 99 cents without. Other Internet radio appliance are cool, but they can cost hundreds of dollars, and still can’t do most of what TuneIn can. It’s the best radio software he’s seen yet.

Interestingly, as each new app comes out, it seems that a standalone device is threatened. As Daveed always says about kitchen gadgets, “If they can only do one thing, what good are they?” We already see this idea applying to electronics, where portable multitasking devices are encroaching on the ground of single-purpose ones. Even with radio, however, Apple’s iPhone will have to complete with the radio toaster for control of the kitchen.

Eva discovered this week that background music can have a positive effect on software developers. According to a study by the University of Windsor, developers who work in silence churned out the lowest quality work and it took them longer to finish tasks. Those who had a workplace soundtrack had a heightened mood, and were more perceptive and curious, which are all bonuses for creative minds. It might not work for every workplace, but think about the productivity gains from cranking some tunes.

1 Comment »
07Sep

Online Friendly Fonts: Six Web Typography Services

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

It used to be that Web designers were limited to a handful of “Web-safe” fonts, which made for predictable, if not boring, websites. Now, high-end typography is within reach of all website owners, making it possible to use nearly any font imaginable.

Still, there are limits to how you can use fonts on your website. Fonts typically take hundreds of hours of work by skilled designers, and they can cost hundreds or even thousands of dollars to buy. Luckily, there are several services available to put high-quality fonts within reach the budgets of most people and organizations.

There are services that charge a small fee for the use of premium fonts specifically tailored for use on the Web. These services include Typekit, WebINK, Webtype, and Fontspring.

We believe in making online friendly, and we think it shouldn’t cost much to make great websites, so we’ve included some free options that provide high-quality fonts. These services are Font Squirrel and Google Web Fonts.

Typekit

Typekit is a popular option for Web designers, offering fonts from some of the best foundries worldwide such as Adobe, FontFont, Mark Simonson, and Veer.

The setup simply involves dropping two lines of JavaScript into the head of your webpage.

Typekit pays careful attention to the quality of font rendering and works closely with font foundries to ensure their fonts are high quality. One of the issues with Typekit, however, is that hinting (extra information that helps browsers produce clear, legible text) is left up to the font foundry. This means that Typekit fonts render quality varies from superb to sub-par. Typekit, however, offers multi-browser previews of every font so you know how your font will behave, without having to do exhaustive (and exhausting) testing on your own.

There’s a free version of Typekit which lets you use two Typekit fonts on one website as long as there are fewer than 25,000 pageviews per month. For more ambitious users, the “Portfolio” package costs $49.99 per year and includes full font library access, unlimited websites, unlimited Fonts per site, and a cap of 500,000 pageviews per month.

Our Experience: We found that Typekit wasn’t cost-effective for our Web design needs. Because it’s a subscription if we stop paying, a client will lose their design.

As a business model it’s not good for us either, because as a professional or enterprise client, we could simply have a junior designer make headlines when needed instead of paying the fees for dynamic text and https support.

That said, Typekit’s subscription model should suit some customers. Part of the subscription fees, after all, go toward making fonts automatically work on new and updated browsers and operating systems as they come out. This saves a company time because they don’t need to do any manual updates or write any code to ensure the fonts continue to work.

WebINK

WebINK lets you put professional-quality fonts on your web site, including many great fonts for smaller text. Its library includes nearly 4,000 fonts from some of the best foundries such as Adobe, Dalton Maag, ParaType, Isacotype, and Optimo.

After a 30-day trial, WebINK is available in various packages starting at $0.99 per month per type drawer (find out what that is), up to the “Premium” package which starts at $2.99 per month. Font usage is also billed according to usage, so a Premium plan can run as high as $59.99 per month with 80GB of bandwidth.

One of the most exciting features of WebINK is its “FontDropper 1000“, which lets you see how Web fonts will look on live webpages. You can use it on any Web page to start start dropping in different fonts.

FontSquirrel

The @font-face method lets you easily use nearly any font using some simple code. @font-face should work on Android, iOS, and all desktop browsers. Because of licensing concerns, however, you cannot simply embed any font you like. Many mainstream foundries  now sell fonts with a Web-version license on sites like myfonts.com. But free fonts can also be a great option.

One of the best free font sites is Font Squirrel, an online directory of hand-picked, free, high-quality, commercial-use fonts. It includes hundreds of free fonts, and will even send you to other sites like fontex.org to get them.

Font Squirrel provides @font-face kits containing all the font formats, CSS code, and demo files you need to add fonts to your site. To install Font Squirrel fonts, copy the font files to your server, and add the CSS code to your site’s stylesheet. These fonts

Font-Squirrel also has a utility that lets you create a Web version of a font , whether it’s free or you have the Web license for it.

Font Spring

From its large, searchable marketplace, Font Spring lets you discover and buy specific webfonts. Popular foundaries on Font Spring include FontSite Inc., Typodermic, Canada Type, and Insigne Design.

There are no subscriptions, and, for a small fee, nearly all of the font families offered on Font Spring can be each purchased for unlimited use on websites you control.

Because you download and host the fonts on your own server, there are no pageview limits like there are with Typekit and WebType.

All Fontspring webfonts have been auto-hinted so that they render properly. Unhinted fonts can look jagged or blurry in Windows browsers. To further ensure you know what your font looks like, each font family page has a @font-face demo tab that shows the actual webfont embedded in the page. You can use this to preview in various browsers before you purchase.

WebType

Providing fonts for high-quality online typography, Webtype includes typefaces designed from scratch to look great onscreen.

Unlike many other font services, WebType allows users to search for fonts based on the intended font size to use. For instance, if you’re looking for paragraph text, the font will look better in a small size, and heading font will look better in a larger size. WebType makes it clear which size range each font is intended for.

WebType users start off with a free, one-month trial and can test all Webtype fonts free for 30 days. Then subscriptions start at $40 per year for sites that have fewer than 250,000 pageviews per month.

WebType hosts each font using servers from around the world, and in addition to ensuring quick load time for website visitors, there are many other features that are made possible. WebType provides automatic browser support to make sure that the best font files are served to each viewer depending on which Web browser they use. Updates to Webtype fonts (due to changes in browsers, operating systems, and fonts) are implemented automatically without any extra work on your part.

Google Web Fonts

Google Web Fonts offers hundreds of free, open-source fonts. Since all the fonts are open source, you are free to use them in any way you want, share your favorites with friends and colleagues, and even improve or customize them. Granted, Google Web Fonts has a limited selection of fonts.

Google Web Fonts is among the most simple systems to setup: Once you’ve decided on the font you want to use, Google provides a line of CSS to paste into the head of your website. Google will even let you customize font features such as size, and provide you with a custom code for those changes.

According to some reports, Web Fonts render quite nicely in all the latest browsers, but not as well in older ones, so be sure to check your site in browsers like Internet Explorer 6.

With the many options for different fonts, it’s easy to go overboard and use too many fonts at once. We’re recommend limiting yourself to just two or three well-chosen fonts. Many excellent sites use a fancy title font, and an easy-to-read one for site content.

The decision on what font service to use often boils down to what fonts are available and how good they look in a browser. Some fonts are worth paying a steeper fee. And sometimes you’d rather use a free service and find an equivalent font.

There are now many font options available. You’re no longer stuck with the default fonts such as Arial, Times New Roman, and Georgia. Go out and try some new fonts!

Need help making a favourite font work on your website? Or choosing a font that communicates your brand? Let the experts at Kobayashi Online work with you to find and implement the right typeface!

4 Comments »
03Sep

Around the Office: hand-drawn websites, the value of failure, 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.

We’ve been inspired by the fun and quirky websites that use a hand-drawn style of design to add the look of doodles and sketches. Vandelay Design has rounded up 25 examples of sites that use hand drawing, including the site of musician Jason Grey, which incorporates some great hand drawings, and Frocktastic incorporates a combination of hard-drawn and photographic elements. While hand-drawn movie titles have become cliche to the point of parody, we think hand-drawn websites have a place on websites beyond the prototype phase.

Kobayashi Online has been strengthening its profiles on the social networks. Its Facebook page now has the “vanity” URL of facebook.com/KobayashiOnline. And a handful of new LinkedIn testimonials have come in. Spark Boutik president and CEO Steve Dao said of Kobayashi Online, “The team is always quick to implement and offers additional recommendations after taking the time to understand what we are looking to accomplish.” Movie companies have known that testimonials

We’re still getting used to Steve Jobs leaving his post as head of Apple. Since then, we’ve had some time to reflect on Jobs’ successes… as well as his failures. “Jobs failed better than anyone else in Silicon Valley,” writes Nick Schulz, an AEI resident fellow. Long before successes like the iPod, iPhone, and iPad, Jobs had a fair number of failures which led to his departure in 1985. Jobs said in a Stanford commencement speech: “It freed me to enter one of the most creative periods of my life.“

These failures have undoubtedly helped Jobs refine his later efforts, Schulz concludes. “Steve Jobs is a reminder that failure is a good and necessary thing,” he writes, “and that sometimes the greatest glories are born of catastrophe.”

In his presentation at Toronto’s Word11 blogging festival, Brent talked about how failures can help drive blog content, and (believe it or not) build customer trust. “Understanding why you did something and talking about what you learned from it not working shows you’re thinking and willing to improve,” he said. “Trust is built because we all fail at something and no one trusts another person who only talks about their victories.” So remember, make note of failures as well as successes.

Be the first to leave a comment »
01Sep

Is my website mobile friendly? Three questions to ask your Web developer

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

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?

iPhone photo courtesy of incase

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.

1. Are my forms in HTML5?

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.

2. Does my website work without Flash?

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.

3. Do I have a different CSS style for mobile?

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!

6 Comments »