Son-of-Fire's Learning Landscape Headline Animator

Thursday, March 24, 2011

10 Key Considerations for Your Mobile Web Design Strategy

From Mashable!

10 Key Considerations for Your Mobile Web Design Strategy: "

Brian Casel is a web designer and co-host of Freelance Jam, the live web show for independent professionals who build the web. Connect with Brian on Twitter @CasJam.
There’s no turning back now. The web has gone mobile. More users are accessing the web from more places on more devices than ever before. What does this mean for web designers and site owners? It means that in every project we do, we must address a mobile strategy.
Your strategy will differ depending on what type of project you’re working on, but make no mistake, you do need some kind of strategy for how your website (or your client’s website) functions in the mobile space. Whether you’re designing a site that is mostly static (is anything on the web really static anymore?), a content-driven news site, or an interactive web application, it’s best to pursue a well-rounded approach — one that includes a thoughtful look at your mobile website user experience.
In this article, I aim to highlight 10 crucial items that you, as the web designer, developer or site owner, need to consider at the outset of your mobile site design project. These ideas touch on all aspects of a process, from strategy to design and implementation. But it’s important to be accountable for these points up front to ensure the successful launch of your mobile site.

1. Define Your Need for a Mobile Site


Usually a mobile website design project comes about through one of the following circumstances:
  • It’s a brand new website in need of both a desktop and mobile strategy.
  • It’s a redesign of an existing website, which will include a new mobile site.
  • It’s an addition of a mobile site to an existing desktop site, which won’t be changing.
Each of these circumstances brings a different set of requirements, which will help you determine the best way forward as you consider the items discussed below.

2. Consider the Business Objectives


In most cases, you, as the designer/developer are being hired by a client to design a mobile site for their business. What are the business objectives as they relate to the website, specifically the mobile site? As with any design, you’ll need to prioritize these objectives, then communicate that hierarchy in your design. When translating your design to mobile, you’ll need to take this a step further and focus on just a couple of top priority objectives for the business.
Take the website for Hyundai as an example. If you load hyundai.com in a desktop browser, the first thing you’ll see are big, bold images that evoke an emotional connection to their vehicles. In addition, you see a robust navigation, callouts to various benefits of owning a Hyundai, site search and social media links.



Now load hyundai.com in your mobile browser and you have a stripped-down version of the website. Yet the most prominent feature is still the same: a relatively big image of their latest vehicle model, followed by several other (mobile-optimized) images of vehicles. You don’t see the complex navigation and other callouts in the mobile version. They chose to focus their mobile site on their primary business objective, which is to evoke an emotional connection with their cars through bold imagery.




3. Study the Data of the Past Before Moving Forward


If this project is a redesign (most web design projects are these days), or an addition of a mobile site to an existing website, hopefully the site has been tracking traffic with Google Analytics (or another metrics tracking software). It is wise to study the data before diving into design and development.
Analyze things like which devices and browsers your users are accessing the site from. While you want to be sure the site is built with device support in mind, you can target these browsers as high priorities when you go from design, through development, testing and launch.

4. Practice Responsive Web Design


With so many new mobile devices being released every year, the days of checking your site in a few web browsers and launching are over. You’ll need to optimize your site for a vast landscape of desktop and mobile browsers, each bringing a different screen resolution, supported technologies, and user-base. As recommended in the well-known article Responsive Web Design, you can craft the desktop and mobile site experiences simultaneously. To quote from that article:
“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.”
Utilizing the latest and most forward-thinking web technologies like HTML5, CSS3, and web fonts, you can design your site to scale and adapt to any device it’s viewed on. That’s what we call responsive web design.

5. Simplicity Is Golden, But …


As a general rule of thumb when converting a desktop site design to mobile format, you want to simplify things wherever possible. There are several reasons for this. Keeping file size and load times down is always a good idea for a mobile site. Wireless connections — while faster than years past — are still relatively slow, so the faster your mobile site loads, the better.
Usability considerations on the mobile web also call for a simplified approach to design, layout, and navigation. With less screen real estate at your disposal, you need to choose your placement of elements wisely. In short: Less is more.
However, we can still create beautiful designs that are optimized for mobile. CSS3 gives us an amazing set of tools for creating things like gradients, drop-shadows, and rounded corners, all without resorting to bulky images. That’s not to say you can’t use images at all.
Check out these examples of mobile sites that strike a great balance between simplicity and beauty.




6. Single-Column Layouts Usually Work Best


As you think about layout, a single-column structure tends to work best. Not only does this help with managing limited space on the smaller screen, it also helps you easily scale between different device resolutions and flipping between portrait and landscape mode.
Using responsive web design techniques, you can take a multi-column desktop site layout and adapt it to a single-column layout. The new Basecamp mobile website does a great job of this.




7. Vertical Hierarchy: Think in Collapsible Terms


Does your site have a lot of information that needs to be presented on the mobile site? A good way to organize things in a simple and digestible way is to set up a collapsible navigation. Taking your single-column structure a step further, you can stack chunks of large content in folding modules that allow the user to tap open the content that they’re interested in and hide the rest.
Check out the mobile site for Major League Baseball. At the top of the page is a button labeled “Teams.” Tapping this extends the page, listing the 30 teams vertically in the single-column page.




8. Go From “Clickable” to “Tappable”


On the mobile web, interaction is done via finger taps rather than mouse clicks. This creates a very different dynamic in terms of usability.
When converting from a desktop to mobile site design, you have to revisit your “clickable” elements — links, buttons, menus, etc. — and make them “tappable.” While the desktop web lends itself well to links with small and precise active (clickable) areas, the mobile web requires larger, chunkier buttons that can be easily pressed with a thumb.
In addition, on the mobile web there is no hover state. Most of the time, when something is set up to occur on hover (like a dropdown navigation menu), it actually occurs on the first tap when viewed on a mobile device. The second tap on the mobile site does what the first click does on the desktop site. This may cause confusion for mobile users, which means you’ll need to re-work hover states for mobile.

9. Provide Interaction Feedback


Speaking of interaction, you’ll need to make sure you provide obvious feedback for any actions that occur on the front-end of your mobile site.
For example, when the user taps a link or button, it’s good practice to have that button visually change states to indicate it has been tapped and the action has been initiated. It’s common to see a white-colored link turn fully blue on the iPhone when tapped. This visual feedback is familiar to most users and you’d be wise to take advantage of it.
Another good practice is to include loading states for actions which may take a bit longer to load. Use an animated loading image to indicate something is in progress. Basecamp Mobile does a great job of this by showing a spinning loading gif as it loads the next page.
Remember, the desktop browsers have various indicators built-in to show that something is in progress. Mobile browsers don’t make it as obvious, so it’s important to build visual feedback into your mobile site design.

10. Test Your Mobile Website


As with any project, you’ll need to test your mobile website on as many devices as possible. Without owning all these devices, it can be somewhat tricky to find ways to accurately test for each. It will involve a combination of installing the developer SDK for the platform (like the iPhone SDK and Android SDK) and using web-based emulators for viewing other mobile platforms.
This article provides a thorough breakdown of how to test a mobile website across the most popular platforms.
Off you go!
Hopefully this article provided some insight as you embark on a new mobile site design project. Be sure to leave any other tips you find useful when designing for the mobile web in the comments below.

Interested in more Mobile resources? Check out Mashable Explore, a new way to discover information on your favorite Mashable topics.

More About: android, iphone, List, Lists, Mobile 2.0, mobile design, mobile web, web design, Web Development
For more Mobile coverage:





Wednesday, March 9, 2011

New Platform Uses Social Features To Improve Online Education

From Mashable!

New Platform Uses Social Features To Improve Online Education: "

Buried within platforms like YouTube, Facebook and Wikipedia lies valuable educational content that can reinforce classroom lessons, help self-motivated learners teach themselves new concepts, and upend the way that the world looks at education. But it’s hard to separate this content from the cat videos, ads and uninformed contributions that share the same platforms.
Social learning startup Sophia, which launched its public beta Monday, aims to solve this problem by focusing exclusively on crowdsourced educational material and encouraging users to help sort the academically sound, engaging lessons from the sub-par lessons.
Anybody can compile a “lesson packet” on Sophia using slideshows, videos, audio clips and text that they either upload or pull in from sources like YouTube. About 200 private beta users have already covered lessons ranging from Camera Angles & Shots to Coordinate Geometry of Quadrilaterals.
The idea is to make it easy for students to find reliable knowledge on any topic quickly and efficiently. In the search options, for instance, students can even select specific text books to find corresponding packets. If students still don’t understand something after viewing a lesson, they can post a question to a Q&A board attached to each packet.
CEO Don Smithmier says one of the most common uses of the platform since the private beta that launched in November has been to curate the best content about a given concept from other social media platforms like YouTube.
“There’s a ton of good information on the web, but it’s hard to find,” he says. “And part of it is that if you don’t already know what you’re doing, it’s hard to evaluate the good from the bad.”
After a packet is submitted, Sophia has multiple ways to gauge its quality. When users sign up for the site, they have an option to identify themselves as subject experts, if they hold a degree in that field or teach courses on it. Three such experts need to certify a lesson as “academically sound” before it is labeled as such.
There is also a five-star user rating system similar to the seller ratings at Amazon.com, and lesson creators have lifetime “Sophia ratings” that gauge how successfully they’ve contributed to the community. Other rewards for providing quality content include earning followers via a Twitter-like feature and badges.


sophia_score_image

Sophia.org is free, and the company is committed to barring advertising, as well as the content manipulations that come with it, from the site. But the project isn’t purely a labor of love — eventually the company will sell a white-label version of the product to schools and universities that want their own private, white-label versions of the product. For now, the project is backed by an investment from online education company Capella.
Image courtesy of iStockphoto, enviromantic
More About: edu tech, education, online learning, social learning, Sophia, startup
For more Startups coverage:

"

Tuesday, March 8, 2011

5 Free Tools For Creating a Screencast

5 Free Tools For Creating a Screencast: "

This post originally appeared on the American Express OPEN Forum, where Mashable regularly contributes articles about leveraging social media and technology in small business.
Showing people what a product does is a better way to catch their attention than telling them about it. Car salesmen encourage test drives, ice cream stores give out free samples, and I’d be willing to bet that few people purchase a Hanger Cascader without watching the infomercial first.
Your digital product is also more appealing when demonstrated. And the most affordable way to show people what your software does, even if you’re also offering a free trial, is often to produce a short screencast. These five free tools can help you get started.

1. Screenr




Screenr helps share your screencast videos over Twitter. After you make up to a five-minute-long screencast using the simple web tool, a shortened link to the video is automatically provided. You can add a message and post the video link to your feed with the push of a button. There are also options to post to YouTube or embed the video in your site.
While other screencast tools, like Jing (see below), have Twitter sharing options, Screenr distinguishes itself by also creating a YouTube-like profile for each user. All of your videos are saved on your profile, and a public feed of other users’ videos makes for interesting browsing. If you like an idea that you see, you can click the maker’s profile photo to see other videos they’ve uploaded.

2. Overstream



Overstream

Basic, free screencapture software programs, like Wink, do a pretty decent job at creating videos, but few of them include features that allow you to add text easily. Overstream allows you to pull a video from a supported site like YouTube or Google Video and add your own subtitles to it.
CaptionTube is another free captioning web app that you can use your Google account to log into.

3. Jing



Jing

Downloading Jing puts a sun-shaped icon in the upper-righthand corner of your monitor. When you want to grab either a screenshot or a screencast, hitting the icon opens up a tool that you use to mark the perimeter of your shot and start recording. If you’re recording a screencast, audio will automatically be recorded.
You can choose to upload videos to screencast.com, which is run by the same company. Once you’ve done so, it’s easy to share the provided URL or embed the video in your site. Alternatively, you can customize share buttons on your Jing dashboard for sharing directly to Twitter, Facebook and Flickr.
The free version of Jing records in SWF format. Jing pro subscribers can record in SWF or MPEG-4 video, make unbranded videos, record from their webcams and upload videos directly to YouTube.

4. GoView



GoView

Unlike most free options, GoView provides some editing capabilities. After you record your screencast and audio using the downloaded screen capture software, you can cut portions out and add title pages. Saved videos are automatically uploaded to the GoView site, and links are provided for easy sharing.
The software is free for now while the product is in public beta. But unfortunately, its early stage of development also means that it’s available on only Windows XP and Vista operating systems.

5. Screencast-o-Matic



Screencast-o-Matic

The free version of Screencast-o-Matic captures screencasts, audio and video from your webcam at the same time without downloading any software. Finished videos, which can be up to 15 minutes long, can be exported as MP4, AVI or FLV files, uploaded to YouTube, or saved to the Screencast-o-Matic site. A note-taking option can be used to link directly to a specific moment in your video.
Videos made using the free version have a “Screencast-o-Matic” watermark on them that can only be removed by ponying up $9 to download the pro version.

More Business Resources from Mashable:


- 4 Web Apps For Managing Job Applications
- HOW TO: Optimize Your LinkedIn Profile
- HOW TO: Create Your Own Customized Short URL
- 7 Services to Find and Reserve Your Name Across the Web
- 10 Essential Tips for Building Your Small Biz Team
Image courtesy of iStockphoto, TommL
More About: business, free tools, goview, Jing, List, Lists, overstream, product demo, screencast, screencast-o-matic, screencasting, screencasts, screenr, small business, video
For more Business & Marketing coverage:

"