Adobe 30iun2011

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Web Development Best Practices for Multi-ScreenLucian COZMA | Adobe Romania

1


<author></author>

Lucian COZMA, Adobe Romania Business Catalyst Team

2

… and (most) of the Business Catalyst team


The Web and Mobile Devices

Mobile internet users (and usage) is growing at an incredible pace Number of web-capable devices is expanding rapidly (smart-phones, tablets, TVs) Connectivity speed in mobile devices is going up

3


Challenges of Developing for Multiple Devices

Variety of devices smart-phones, TVs, gaming consoles, feature-phones, etc

Myriad of screen sizes Phones, tablets, TVs, each come with their own size. Orientation also comes in play

Multitude of web-browsers (and capabilities of those browsers) Input

mobile device input capabilities tend to differ, and can be significantly different than desktop (touch, etc)

Device resources processing power/memory/storage mobile-device technology is making incredible leaps forwards, but in some cases still remains an issue

Bandwidth Another area where great progress is made Speed becomes less of an issue, but traffic volume still represents a cost for mobile the end-user

Advertising More difficult to use conventional online-advertising strategy due to these limitations – can sometimes be

more difficult to monetize

4


Designing Your Web Site/Web Application for Multiple Devices

NOT the same for every browser It’ about the user-experience and the content, not about being pixel-perfect Keep the theme and branding constant, but tailor the experience to be the best it can for the device Focus on actually customizing the user-experiences on the devices you want

Mobile First Sometimes it’s wiser to actually start from the mobile version of your site/application It will force you to think about using the real-estate more wisely and better structure your navigation and

content

Exploit device capabilities You can detect device orientation (portrait or landscape) If browser has more advanced rendering/compatibility capabilities, let it do the heavy lifting for you, or

expose that extra functionality offered by the device/browser to the user Know the device’s limitations

And design the user-interactions accordingly If you know you’re going to re-use some of the navigation across multiple devices think about the

limitations before designing it

5


Designing Your Web Site/Web Application for Multiple Devices

Design navigation to match device type Make dead-simple for mobile, can be more creative on tablets Design for "Getting to the Point" quickly

Design for easy interactions On small screens, make actions easy to make Mobile devices have difficult input (tiny keys, small touch screen for example), don't make your visitors

struggle

Optimize your images/media for the device type You were accustomed to optimize images for the web, we have to optimize across devices Optimize the image content for mobile, as bandwidth usually comes to a higher cost than on desktop

Design your content/structure so that you can easily adapt it for devices design/content holders/visual entities on the site so that they can easily be adapted to other

devices/screen sizes

6


Building Your Web Site/Web Application for Multiple Devices

Various techniques to approach: Use browser detection to redirect your users to the appropriate mobile site Using media-queries Use browser detection and deliver device-tailored content from server-side

7


What are media-queries?

“HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.”

Basically offers the ability to attach different style sheets for clients with different properties Ex: attach a style sheet for a phone (with a small screen resolution) and a different one for a tablet or

desktop

Example:

<link href="css/small2.css" rel="stylesheet" type="text/css“

media="only screen and (min-width:0px) and (max-width:540px)">

This will apply the small2.css for devices of a specific media type (screen) with resolution width between 0 to 540px

Media queries are a W3C recommendation since July 2010, for CSS3 and already implemented by almost all modern browsers.

8


Media queries versus using server-side to deliver custom content

Media queries: Are an easy way to quickly provide various versions of the same site for multiple devices and

screen sizes It just skins the content and that content is delivered on all devices, no matter if it is used or

not does not take into account the other capabilities of the device (load a different JS library or

widget for that device) Requires to spend a very good amount of time in the way you design your site structures

Server-side delivering device-tailored content You can customize all aspects of what’s delivered to that mobile device (JS, CSS, etc) Can deliver ONLY the content that is required for that device Easier to create designs one device at a time Can be more difficult to maintain, usually is combined with a media-query technique Requires server-side code or a library to do that

9


About Business Catalyst

10

Business Catalyst - an online business platform for websites and online stores built for web designers“ Platform for creating e-commerce, online marketing, CMS, CRM, e-mails and much-much

more… http://www.businesscatalyst.com Developed and owned now in the Bucharest office We’re even hiring, check-out our blog and openings: http://myadobe.ro/angajam/

http://www.businesscatalyst.com/

http://www.businesscatalyst.com/

http://myadobe.ro/angajam/

http://myadobe.ro/angajam/


Q&A

11

Questions?

© 2011 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential. 12

Thank you!



Properly Using Footers and Page Numbers in PowerPoint 2007

This template is equipped with an optional Footer area.

To show footers:

1. Click the Insert tab

2. Click the Header and Footer button on the Text group

3. Change the text in the footer box

4. Hit the Apply to All button

Slide number and date/time controls are also located here

14

12

3

4


Using Themes to Convert Old Presentations – PPT2007 on Windows

Save the Theme from this presentation to your computer(you only have to do this once)

1. Click the Design tab

2. Click the more arrow hiding directly to the left of the Effects button (see screenshot to the right)

3. Choose “Save Current Theme”

4. Name the Theme Adobe2011Widescreen (so you can differentiate it from the standard 4x3 Adobe theme)

5. Right-click the new thumbnail and choose “Set as Default Theme”

Apply the theme to an older presentation

6. Open a presentation

7. From the Design tab, right click the Adobe2010Widescreen theme thumbnail and choose “Apply to all slides”

8. Right-click the thumbnail in the Slides pane on the left for any individual slides with the wrong layout and choose Layout. Then pick the correct layout.

right-clicking a slide thumbnail to change layout

cleverly hidden more arrow to save current theme

15


Bar Chart

16

Category 1 Category 2 Category 3 Category 40

1

2

3

4

5

6

Series 1Series 2Series 3

Try to use neutral colors for most chart elements, and highlight elements of interest with bright colors


Pie Chart

17

Sales

1st Qtr2nd Qtr3rd Qtr4th Qtr

Try to use neutral colors for most chart elements, and highlight elements of interest with bright colors


White Content Area Layout

This template has one master with several layouts

This is the standard layout suitable for most slides.

If you want a black or gray background (examples of which are on the following slides), right-click the thumbnail of the slide in the left-hand “Slides” pane , select “Layout”, and pick the layout that you want. This should not affect text or chart colors.

18


Gray Content Area Layout

19

For use with full-screen images or diagrams that look good on gray


Black Content Area Layout

20

For use with full-screen images or diagrams that look good on black


Color Palette

Dynamic

R - 136G - 120B - 104

R - 131G - 72B - 181

R – 251G - 176B - 52

R - 172G - 179B - 185

R - 0G - 164B - 228

R - 192G - 181B - 169

R - 255G - 221B - 0

R - 107G - 115B - 123

R - 255G - 0B - 0

R - 218G - 221B – 224

R - 193G - 216B - 47

R - 228G - 223B - 217

Neutral

Note

The standard Adobe colors are now included as part of the template.

The colors on this page have changed to reflect the recent brand refresh.

Refer to the new guidelines on brandcenter.adobe.com for information on how best to use colors and images to stay consistent with the brand.

21


Adobe 30iun2011

Technology

mobile device js

device typeyou

different media types

custom content media

devicetailored contentyou

makemobile devices

devices limitationsand

capable devices