Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

May 05 2012

14:00

Do’s and Don’ts of Designing Tablet Ready Websites and Resources

This is the link to the original article creator of this site, if this message appears to another site than 1stwebdesigner - Graphic and Web Design Blog - 1stwebdesigner is a design blog dedicated to bloggers, freelancers, web-developers and designers. Topics focus on web design and inspirational articles. it has been stolen, please visit original source then!

The Tablet Revolution is the evolution of mobile technology and desktop speed. This is not the techno flavor of the month and it will not go slipping into the dark. The Apple iPad and other tablet products are what will drive tomorrow for a long time to come. Website owners who don’t respect the Tablet Revolution and make needed changes in website design and layout are going to be passed over by tech savvy consumers.

It used to be so easy: just build a website for the desktop or laptop and wait for the customers to come zooming in. Then came mobile smart phones and savvy web designers ramped up with mobile versions for those who shop till they drop with their mobile. That was a pretty smart move and updating the website for tablet owners is going to be even smarter. We are going to use this article as your magic carpet to that next level. A few ideas and polite warnings (your business safety in mind), some examples of companies whose sites are tablet ready, and the tools and resources you need to create a site for the tablet flyers to land.

Why is it Important to Make Your Website Tablet Ready

International Data Corporation predicts that by 2015 more U.S. Web users will access the Internet through mobile devices than by using personal computers. PC shopping is going to the elephant graveyard and mobile devices are being used for shopping and will be for a long time to come. So if you haven’t already, you should be thinking about how to upgrade your website for tablet based shoppers.

Do’s and Don’ts for Creating Tablet Ready Websites

Okay, here is what you really, really should not do:

  • Don’t include Flash if you want your website to work on iPad.
  • Don’t have too many clickable areas (links, etc.) too close to one another. Navigation has to be easy to find and easy to interact with. Make it so.
  • Don’t have too much media cluttering your site. This ain’t your mama’s website, so don’t let it look like her kitchen. Besides, too much media can create loading issues.

You want to make your website tablet friendly? Here’s how you can do it:

  • Use the medium to spot the problems. Access your current website from a tablet to see where the hang ups are, and determine how to make the website tablet friendly while still allowing for easy access from laptops and desktop computers..
  • Move at the speed of your customer’s life. Add more “on the go” content and information. Tablet users are mobile and that could mean that they are looking for more “mobile-related” content than anyone else. Think links to Google Maps, your contact information, etc.
  • No one can buy what they can’t read. Website fonts have to be tablet legible. Remember, tablet users zip around the town. Screen glare can be a challenge as well as the smaller screens that tablets have. Be sure that the website can be easily read on a tablet by using the right font style, color and size.

The release of Apple’s iPad has created an unimaginable amount of change. With more and more people surfing the Internet on tablets like iPad, more and more businesses are taking notice. Here are a few examples of big companies who have upgraded their websites to be tablet friendly.

  • Amazon.com – In 2011 Amazon made a huge push into the mobile space with the release of their Windowshop iPad app and with their new look website. Brennon Slattery of PCWorld commented, “the new look and feel of Amazon.com screams tablet. It has a lot more white space, the messy sidebar on the left is gone, the search bar is enlarged for touchscreen fingertip use, and the product photos are easily clickable icons”.
  • Utah – Last August the state of Utah released an updated tablet ready website to make interacting with their website easier for tablet users.
  • Nike – Nike has updated their website to fully take advantage of the tablet interface. As this new tablet trend gets a little old we are going to see more and more businesses begin to overhaul their website to ensure tablet users can easily navigate and interact with their website.

Tablet Ready WordPress Themes

MobilePRO WordPress Theme for Mobile Devices

There are thousands of free and paid versions of WordPress themes out there for you to choose from. Sadly, there aren’t a ton of WordPress themes that will allow you to have a website that looks good on laptops and tablets. If you’re running WordPress and want a theme that you can install in order to create tablet ready websites, here are a few good ones to choose from:

  • Onswipe – Make your blog look beautiful on tablet web browsers in under three minutes.
  • MobilePRO – A beautiful professional WordPress theme for mobile devices. However, it looks great on any computer screen.
  • Mobility – An iPad-ready WordPress theme with finger sliding capabilities and a custom drag-and-drop gallery admin.

Tools and Resources to Create a Tablet Ready Website

Converting your website into a tablet friendly environment can separate you from your competitors. We will end this article with links to various resources and tools that you might want to check out if you want to take advantage of the Tablet Revolution and create a tablet friendly website.

  • Pressly automatically makes online publications as beautiful and touchable as native apps when visited on tablet web browsers.
  • For anyone looking to learn a little more about what the future holds for Tablet e-Commerce , check out Zmags recently released ebook entitled, “Mobile and Tablet e-Commerce: Is Anyone Really Ready?
  • HTML5 would be a great skill to have if you’re thinking of making your website more tablet ready. Todd Anglin said, “virtually all modern devices with a web browser have broad support for the technologies defined by HTML5, like Video, Geolocation, Offline Apps, Local Storage, and CSS3 styling, making them the perfect target for aggressive HTML5 development.

Don’t wait for the tsunami to hit you. Catch the tablet wave and ride it to big profits. At the very least, open your website on a tablet to see what it looks like and how easy it is to navigate. Let us know your thoughts by leaving a comment below.

December 14 2011

21:00

Tablet Tidbits: How To Make Your Website Tablet-Friendly

While smart phone’s got the ball rolling for mobile browsing some years ago, the arrival of the iPad in April 2010 really began the revolution for people who wanted to cruise the net while out and about.

As with all new technologies, there were initially a lot of doubters who insisted the tablet concept wouldn’t get off the ground. Boy have they got egg on their faces now! The tablet market now has a very strong foothold with sales exceeding 20 million in 2010 (3 million iPads were sold within 80 days of its release), and it’s estimated that this figure could quadruple by 2012.

The tablet is an excellent example of the speed with which the technology industry evolves. Just a few years ago if you wanted to design/build a website, there were just a few browsers that you needed to consider. With the introduction of mobile/tablet browsing, creating a website that looks good and is easy to use on a full size screen as well as a smaller one poses a significant challenge to designers.

Considerations for Tablet Design


Scaling of sites

Since web designers no longer have the luxury of knowing users will be visiting their website from a standard size monitor, they now face the issue of figuring out where to put “the fold”. For those new to the game, the fold marks the point where a user must scroll down to see more content. Hence the most important information/content is generally placed above the fold to ensure it’s seen before the user navigates away from the site.

With the trend of more viewing been done from smaller screens, many designers are beginning to scale back their designs and raising the fold to ensure important content and navigation options are readily available on smaller screens.

Giving the mouse the flick

A very important consideration for tablet design is that users will be using their finger to navigate rather than a mouse. While human fingers are pretty nifty little tools, they’re not as precise as a mouse is when it comes to navigating a website. The simple fact is your finger is a lot larger than a mouse cursor, and is physically incapable of doing what the cursor can. Given this, it’s important to ensure that important areas of your site, such as the navigation bar, don’t need to be zoomed in for tablet users to access them.

Catering for this doesn’t require that you go out and develop a tablet version of your site. Ideally you’ll want to achieve a middle ground with the size of your buttons, where they’re large enough to access with fingers, but don’t look ridiculous on a full size screen.

Check the form (fields)

Particularly for business sites, forms are an important part of the user experience. Whether it’s a simple contact form, shopping cart or newsletter signup; poorly designed fields can create immense frustration for users, and lead to high abandonment rates.

The easiest way to ensure your form fields are functioning correctly is to test them yourself. Jump on an iPad or any other tablet device and check for things like: clear rendering, speed of processing, unnecessary fields, and in general anything that makes the experience difficult or unpleasant.

Don’t be flashy

If you want your site to display well on a wide variety of platforms, the best way to achieve this is by sticking to standards-compliant HTML and CSS, and avoiding technologies which require additional software or browser plugins. As you’re no doubt aware, Apple has ditched flash and the iOS no longer supports it – so if you’ve got a flash-based site it might be time to consider a rebuild.

Sticking to standards compliant platforms doesn’t mean your site has to be boring. HTML5 has a great range of features for creating media and interactive elements which will work equally well on tablets and desktop browsers.

Up, down and sideways

Extending our discussion regarding “the fold” – another important consideration is that the majority of tablet devices have a built-in accelerometer. This means that the user could be holding the device in either a portrait or landscape position, or even switching between. So in addition to having to cater for multiple screen sizes and resolutions, you must also keep in mind different orientations.

The important thing here is to test your site from both orientations, and ensure that important information is visible without having to swipe. Also check for any kind of distortions that may occur as the site is switched between views, and iron out any problems so that the design and content are displayed optimally from both.

Test, test, test

Before you freak out at all the complexities of designing for multiple platforms and quit your web design job – rest assured it’s not THAT hard. The key thing is testing. Get your hands on a tablet device, preferably a couple of different ones if you can i.e an iPad and an Android based tablet, and put your site to the test. Key things you’ll want to consider while testing are: does the design display well? Is navigation simple? Is key content displayed above the fold?

If you don’t have direct access to a tablet, you could head into your nearest Apple store or tech provider and use theirs. Alternatively, there are a number of desktop simulators available online – just be careful to use one that actually renders your site in tablet resolution.

Three ‘no good for tablet’ designs


It’s always helpful to see where other people have gone wrong, it’s what allows (smart) humans to keep moving forward. With that spirit in mind here are three designs which don’t present so well on tablets.

MarcEcko.com


A cool brand with a really cool website, unless you’re viewing on a tablet. Entirely flash-based, it doesn’t cater well at all for mobile devices.

TennesseeTheatre.com


I feel a bit bad throwing the unsuspecting Tennessee Theatre into my ‘bad designs’ section, as their site isn’t that bad. Unfortunately they’ve disobeyed one of the key rules for tablet design though, drop down menus.

Ingenfeld.de


Okay I admit, this one is kind of  a joke – when I searched ‘bad website designs’ this little number was pretty quick to present itself. You name it, this website disobeys it. It’s crowded, has little buttons everywhere and is downright ugly. Be careful, this one might actually make your tablet self destruct.

Tips for awesome tablet design


So we’ve given you plenty to consider when optimizing your site for tablets, along with some examples of what not to do. Now here are some tips to ensure your website looks awesome from the smaller screen.

Push some buttons

As discussed earlier, the human finger is pretty clunky compared to the mouse cursor. Therefore, 16×16 px icons are going to be pretty useless to someone viewing your site on a tablet. As a guide, the average finger can fairly easily click on an area of about 20px. Keep in mind not to go overboard with button size, as you don’t want to present desktop users a site that looks like it was designed for a 3-year-old.

Getting the Type right

Hitting the mark with typography isn’t a simple feat with tablets. On one hand, you don’t want your type too small as it will require users to zoom in, and potentially swipe across if your lines are too long. At the other end of the scale, you don’t want it too large as it will require excessive scrolling. So, achieving text that hits the mark is about more than getting the right font-size. You’ll need to play with the size, line-height/length, and font-face. Until someone comes up with a simple how-to on this, the key is to just play around with it until you achieve something that’s simple to read and doesn’t strain the eye.

Less complicated = better

The less the user has to zoom in and out and scroll around to view your site the better. Keep in mind that if your site design renders well on a desktop – it won’t necessarily render so well on a tablet. The easiest way to achieve a less complicated design effectively is to go through your site and strip out any elements which aren’t absolutely necessary. Doing this will deliver two benefits; firstly it will make your site more tablet friendly, secondly it will in many cases enhance the desktop browsing experience.

It doesn’t have to be a bitter pill

While many of you may be cringing at the number of considerations to be made for tablet design, keep in mind that it’s a good excuse to review and improve your overall site design, and may also make your job more simple in the future. Tablets force designers to utilize limited viewing space more effectively, which means that a lot of unnecessary content and elements are stripped away – leaving a simpler, better looking design with a strong focus on what you want users to see: your core content.

Is your site optimized for tablet viewing?

Additional tablet design resources:
Resource for mobile UI guidelines
Designing specifically for Android tablets
7 Web UI mistakes to avoid for smartphone and tablet

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...