Adding Media to Mobile Sites without Loosing Speed

If you already have a snazzy desktop website up and running, creating a mobile counterpart — for less powerful processing and slower connections — can seem overwhelming. Especially when it comes to media: images, video, and music.

Media on Mobile Websites

All the bells and whistles in the world won’t do you a whit of good if they bog down your blog, or cause impatient users to bounce.

What you need is a balance between beauty and bullet-speed. Here’s a closer look at media on the mobile front:

  • Images: Of the three, when it comes to download speeds, plain old images might give you the least trouble. The key to effective pictures, photos — graphics of all kinds — on your mobile site is low byte-counts. The folks at Warren Phillips Web Design suggest that you limit the number of images used on your site, and that you keep the file sizes themselves small so that 3G-equipped electronics have a shot at getting them on those touchscreen before the wait feels far too long. 

Takeaway: Use images to make your mobile site crackle, but cut back and cut down.

  • Video: There’s obviously a market for watching movies on your iPhone, Android, tablet, or whatever it is you’re carrying. Apps like Netflix and YouTube are already well established on these devices. A helpful way to approach mobile websites that aren’t dedicated to the film and video experience, however, is with the same byte-conscious caution you use when working out how to make static images work. A word to the wise as well: animations, Java, Flash, Ajax, DOM scripting — all applications that generate electrifying, interactive, motion-filled desktop environments — these can hit difficult snags when it comes to mobile devices. Not all of the hardware out there talks to all of the software that developers like to use. Chris Mills at ThinkVitamin.com notes some fallback possibilities when it comes to animated/video-based sites. 

Takeaway: Don’t lead with, or lean too heavily on, video and interactive streaming content. It’s hard to know how it will work on all devices.

  • Music: Using music as a background to your mobile website is just as problematic as it is in a desktop experience. Unless you build music into a site as an opt-in feature, forcing background tunes upon an unwitting visitor is among the top two ways to drive away traffic (incidentally, the other is the pop-up window).  On the other hand, if your site is all about music — it’s a download site, or a band’s website, for example — you’d be hard pressed to provide visitors the experience they expected without it. Still, the image and video rules apply: go for low-bandwidth streaming and smaller downloadable versions of the tunes, and never presume that a user wants your blistering aggro-rock track to play without them first choosing to play it. 

Takeaway: Never use music on a mobile (or any) site as a default, and when providing tracks to touchscreens, keep them modest in size.

When it comes to media and making a mobile website, proceed with caution. Don’t layer up your mobile forward-facing pages with complexities that the 3G networks are going to choke on. But don’t neglect all aesthetics in favor of lightning fast downloads. There is supposed to be a design element involved, after all.

Keep these cautions and mind, and get out there on the mobile web.

 

 

Error: Unable to create directory /var/www/wix-mobile.com/wp-content/uploads/2014/07. Is its parent directory writable by the server?

About Betsy Jacobs

Betsy is a Freelance Writer with a passion for articulating everything to do with design, internet and technology. SEO, content and bamboo eating bears are what form part of my daily tasks. Connect with me on Google+
This entry was posted in How To, Make a Mobile Website, Mobile Web Design, Tips and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>