Hi. I read a very interesting article RedTech. I leave here:
We’ve been seeing a lot of articles lately about the change happening in web and interactive design.
Here at redtech we’ve been grappling with many of the same issues. Since we develop mobile apps using HTML5 and PhoneGap, our goal is to build once and deliver across all platforms. The reality is very different, and one key problem for us is grappling with multiple screen resolutions.
For today’s article, I’m going to walk through our workflow for designing towards multiple screen resolutions. This is meant to be very hands on, or tactical. There’s no over-arching design philosophy here, but just some practical tips for getting the job done efficiently.
The Problem
Today’s mobile devices come in a wide array of shapes and sizes. Our current list of target screen sizes has 18 different resolutions across 6 different aspect ratios. Gone are the days when “mobile” meant the 320×480 iPhone resolution. Even there, you have three possible resolutions, 320×480, 640×960, and 640×1136.
The Strategy
We’re going to assume that we’re building a native app in HTML5, so no desktops. Also, the design will be in landscape mode. That said, you should be able to apply this to any mobile design project.
1. Design in Illustrator
If you’re an old Photoshop hand, this is going to be hard for you. Still, you need to be working in a vector based medium as much as possible. Vector assets will scale cleanly from 320px wide to 1536. Don’t waste your life re-doing the same layout over and over again in different resolutions.
If you’re an old Photoshop hand, this is going to be hard for you. Still, you need to be working in a vector based medium as much as possible. Vector assets will scale cleanly from 320px wide to 1536. Don’t waste your life re-doing the same layout over and over again in different resolutions.
2. Design to Aspect Ratio
Depending on your background, this may be a new concept for you. Since a “pixel” has become a relative concept, there’s no reason to lock your design into a finite set of square dots on the screen. What really matters is the aspect ratio, or the relationship between the width and the height of the screen.
By designing to aspect ratio you can target more devices with the same design. For example, here’s a list of devices that all use 16:9 aspect ratio:
iPhone 5 – 640 x1136
Microsoft Phone 8 (720) – 720×1280
Android Tablet – 768×1366
By designing to the 16:9 aspect ratio you can target all these devices with the same layout.
Different screen resoutions on different devices still have the same screen resolution.
Depending on your background, this may be a new concept for you. Since a “pixel” has become a relative concept, there’s no reason to lock your design into a finite set of square dots on the screen. What really matters is the aspect ratio, or the relationship between the width and the height of the screen.
By designing to aspect ratio you can target more devices with the same design. For example, here’s a list of devices that all use 16:9 aspect ratio:
iPhone 5 – 640 x1136
Microsoft Phone 8 (720) – 720×1280
Android Tablet – 768×1366
By designing to the 16:9 aspect ratio you can target all these devices with the same layout.
3. Plan to Adapt
Rather than create all new layouts for each aspect ratio, decide which elements of your design will change in a taller layout, and tweak the design for that scenario. For example, if you added the iPhone 4 to our list from above, it has a 3:2 aspect ratio, so it’s shorter than the iPhone 5. Now it’s time to borrow a trick from the pre HD days of video production and add some “safe zones” to your design template. This can just be a guide to let you know where the 3:2 cutoff is.
Now while you’re designing, you can make sure that all the key content appears within the 3:2 window, or you can define parts of the design that move or scale on the smaller screen.
This isn’t an easy thing to make a rule about. It depends a lot on what your app looks like and what the requirements are. Use your best judgment. Our point here is to try as much as possible to not re-design and entire layout for one or two devices.
Rather than create all new layouts for each aspect ratio, decide which elements of your design will change in a taller layout, and tweak the design for that scenario. For example, if you added the iPhone 4 to our list from above, it has a 3:2 aspect ratio, so it’s shorter than the iPhone 5. Now it’s time to borrow a trick from the pre HD days of video production and add some “safe zones” to your design template. This can just be a guide to let you know where the 3:2 cutoff is.
Now while you’re designing, you can make sure that all the key content appears within the 3:2 window, or you can define parts of the design that move or scale on the smaller screen.
This isn’t an easy thing to make a rule about. It depends a lot on what your app looks like and what the requirements are. Use your best judgment. Our point here is to try as much as possible to not re-design and entire layout for one or two devices.
4. Target a few Key Resolutions
When you get to the production, you’ll have to save out files in bitmap formats. (At least until SVG becomes viable.) Since we can use media queries in CSS to re-size images, we can create images at the largest possible resolution and scale them down for presentation on smaller screens.
This presents a performance issue, since an iPhone 3 will choke and die if you try to give it a 1536×2048 background image meant for an iPad with retina display.
Our solution is to create artwork that targets our 3 most popular resolutions:
480 pixels wide – Android Phone/Windows Phone
960 pixels wide – iPhone 4 +
1536 pixels wide – iPad Retina display
Any screen that is 480 pixels wide or less will the the 480 set. Between 480 and 960, and will get the 960 set and so on.
When you get to the production, you’ll have to save out files in bitmap formats. (At least until SVG becomes viable.) Since we can use media queries in CSS to re-size images, we can create images at the largest possible resolution and scale them down for presentation on smaller screens.
This presents a performance issue, since an iPhone 3 will choke and die if you try to give it a 1536×2048 background image meant for an iPad with retina display.
Our solution is to create artwork that targets our 3 most popular resolutions:
480 pixels wide – Android Phone/Windows Phone
960 pixels wide – iPhone 4 +
1536 pixels wide – iPad Retina display
Any screen that is 480 pixels wide or less will the the 480 set. Between 480 and 960, and will get the 960 set and so on.
5. Output Multiple Sizes Quickly
This last tip is purely a how to. Illustrator’s File > Save for Web command has a nice feature that let’s you scale the output of your images as you save them. Take advantage of this feature and web slices to speed up your production process.
Wrapping it Up
This is all, of course, a work in progress. The mobile landscape changes very quickly, and everyone in the industry is trying to answer the same questions. To help you get started, we’ve created a free Illustrator template for you to use. If you find this useful, or if you have something to add to it, let us know about it by commenting below.
This last tip is purely a how to. Illustrator’s File > Save for Web command has a nice feature that let’s you scale the output of your images as you save them. Take advantage of this feature and web slices to speed up your production process.
Wrapping it Up
This is all, of course, a work in progress. The mobile landscape changes very quickly, and everyone in the industry is trying to answer the same questions. To help you get started, we’ve created a free Illustrator template for you to use. If you find this useful, or if you have something to add to it, let us know about it by commenting below.
No hay comentarios:
Publicar un comentario