• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Adobe 30iun2011
 

Adobe 30iun2011

on

  • 624 views

 

Statistics

Views

Total Views
624
Views on SlideShare
540
Embed Views
84

Actions

Likes
0
Downloads
3
Comments
0

1 Embed 84

http://www.agora.ro 84

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • LucianCozma, adobePrezentareaestescrisa in engleza, nu stiamsiguraudienta, asaca am preferatsa o facmaiinternationala, sperca nu o sa fie nici o problema.Imicerscuze de peacumpentruromglezape care o sa o vorbesc, termenii in engleza mi-au intratfoartemult in reflex (defect profesional), sperca o saimimaiiertatiamestecul de romana cu engleza, mai ales caaparent am siprezentareaceamailungaBusiness Catalyst”… an online business platform for websites and online stores built for web designers“Astazi o savorbimdesprecatevatactici/tips& tricks prin care dezvoltareapentru multi-screen poatedevenimaiusoara.
  • Consider that AT&T, the exclusive carrier for Apple's iPhone, has seen a 4,932% increase in mobile traffic data in the past three years. And that's just the start.Mobile internet adoption has outpaced desktop internet adoption and it’s catching up. In 2013 se estimeazacavor fi mai multi utilizatori de web de pe device-uri mobile decatpe desktop.Over half of smartphone users (Android and iPhone) spend more than 30 minutes per day using mobile applications.Odata cu crestereavitezei de conectivitate la internetulmobilcrestevacrestesiadoptiadarmai ales cererea de a se creacontinutpetoateaceste device-uri.Si astafaraaproapesaiei in cosideraresifaptulcaproblema secomplicapentrudezvoltatorimai ales candaparsialte web-enabled-devices: TVs
  • Variety of devicesNumarul de dispozitivesi de electronica conectata la internet cresteatat de multsicreaza o varietatenemaintalnitapanaacum: hardware, software, etcDe exemplu:Myriad of screen sizesPhones, tablets, TVs, each come with their own size. Varietatea de rezolutii e atat de mare incat nu le maiputemdeja tine numarul.Orientarea are siea un rol de jucat(landscape vs portrait). In plus acum device-urilevariazalucrulasta “on the fly”- doarintorcitelefonul/tabletasi se schimbasiorientareaMultitude of web-browsers (and capabilities of those browsers)Desibrowsereleincepsaaibacapacitati standard sisuntbrowsere care reusescsadetinaacumpiata, varietatea tot exista, mai ales dacavorbim de capabilitatidiferitepe device-uridiferite (geolocation, gyroscop, suportdiferit de HTML/CSS, suport de plugin-uridiferit, etc)InputExista device-uri cu touch-screen, cu rotita, doar cu keyboard navigation (da, din ce in cemairar),develeoper-ultrebuiesatinacont de toateasteaDevice resourcesAre more limited compared with desktopmobile-device technology is making incredible leaps forwards, but in some cases still remains an issueBandwidthUn constraint care reprezinta o problema nu din punctul de vedere al vitezei (care devine din ce in cemaiirelevant), ci din punct de vedere cost. Trebuiesaoptimizezi cat maimultcontinutulpentru mobile pentru a optimizacostulpentru client.AdvertisingCandaimaiputinecransicapacitatimaimici ale device-ului, e maigreusaitistrecorireclama in acelasi mod siuneoritrebuiesa vii cu solutiiingenioase de a monetizasau de a continua cu modelul ad-based
  • You’ll find that some of these design practices are also valid not just for mobile, but for any good web-app/web siteNOT the same for every browserRemember the times where web developers were tormented by the fact that they needed to develop pixel-perfect experience across browsers?Mobile FirstThink of the mobile version as the MVP of your site. Make sure that it contains the right information and not too muchExploit device capabilitiesThat’s why he spend all that money on the latest gizmo, to get the latest perksUse location to optimize content Know the device’s limitationsExample: hover does not exist on touch-devices, so make sure not to create user-interactions that depend on thatOn some devices the keyboard input might be very difficult, so whenever possible create a “call to action” rather than making the user having to use keyboard (ex: a date should be using a date picker and even more pre-selected with the most likely date – today, etc) if a user has to enter a country, use location to detect it
  • Design navigation to match device typeMobile People have little time to find information, minimize number of clicks and pages that get them to the right informationDesign your content/structure so that you can easily adapt it for devicesNew devices appear on a daily basis. Make sure you structure your design/content holders/visual entities on the site so that they can easily be adapted
  • browser detection to redirect your users to the appropriate mobile siteThere are various waysto do this also. Use browser agent to detect and redirect catre mobile.mysite.comLately the concept of Device Description Repository (DDR) which are repositories which contain the descriptions of mobile devicesAn example of such a repository is WURFL (used by Adobe, Google, Facebook), an open-source projectWURFL is an XML configuration file plus a set of programming APIs to access the data in real-time environmentsDarcesunt media queries? Cati din salasuntfamiliari cu acest concept?
  • In cazul BC, noiavem un amestec de cam cear fi mai bun din toatelumile:Putemsaschimbam tot continutulindiferent de devicePutem in acelasitimpsasi re-folosimcontinutdintr-o parte in altapentrucaavem in spate o platforma cu baza de date care poate re-folosi zone de continutdupa cum dorimPutemsafolosimsi media queries si fluid grid

Adobe 30iun2011 Adobe 30iun2011 Presentation Transcript

  • Web Development Best Practices for Multi-Screen
    Lucian 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/
  • Q&A
    11
    Questions?
  • 12
    Thank you!
  • Properly Using Footers and Page Numbers in PowerPoint 2007
    This template is equipped with an optional Footer area.
    To show footers:
    Click the Insert tab
    Click the Header and Footer button on the Text group
    Change the text in the footer box
    Hit the Apply to All button
    Slide number and date/time controls are also located here
    14
    1
    2
    4
    3
  • 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)
    Click the Design tab
    Click the morearrow hiding directly to the left of the Effects button (see screenshot to the right)
    Choose “Save Current Theme”
    Name the Theme Adobe2011Widescreen (so you can differentiate it from the standard 4x3 Adobe theme)
    Right-click the new thumbnail and choose “Set as Default Theme”
    Apply the theme to an older presentation
    Open a presentation
    From the Design tab, right click the Adobe2010Widescreen theme thumbnail and choose “Apply to all slides”
    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.
    cleverly hidden morearrow to save current theme
    right-clicking a slide thumbnail to change layout
    15
  • Bar Chart
    16
    Try to use neutral colors for most chart elements, and highlight elements of interest with bright colors
  • Pie Chart
    17
    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
    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.
    R - 131
    G - 72
    B - 181
    R – 251
    G - 176
    B - 52
    R - 0
    G - 164
    B - 228
    R - 255
    G - 221
    B - 0
    R - 255
    G - 0
    B - 0
    R - 193
    G - 216
    B - 47
    Neutral
    R - 136
    G - 120
    B - 104
    R - 172
    G - 179
    B - 185
    R - 192
    G - 181
    B - 169
    R - 107
    G - 115
    B - 123
    R - 218
    G - 221
    B – 224
    R - 228
    G - 223
    B - 217
    21