iStockphoto Tip Of The Week: Vectors

Vectors are the kings of versatility (16 April 08)

Have you ever found yourself in a graphic pinch where you had to take an image normally meant for a business card and force it, in all its pixilated glory, onto a billboard? If not, all you need to know is that your average-sized image may not be up to the challenge because it’s simply not scaleable.

Introducing: vector illustrations, your graphic hero when it comes to challenges of scale. To start, digital photographs are built differently than vectors. Look at a photo printed in yesterday’s newspaper and hold it really close to your eyes. What do you see? Little colour dots, right? When you blow up an image all you’re doing is making those little dots larger, which is why it’s important to have a high number of pixels per inch when you’re blowing up a photo.

Vector illustrations are totally different.

The information in a vector isn’t stored in the number of colored dots or the pixels per inch it has. This means that you can make a vector as large as you like and it will remain crisp and sharp or what some call “resolution independent.” That’s why vectors are ideal for projects where you will have to scale your graphics between numerous sizes from what can fit in the palm of your hand, a card, to something you might have to slap on a wall-sized trade show booth.

The next best thing about vectors is how easy they are to manipulate because you can edit them over and over again without losing quality. They aren’t one layer like photos, vectors are like a stack of colored paper which each have a different shape cut out of it. When you look at the pile, you’ll see a bit of yellow from the sixth page in, covered by a blink of purple or a slice of green. Altogether, these multi-dimensional layers are each scalable but they all fit into one complex file of layers. For more on how to use vectors visit iStock’s illustrations.

OReillys Creating Web Content for Mobile Phone Browsers

Info from 2004

After a slow start, browsing the Internet from mobile phones is finally taking off. The latest batch of phones have helped the cause considerably. People are buying them for the cameras and other bells and whistles, but the side effect is that mobile Internet access is now in the hands of a huge number of people -- and they are using it. Users in the UK alone downloaded 8 billion pages to their phones in 2003. A huge audience; but bear in mind that most of them are viewing sports scores or downloading custom ring tones, and not a lot else. The opportunity for developers like us to serve up imaginative and useful content to their phones is tremendous.

But the challenges facing someone entering the field are significant; it's not just the issue of learning a new markup language or two. To develop successful content, you need to understand the technical limitations of mobile browsers, the diversity of hardware that is out there, and the practical difficulties and frustrations faced by users trying navigate from a phone keypad.

That diversity is the big issue. If you want to reach a broad audience, then your pages need to work on the tiny monochrome screen of a two-year-old phone as well as the higher-resolution, color screen of the newest models. There are two ways to deal with this. You can limit yourself to the most basic markup so that a page is viewable on any phone, or you can identify the capabilities of each phone as it makes a request and deliver rich content specific to that device.

5 steps to take your website mobile

tips for making your mobile web presence as compelling as your online presence.

Many brands mistakenly assume that porting web content over to a mobile platform is a relatively cheap and simple exercise: resize the pages, reduce the graphics, et voila, a mini website. Don't make this mistake! The mobile platform differs greatly from that of the traditional web, and failing to anticipate user needs and constraints will lead to failure. Porting content to the mobile environment is not hard, but a thorough and meticulous plan for execution is an absolute must. This article will review five key differences between online and mobile websites, and discuss the design practices that are prerequisites for success.

1.) Develop a solid business case, as defined by user requirements
Usability is the nexus between business goals and consumer needs, and if a mobile project is not fulfilling both, it's not worth doing. Citibank and Coca-Cola have met this challenge with their recent mobile launches. By being the first in the U.S. to develop a strong mobile platform, Citibank is providing their customers with useful functionality while staking a leadership claim in the space. Coca-Cola has created a social networking platform for Sprite drinkers, called The Yard. This tool enables Coke to reach a huge global audience in a new way, while offering participants free downloads and a platform to communicate with their friends.

2.) Review the information architecture to account for different needs
Needs change based on context, and a site's information architecture (IA) and design must adapt to meet these needs. For example, a user browsing Epicurious' mobile site of food recipes will have a very different experience than when he visits the online version. Content is stripped down and broken apart differently. A mobile user in the supermarket can view a list of ingredients on the mobile site to ensure that he has everything he needs, rather than seeing the entire recipe all at once. Content models should be designed as flexibly as possible, separating data from presentation.

3.) Keep it consistent with the old site, but streamlined
Mobile experiences need to be clean and concise. Presenting a consistent theme across the online and mobile sites will make it easier for users to adopt the new platform. Foodies flock to Zagat's for reliable reviews of restaurants and nightlife. Differences between the mobile application and the site complicate the learning process. Extra steps required to navigate to critical data make the experience challenging for the user on the go.

4.) Optimize small screens
It's more than just breaking it apart based on user need; it's presenting the information in a manner which facilitates browsing and reading through a small interface. The NY Times mobile site gives the user an overview of the main news stories, and navigation systems at the bottom of the page facilitate browsing or searching for specific content elements.

5.) Simplify your feature set
For the vast majority of the mobile world, browsers are rudimentary tools at best. Scripts won't always run, and page elements like drop downs are at times difficult to use. Combined with a small screen and a distracting environment, it becomes very difficult to perform complicated tasks. Therefore, it is important that functionality is simplified. Kayak's beta mobile site can't run the rich content featured on its website, but it has a highly simplified user interface which, for example, allows users to enter in flight data in one text area. 

As the mobile web becomes increasingly important, brands are eager to reach out to their users through this channel. Before getting started, make sure that there is a solid case, built on business goals and user needs. Don't just port the existing site into a mobile format; give the user experience careful consideration. Update the information architecture, the user flow, and the feature set to conform to the constraints of the devices. The mobile channel is just beginning to realize its potential in the U.S., and with a little forethought, there are ample opportunities to create easy-to-use, meaningful experiences for users on the go.

WML Tutorial - Learn Wireless Markup Language with the Help of Examples

WML (Wireless Markup Language) is the first markup language standard for wireless devices. It is supported by all the major mobile phone manufacturers. At the beginning of this WML tutorial, you can learn about the basics of WML, such as the deck and card concept, WML's document structure and syntax, etc. Then topics like font styles, images, tables, anchor links and softkeys will be covered. After that we will move on to more advanced topics of WML like events, input elements, variables, and the submission of form data to the server. Plenty of code examples are given in the WML tutorial to help you understand the concepts and techniques.

Make Website and WebApp Compatible with iPhone and Blackberry » My Digital Life

One of the best way with just one line change on website coding to make website and web app support iPhone and Blackberry is by telling the PDA phone of the viewport size of the overall page. To do so, simply add the following line to the HTML HEAD section of the web page:

<meta name=”viewport” content=”width=320″ />

viewport is visual formatting model for visual media in CSS 2.1 specification, where it is a window or other viewing area on the screen through which users consult a document (mean part of the screen that you’re actually seeing). User agents may change the document’s layout when the viewport is resized. Other parameters applicable for viewport include initial-scale, user-scalable, minimum-scale and, maximum-scale where you can try to make your website fit into iPhone and BlackBerry view area. The example of usage:

<meta name=”viewport” content=”initial-scale=1.0″ />
<meta name=”viewport” content=”user-scalable=false” />

You can mix the setting u want to use into a single META HTML code such as:

<meta name=”viewport” content=”width=320,user-scalable=false” />

Vitamin Features » Make your site mobile friendly

The number of people who might view your site while clutching a screen measuring anywhere from 100 pixels to 640 pixels in width increases daily. Creating mobile-friendly content is quickly becoming less of an occasional add-on and more of a standard practice.