This is a collection of Adobe Illustrator Scripts that exports layers or artboards to PNGs of different densities (iOS Retina Display, Android Devices, etc).
How to install
If you place the script in the Adobe Illustrator CS5/Presets/Scripts folder, the script will appear in the File > Scripts submenu. If you place the script in another location on the hard disk, you can run the script in Illustrator by choosing File > Scripts > Browse.
How to use Mobile > General
The general scripts asks for 3 values in sequence:
The folder where you want to save the files.
The scale factor 1 = 100% = 160dpi = mdpi, 2 = 200% = 320dpi = retina display (these values are only valid if you designed for 160dpi aka mdpi).
A suffix if you want to use one, e.g., @2x for retina display in iOS. You can also leave it empty if you don't want a suffix or if you are exporting to android or iOS non-retina.
How to use Mobile > iOS
Choose the folder where you want to save the files.
Optionally you can add a sufix to the files.
That's it, all files will be saved with the appropriate names.
How to use Mobile > Android
Choose the folder where you want to save the files.
That's it, all files will be saved on the appropriate folders.
Note on exporting layers: Locked layers visibility will be ignored and also they will not be exported. For example, this can be used to keep global layers visibility or guide layers from being exported.
To build a mobile site or not to build a mobile site; this is a question at the forefront of many a discussion. There is, however, another option: responsive web design. When, why, and how should you go about designing a responsive website?
With mobile internet users set to surpass desktop internet users in the US , with tablets becoming more popular, and even with TV internet usage increasing, it’s important for companies to provide a great user experience for all their visitors no matter what device they’re on. How does responsive design help us do this? Well, by allowing us to create one website solution that is flexible for different screen widths. It uses flexible grids and clever styles to present the same content to a user, but displays that content in a format that suits the width of the device. Check out for a more detailed introduction.
Why should you design a responsive site?
There are many options to consider when a client asks for a mobile solution for their website, and the suitability of these options depend on the business requirements and budget; it’s also important to consider any existing solutions or sites they already have. Creating a responsive website isn’t a complete mobile strategy, and won’t answer every brief, but, especially if you are starting a website from scratch, you should consider it as a very serious option.
So why would you decide to create a website this way?
You’re starting from scratch
Developing a whole new website or web application is a challenging process. You won’t know if the site will be successful until it’s live and in the world, so creating a separate mobile site or a mobile app in tandem with a website project could be a big waste time and money. It’s more efficient to get your new site performing well before you create an additional mobile site or application.
You want to keep costs low
Solid responsive solutions require additional design and front-end development time, but doesn’t too heavily impact application development. It could take around 20-30 per cent longer to develop a responsive site, but it’s still faster than creating an additional mobile site or app. Developing a site this way also means that you only need to develop, manage, and maintain the one site, so it can reduce these costs too.
You want it to work even when new devices are released
A mobile site needs to be able to recognize the user’s device; when new devices are released, the site needs to be updated. As the responsive solution only recognizes the browser’s width, no new updates would need to be made. This means it’s much more future-proof and scalable.
The process
Let’s talk through the process of creating a responsive website using a hotel website example. This last September, released the new . Macdonald Hotels are a UK hotel chain with 47 hotels and resorts across the UK and Spain. We created the new site for them that included a new site structure, extensive hotel content, and a new booking engine. Here are the steps we went through and also some considerations you should think about when designing a responsive website.
These are the key steps:
Research/scoping: Understanding the additional requirements for a responsive site
Wireframing: Grid structures and layouts for the site considering different screen widths
Look and feel: Style considerations
Building the site: HTML & CSS issues
Research and scoping
Research is always a very important stage in the design process so it’s worth putting a little extra consideration into the people who will be using different devices. Understanding how these different users may want to use the website on a variety of devices will help you to decide what the priorities are on the project.
What different goals will a user have on different devices?
Questions like this are starting to become more redundant. In the past we’ve assumed that mobile users have been task-driven, e.g. I want to get the hotel’s address; I want to book something quickly. But now people on any device are just as likely to leisurely browse the Internet as they are to need to complete a task quickly. It is worth considering though, as thinking about users’ goals in this way could help you prioritize content for the site, irrelevant of what device the visitor is using.
What technical considerations do we need to make for functionality and content?
Think about how any complicated functionality may work on different devices. Although a responsive site will only change the CSS depending on the width if there are complicated elements that rely heavily on JavaScript, they may not translate well on a smaller device and it could be worth hiding these.
Wireframing
The logic behind how the styles should change can be a bit hard to define and the magic of it will really come out in the build of the site, but we need a way to start defining the different width stages of the layout. We choose to look at 3 screen widths, a desktop, iPad and iPhone. We felt these covered what our requirements were, but for your project you should consider what widths are important for you to think about—you may even need to look at bigger screen widths for TV internet usage.
At this point of the project you should already the key templates that you’ll need to wireframe, but you shouldn’t need wireframes for all these templates in the different widths. The main goal here is to help define the logic behind how the CSS will change the look of the page, so focus on pages that have very different layouts. For us we looked at the home page, all the booking process pages, the hotel pages, offer pages as well as some generic layouts. Each of these covered our different column layouts, content types and key functionality.
Getting started
First, define the grid structure for each key width. We created 3 pages for the screen widths 1024px (Desktop), 768px (iPad portrait), 320px (iPhone portrait), then we needed to define a grid structure for each of these widths.
A very simple grid structure with equal column widths on each layout made it easier for us to plan for components wrapping as the width changed.
Creating the master template
As you create each wireframe you’ll need to think about the columns and how the components within these will adapt as the page width shrinks&mdashe.g. what happens When you have less space? If you have four columns of content? When you change to a three-column width? There should always be ongoing communication between the designer and the front end developer to answer any issues about what you can do with components visually and in the CSS.
Starting on the home page
You may feel like there is another page that has a higher importance than the home page, but this was where we started. Here is our finished original wireframe. You can see the mobile page length is quite a bit larger due to the content wrapping over one column.
Main navigation
We created a simple horizontal top navigation that would have a fluid width to change with the screen size. As the screen reduced the menu items would get closer together, then wrap on to the next line when necessary. This works for desktop, laptop and tablet widths, but going further down we wanted to create a menu that would suit the devices better. This gave us the menu spilt over two columns for the mobile device.
Other header components are aligned right and would just shift along as the page width reduced.
Remember when you are styling the navigation to think how it will work as the screen sizes changes. Certain styles, such as using tabs, may be difficult to get to work and look good as the screen width reduces.
Footer
Our footer is pretty simple, just think about what content you want and how it will change as the width changes and the columns reduce—this could be as simple as components wrapping underneath each other.
Other components
Our simple grid structure made it easier to plan out our components. On the home page we used a horizontal scroller that had four components that would scroll across on a click. Our tablet layout let us keep this component but just amend it to only show three items, then on our phone width we removed the scrolling functionality completely and instead displayed each item vertically. Each component you design may require different behaviours, so think about how the visitor will want to use the component on different screen sizes. Phone users are more comfortable scrolling down a page than using small buttons to interact with the page.
Test it straight away
As soon as you have created your first wireframe test it on the relevant device straight away. It’s easy to get the image on a simple web page and take a look at how it looks and feels to scroll down. This will let you know early on if your wireframe is working. Testing in this way gave us clues really early on what was and wasn’t working. If you look at this wireframe you should quickly see our first issue.
As the user navigated through the site they would only see these first two page elements&mdashthe navigation and the search panel. This means that the user may be unsure if the page has changed, as well as where they actually are on the site. This was solved simply by putting these items in show/hide panels—letting the user get into the content much faster.
Adding the tablet and mobile versions to your user testing process will give you a lot of useful feedback too. Now that your wireframes are created, tested, amended and approved it’s time to make them look good for all your screen widths.
Look and feel visuals
It isn’t necessary to create visuals for every wireframe. The main objective is to cover all the styles that will be required to create the HTML and CSS. There will be a little bit of a crossover for wireframes and visuals, some styles that will be required for the mobile where there wasn’t a need for an initial wireframe.
Styling the page: Think about keeping your styles simpler for your mobile version—what’s great about CSS3 is that you don’t need lots of images to get great styled effects, but these still take a bit of time to load.
Thinking about font: Make sure your font sizes are going to be readable on each device. They’ll have to be much larger on the mobile device to ensure readability.
Also, be prepared for your visuals to change when it gets translated into the build of the site. There always should still be balance between what looks good on a flat visual and what will work when the site is being developed. The final site isn’t too far away from our look and feel visuals, and you can compare with the live site.
Building the site
Building the HTML and CSS is a challenge all of its own, so I won’t discuss this is much detail, but here are a few things to think about.
The impact of image sizes: The site will need to load in the full size images even if the CSS scales them down, so try to keep image sizes as low as possible. There can be some nifty JavaScript tricks though to make the site run smoother. On this site we initially loaded in the smallest image size, and then used JavaScript to decide if a larger image was then needed.
Use advanced CSS:
It’s important to get the client behind the idea of using advanced CSS styles, allowing the site styles to degrade as the browser capability does. This lets you keep site loading times low.
Constant communication is required: The project will always go smoother if the team speak to each other, so from both designer and developer it’s good to discuss problems and solutions as soon as they turn up.
It’s worth taking a look at our front end developer take on the for responsive design.
So what does all this mean?
If you are thinking about convincing your client to have their new site designed and developed in a responsive way, firstly you should consider if it really is the right solution for them, then you’ll need to be able to persuade them of the benefits and communicate that it will add more time to the project. But, I do believe that this is how more sites will be developed in the future.
We’ve all learned so much on this project about developing a responsive website. We were lucky to have a client who was as keen as us to create something new and innovative and from that we’ve created a site we’re all proud of.
Augmented Reality veterans Metaio are announcing some more details about their upcoming insideAR conference scheduled to take place in Munich, Germany on September 26 – 27. While the speaker list for the event has been available since July, the greater theme for the conference is being updated via press release today. That theme is: “From a Vision to a Roadmap”.
To help illustrate this thematic announcement, Metaio have release a video that shows a small scale demo of their vision for the “Augmented City”. This demo was created by Metaio and the Media Processing Division of ARM—makers of the Mali family of GPUs essential to the demonstrated rendering ability of Metaio’s software.
The demo is cool and illustrates their vision well, but it’s important to note that, strategically, the focus of the insideAR event also seems to be tied to revealing their roadmap for reaching this vision. That information will be shared publicly and also in more detail with select business partners during the second (and private) day of the insideAR conference.
For if ever a technology needed a roadmap for practicality, it is Augmented Reality. I mean, I am one of the believers, but in many a conversation about AR with colleagues and clients alike, the dialogue often strays to “Yeah, but how is that going to be realistically implemented” or “how do we get from A to B”. These are legitimate questions.
So the simple format of sharing the vision but also sharing the practical, tactical and technological steps to reach the vision seems like a clean and clever way to break the content up and attempt to deliver actionable results. I plan to be in attendance and will let you know if the concept lives up to the hype.
But back to the Augmented City demo…
It looks cool but I admit at first I thought it might be a bit gimmicky. I mean, what is this tiny city? What is it trying to show?
In this video, I think Metaio CTO Peter Meier does a good job of explaining the roll of hardware and software to create best-of-breed AR experiences and also describing how Metaio’s optical recognition (for which they are field leaders) will enable experiences.
So after watching in its entirety, I began to see where they are headed with both the vision and the technology. Rather than viewing it as an animation or a cartoon, I imagined some of the examples within it at normal scale in a real city and myself in that city and subject to the meta information at hand. I began to imagine some real world scenarios of my own:
What if I worked at an architecture firm and the virtual facade of our building could be changed to the firm’s best known designs?
What if I worked at an ad agency where client reels could be displayed on the outside walls of the office building?
What if a new breed of car advertisements were actually driving on the road (that one’s probably a legal or compliance nightmare but cool nonetheless).
There are many possibilities if the practical hurdles can be jumped or removed. Let’s hope that practical approaches can be found for implementing these “natural” AR experiences without overwhelming users.
That seems to be the one of the goals of Metaio’s approach with the insideAR format. It’s a good idea to try to show vision and action and that seems more realistic than the typical “whizz-bang-look-how-cool-my-tech-is” approach to gain attention for marketing reasons. My fingers are crossed.
Today, we note the availability on Android of Control, a WebKit-based touch interface also on iOS.
For visualists and interactive designers, it’s worth paying attention to one feature in particular: dynamic interface creation. Perhaps biased by the musicians who have tended to embrace them, touch interfaces have tended to rely on the static layouts favored by physical knobs and faders. That’s arguably the worst of both worlds: you lose the tactile feedback of physical controls, but you don’t add any of the flexibility of a display.
Control is an open-source application rendered in HTML5, powered by JavaScript and JSON, so it’s capable of anything you can imagine. But Charlie Roberts has already demonstrated how a dynamic interface could work. Using OSC, you can make control layouts on the fly. That could lead to more sophisticated software integration for visual and musical performance, new chances for collaboration and live rigs, and the ability to make an interface on someone’s device in an interactive situation.
We saw the last of these scenarios in the case of the iOS app mrmr, developed by Eric Redlinger. As proof of concept, I and others put together a gallery show using mrmr, at which interactive pieces were able to build interfaces on-the-fly on user’s iPhones and iPads. With Control, those horizons expand, no longer constrained to individual proprietary UI widgets on one platform (like iOS), but cross-platform, Web-based, and dynamic.
But dynamic layouts could go in many, many directions. Since this is especially relevant to visual performance, perhaps in modes of interaction not really possible in music, I’d love to hear what readers imagine. And do try Charlie’s app, whether on iOS, Android, or both: Control
– and if you’re really ambitious, have a look at the source!
(Cross-posted on the Google Lat Long Blog and the Google Mobile Blog)
Today we’re releasing Google Maps 5.7 for Android. From Bangkok to Baltimore, we’ve added Transit Navigation (Beta), updated access to directions, better suggested search results and a photo viewer to Place pages—all of which can help you whether you’re traveling to an unfamiliar part of town or visiting a city across the world.Transit Navigation (Beta) Google Maps Navigation (Beta) currently provides over 12 billion miles of GPS-guided driving and walking directions per year. Now, GPS turn-by-turn (or in this case, stop-by-stop) navigation is available for public transit directions in 400+ cities around the globe with Transit Navigation.
Transit Navigation uses GPS to determine your current location along your route and alerts you when it’s time to get off or make a transfer. This is particularly helpful if you’re in a city where you don’t speak the language and can’t read the route maps or understand the announcements. After starting your trip with Transit Navigation, you can open another application or put your phone away entirely and Google Maps will still display an alert in your notification bar and vibrate your phone when your stop is coming up.
Left: Transit directions without Navigation. Right: with Navigation
Navigation alerts appear even if you switch to another app
Now you can spend more time enjoying the sights out the window and less time worrying about how many stops are left, where you are along the route or whether you missed your stop. Since Transit Navigation relies on GPS signals, we recommend using this feature for above-ground transit.Updated Directions
Now that we’ve improved our directions services, we wanted them to be incredibly easy to pull up on your screen. If you select the driving or walking icon and your route is supported by Google Maps Navigation, the Navigation icon will automatically appear so you can get access to step-by-step directions in one click. Note: this change is currently only in place for driving and walking and does not appear for public transit.
One-click access to Navigation from directions
We’ve also streamlined how you access directions from within a Place page. Before, clicking directions in a Place page would bring up options for “Driving Navigation,” “Walking Navigation” and “Directions.” Now, you’ll be taken straight to the map and see the new directions box shown above.Improved Search Suggest
We’ve made two changes to search suggestions that improve their quality and speed. First, we’ve added category icons, so instead of all search suggestions displaying the same icon, the icon next to the listing will reflect the type of result. You’ll see a pin for a Google Places listing, a star for a starred Place or location, a clock for a previously used search term, a person for contacts and a magnifying glass for “anything else.”
Two examples of search suggest with new icons
Also, any place you got directions to or called directly from its Places page will be included as a suggestion for a relevant search. For example, if you recently received directions to the U.S. Post Office on Wilshire Boulevard, afterward, when you begin a search with [p] or [bou], that U.S. Post Office would appear as a search suggestion.Photo viewer for Place pages
Since we released business photos for Place pages last October, millions of photos have been added to Place pages around the world. To enable you to view these photos on the run, a slick new photo viewer has been added so you can browse photos while deciding where to go.
Left: Business photos in Place pages. Right: New photo viewer
To start using Google Maps 5.7 for Android, download the update here. This update requires an Android OS 2.1+ device and works anywhere Google Maps is currently available. Learn more at our help center and have fun exploring, whether it be by car, transit, bike or foot.Posted by Chris Van Der Westhuizen, Software Engineer
This is a collection of Adobe Illustrator Scripts that export layers or artboards to PNGs of different densities (iOS Retina Display, Android Devices, etc).
How to install
If you place the script in the Adobe Illustrator CS5/Presets/Scripts folder, the script will appear in the File > Scripts submenu.
If you place the script in another location on the hard disk, you can run the script in Illustrator by choosing File > Scripts > Browse.
How to use Mobile > General
The general scripts asks for 3 values in sequence:
The folder where you want to save the files.
The scale factor 1 = 100% = 160dpi = mdpi, 2 = 200% = 320dpi = retina display (these values are only valid if you designed for 160dpi aka mdpi).
A suffix if you want to use one, e.g., @2x for retina display in iOS. You can also leave it empty if you don't want a suffix or if you are exporting to android or iOS non-retina.
How to use Mobile > iOS
Choose the folder where you want to save the files.
Optionally you can add a sufix to the files.
That's it, all files will be saved with the appropriate names.
How to use Mobile > Android
Choose the folder where you want to save the files.
That's it, all files will be saved on the appropriate directories.
Note on exporting layers:
Locked layers visibility will be ignored and also they will not be exported.
For example, this can be used to keep global layers visibility or guide layers from being exported.
If you find it useful buy me a coffee! ;)
Titanium Mobile 1.7 is also available today. It’s now 5-times faster to build apps for Android and iOS has tons of upgrades, including universal binary support.
We had over 500 developers sign up for our new Titanium Indie and Professional subscriptions last month. Now we’re making it even easier by offering a 30-day free trial on both products. Test drive premium software in Indie and premium software and support in Professional.
Introducing Titanium Studio
Use Titanium Studio to rapidly build, test and deploy mobile, desktop and web applications. Take advantage of new functionality like code completion, Git integration and a full-featured editor. Manage Titanium projects, test your app in the simulator or on device, automate app packaging and much more … all from within the new Titanium Studio.
Titanium Studio is an upgrade and replacement for Titanium Developer. Titanium Studio is an IDE (Integrated Development Environment) that will enhance the user’s experience while developing on the Titanium Platform. All of the latest Mobile and Desktop SDKs will be maintained and kept up to date by Titanium Studio. In addition to the nice features of an IDE ( i.e. syntax highlighting, content assist, code validation etc.) Titanium Studio also provides tight integration with the scripts used to create and run Titanium Projects.
We strongly encourage all users to begin migrating their development workflow to Titanium Studio. Titanium Developer source code will continue to be available through an Apache 2 open source license.
Check out the video, "Getting Started and the Development Workflow with Titanium Studio"
Titanium Mobile 1.7
Nothing beats a Titanium mobile release and 1.7 is a big one. Here’s what’s new:
Fastdev for Android speeds prototyping and testing by enabling local changes to become instantly available to your application while the simulator is running. This eliminates the time-consuming steps of packaging, building and deploying apps for each change.
New cross platform APIs for TCP/IP networking: Sockets and Streams, and supporting APIs for managing Buffers and Codecs.
Universal Binaries: develop a single app for deployment on iPhone and iPad
Major improvements related to memory management and memory leaks for iOS (both iPhone and iPad) which substantially improves stability and performance.
Our new Titanium subscriptions offer something for everyone, from indie developers to corporate development teams. As you download Titanium Studio, please choose the Titanium edition that is best for you:
Titanium Indie—Free 30-day trial—get all the software you need to build great apps including: Titanium Studio with mobile debugging, Titanium Mobile, Titanium+Plus modules that extend your apps to the cloud, and early access to new software.
Titanium Professional—Free 30-day trial—get all the Indie software plus access to Appcelerator helpdesk professionals. Yes, you can test drive support during the trial!
Titanium Community—Free—get the core Titanium mobile SDK for iOS and Android and Titanium Studio (all current features except mobile debugging).
Upgrade to Titanium Studio now. Choose the free 30-day trial for Titanium Indie or Titanium Professional and you won’t be billed until after your trial period ends.
New Release Webcast
Join us for a new release webcast on June 21st, 9AM PST to learn more about Titanium Studio and the updates in Titanium Mobile 1.7. We’ll walk through several demos and have our engineering team on hand to answer your questions.
Two spacey ways of finding media: music collections, heirarchy, and images of planets in Planetary for iPad, top. Sound and loop collections, “magnetic” relations, algorithmic categorization, and rapid torchlight auditioning in Soundtorch 2.0 for Windows, bottom.
If your music and sound collections seem like outwardly-expanding universes, two new tools promise to bring order by representing media as virtual planets and stars. One works on albums and tracks on the iPad; the other uses computer-aided analysis of loops and samples (not just music) on Windows. One will make your eyeballs pop; one might help you manage gigs of samples for a game design project.
Built in the open-source framework Cinder by an all-star team of media artist-designers (Ben Cerveny, Tom Carden, Jesper Sparre Andersen and Robert Hodgin), Planetary should satisfy space nuts and eye candy lovers. The metaphor is pretty direct: artists are stars, albums are planets around the artists, tracks are moons around the planets, and you can filter “constellations” by letter. That means the actual structure is heavily hierarchical, actually, in the tradition of iTunes (and, before it, its predecessor SoundJam). I’m not sure what happens with, say, compilations. But let’s face it: the real draw is that it’s incredibly beautiful to look at. I’d be just as entertained looking at a visualization of my system folder if it looked this pretty.
For now, Planetary is some fascinating eye candy with at least basic playback capabilities, iPad-only. That brings some good news – Airplay wireless works, and since it makes use of standard media code, even features like Last.fm scrobbles function. It also brings some bad — while Apple added support for libraries to third-party apps, Home Sharing isn’t included, so you’re limited to what’s on your iPad. Playlists aren’t supported, either. But hook this up to a projector or large screen TV with some of your favorite music, and I don’t think you’ll be complaining. And as a free tool, it’s incredible.
Less pretty, but with greater facilities on the utility side, is the Windows-only Soundtorch. (Thanks to Kristian Gohlke for the tip!) Visually, it offers a similar metaphor: media assets live on a continuous plane. Functionally, though, it’s more algorithmic than hierarchic, using something called the Computer Aided Sound Exploration engine (C.A.S.E.). The set of algorithms, which the creators say were based on evaluation of human listening, performs a sophisticated set of extractions of some 600 features from each sound file.
Rather than limit itself to albums and tracks, C.A.S.E. is tuned for audio files and loops. It’s fast enough that it can plow quickly through gigs of material. So, if you’re on Windows and have amassed an enormous collection of loops, samples, field recordings, sound effects, and the like, Soundtorch will use C.A.S.E. to first map all those relationship, then visualize them. You can use the mouse to produce new collections of assets, map relationships visually, export those relationship to XML, copy sounds to the clipboard, export to WAV, or open them in Windows Explorer. That is, all that eye candy is a genuine interface, not a barrier between you and what you might do (as so often happens with these sorts of experimental interfaces).
In fact, you might argue that, despite outward appearances, Soundtorch is entirely different from Planetary, but they share one common conceptual assumption. Related media “orbit” or attract to common materials. The difference is that Soundtorch is relational. In Soundtorch, if you “magnetize” a file, it – and any similar files – become attracted to attractors called “magnets.”
As is appropriate searching for media, the “torchlight” metaphor shines a light through files. Everything under the light plays back simultaneously, so you don’t have to audition sounds one at a time. (That sounds slightly terrifying to me, but I have to spend more time with it in an actual library.)
The creators describe the magic thusly:
Have you ever listened to a sound and felt that there was a similar one somewhere on your hard disk? And the sound you can’t find would just work so much better right now? Well, Soundtorch also remembers all sounds that you ever listened to. Just select any sound on Soundtorch, and let the system suggest the most similar ones from your whole collection.
In other words, SoundTorch is as much about what you can’t see as what you can – the intelligence to determine similarity behind the scenes. Check out the tech talk in the video above for more information on how “aurally and visually-enhanced audio search” could also apply this technology. More research at: http://www.accessive-tools.com/
Finally, if you want to hear the “Optimist” track by Zoe Keating without that voiceover and just enjoy Planetary’s gorgeous visuals, here you go:
From innovation in the visual interface to the intelligence underneath that changes how the computer interprets relationships between files, finally, there’s hope. Music and sound might not forever be trapped in views borrowed from spreadsheets, tables modeled on the needs of accountants 30 years ago.
jQuery Mobile Alpha 3 increases browser support to include Firefox Mobile, Opera Mobile / Mini. Improvements reported on support for iOS, Android, BlackBerry 6, and Palm WebOS. Moreover, the Ajax navigation system has been …
deeply re-factored to improve performance and handle more edge cases. This includes event handling for click, submit, and hashchange, all of the base tag management, path management, active link class handling, etc. and better support for dialogs.
Individuals have noted some breaking changes relative to early revs.
It's hard to find advice about mobile design that doesn't emphasize the importance of context. While many people are quick to point out understanding mobile context is key to delivering a great mobile experience, few define context explicitly enough to make it actionable. That's why I'm always excited to find concrete insights into how people are using mobile devices.
In its simplest form, context is the circumstances under which something happens. For example, desktop computers are most often used: at a desk (in an office or home); with a persistent connection to power and the network; in relative privacy; from a seated position; and so on. While someone can certainly use a mobile device at a desk, there is a much wider set of contexts possible because mobiles are portable.
Since mobile devices are (just about) always with their owners, time and location play a big role in defining their context of use. And because mobile devices have the ability to talk, text, IM, and email people (plus an address book!), social rounds out the triumvirate of mobile context. When you design for mobile you are designing something that can be used anywhere, anytime, and be instantly shared/discussed with other people. But I promised a more concrete definition so let's look at where and when mobile devices are used.
Where are people using mobile devices?
84% at home
80% during miscellaneous downtime throughout the day
This graph shows the number of articles read each hour by Read It Later users on their computer. The number of reads grows more sharply until noon and then begins to fall off until after work (6PM – 9PM).
The second graph shows the number of articles read by iPhone users each hour. There's four major peaks: 6am (breakfast); 9am (the morning commute and start of workday); 5pm – 6pm (end of the work day and the commute home); 8pm – 10pm (couch time, prime time, bed time).
As you can see there's quite a difference between when people read on computers and on mobile devices and, hopefully, further clarity on when people are actually use mobile devices.
