Future-friendly web                  2.
the weblogo       bannerWEB        text                3.
the weblogo       banner        text                4.
5.
the real web               Image courtesy of Brad Frost                                              6.
reduce costsensure a “pixel-perfect” experience across users          covered 90% of web clients                          ...
8.
the “classic” web, today...                              9.
low usabilitysmall text, tiny targets, “desktop” UI                                         10.
slow...          11.
use of obsolete technologies                               12.
ineffective use of space                           13.
user interfaceviewportconnection speed and bandwidthtechnology supportcontext                                 14.
3high levelstrategies             15.
1. mobile website2. responsive website3. app                        16.
1. mobile website                    17.
www.uitinvlaanderen.be   m.uitinvlaanderen.be                                                18.
“full” website                                      HTML + CSS + Javascript                          templates            ...
mobile websitespecific content and targeted UIno changes to existing websiteoptimal experience for targeted devicedevice d...
2. responsive    website                21.
www.barackobama.com   www.barackobama.com                                            22.
responsive website                     23.
responsive design              front-end   templates                                      HTML + CSS +                    ...
1. fluid grid + fluid images                               25.
2. CSS3 Media Queries                        26.
3. content like watercontent’s going to take many forms and flow into           many different containers.                ...
“Whatever the device you use for gettingyour information out, it should be the sameinformation.”                       Sir...
same content for all devices   solid content strategy is crucial!          organizing and prioritizing                    ...
responsive websitescalableno changes CMSSEO1 single websitecomplex for existing websitescomplex wireframing and design    ...
3. app         31.
no standardization                     32.
appsrich user interfaceOS integrationhigh performanceapp store monetizationtime to updateapp store approval and restrictio...
the real-world                 34.
mobile ≠ lite                35.
no clear “mobile use case” existsphone/tablet as a primary devicemobile as an opportunity                                 ...
real-world difficulties Stakeholders have different mind-sets Level of knowledge and experience No room for mandatory cont...
possible solution Build 2 separate websites    classic “desktop” website (www.example.com)    separate “mobile” website (m...
go mobile first   growth -> opportunity   constraints -> focus   capabilities -> innovation                               ...
if you want an “app”feeling, just build a native app.                                    40.
use web standards                    41.
42.
43.
44.
it’s not only about technology...                    content                    design                    structure       ...
Properly structured contentis portable to futureplatforms.Design from the content out,not from the canvas in.A flexible pr...
SEO      47.
mobile search       ≠ local search                48.
local search               49.
mobile search                           crawling                             CMSwww.example.com/about-us              m.ex...
mobile search                             searching                           device detection + redirectwww.example.com/a...
52.       relevancySEO?
SEO: it is at it’s best if you do notreally need it.relevant contenthigh-quality markupconsistent access across devices   ...
analytics            54.
Mobilize your website and web applications
Mobilize your website and web applications
Upcoming SlideShare
Loading in...5
×

Mobilize your website and web applications

677

Published on

How to make your website and web applications mobile ready and what design strategies should you apply?

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
677
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • static viewport widthintroduces control
  • Mobilize your website and web applications

    1. 1. Future-friendly web 2.
    2. 2. the weblogo bannerWEB text 3.
    3. 3. the weblogo banner text 4.
    4. 4. 5.
    5. 5. the real web Image courtesy of Brad Frost 6.
    6. 6. reduce costsensure a “pixel-perfect” experience across users covered 90% of web clients 7.
    7. 7. 8.
    8. 8. the “classic” web, today... 9.
    9. 9. low usabilitysmall text, tiny targets, “desktop” UI 10.
    10. 10. slow... 11.
    11. 11. use of obsolete technologies 12.
    12. 12. ineffective use of space 13.
    13. 13. user interfaceviewportconnection speed and bandwidthtechnology supportcontext 14.
    14. 14. 3high levelstrategies 15.
    15. 15. 1. mobile website2. responsive website3. app 16.
    16. 16. 1. mobile website 17.
    17. 17. www.uitinvlaanderen.be m.uitinvlaanderen.be 18.
    18. 18. “full” website HTML + CSS + Javascript templates front-end templates DBraw content back-end logic mobile website HTML + CSS + Javascript 19.
    19. 19. mobile websitespecific content and targeted UIno changes to existing websiteoptimal experience for targeted devicedevice detection for auto-redirectscalabilitymultiple information architectureschanges to CMSSEO 20.
    20. 20. 2. responsive website 21.
    21. 21. www.barackobama.com www.barackobama.com 22.
    22. 22. responsive website 23.
    23. 23. responsive design front-end templates HTML + CSS + Javascript DBraw content back-end logic 24.
    24. 24. 1. fluid grid + fluid images 25.
    25. 25. 2. CSS3 Media Queries 26.
    26. 26. 3. content like watercontent’s going to take many forms and flow into many different containers. 27.
    27. 27. “Whatever the device you use for gettingyour information out, it should be the sameinformation.” Sir Tim Berners-Lee, 1999 28.
    28. 28. same content for all devices solid content strategy is crucial! organizing and prioritizing 29.
    29. 29. responsive websitescalableno changes CMSSEO1 single websitecomplex for existing websitescomplex wireframing and design 30.
    30. 30. 3. app 31.
    31. 31. no standardization 32.
    32. 32. appsrich user interfaceOS integrationhigh performanceapp store monetizationtime to updateapp store approval and restrictionsdevelopment for each platform 33.
    33. 33. the real-world 34.
    34. 34. mobile ≠ lite 35.
    35. 35. no clear “mobile use case” existsphone/tablet as a primary devicemobile as an opportunity 36.
    36. 36. real-world difficulties Stakeholders have different mind-sets Level of knowledge and experience No room for mandatory content (*) (*) read “ads” Fear of losing flexibilty i.a. limited rich-text editor Testing Device labs are recommended Short time-to-deliver Not much time for thorough content selection, modeling and structuring 37.
    37. 37. possible solution Build 2 separate websites classic “desktop” website (www.example.com) separate “mobile” website (m.example.com) Use the separate mobile website as a testbed for new technologies (e.g. concepts like responsive design) and new ways of representing content Eventually, replace the classic “desktop” website with the separate (responsive) website 38.
    38. 38. go mobile first growth -> opportunity constraints -> focus capabilities -> innovation 39.
    39. 39. if you want an “app”feeling, just build a native app. 40.
    40. 40. use web standards 41.
    41. 41. 42.
    42. 42. 43.
    43. 43. 44.
    44. 44. it’s not only about technology... content design structure usability accessibility 45.
    45. 45. Properly structured contentis portable to futureplatforms.Design from the content out,not from the canvas in.A flexible project workflow isessential to cope withchanges. 46.
    46. 46. SEO 47.
    47. 47. mobile search ≠ local search 48.
    48. 48. local search 49.
    49. 49. mobile search crawling CMSwww.example.com/about-us m.example.com/about-us 50.
    50. 50. mobile search searching device detection + redirectwww.example.com/about-us m.example.com/about-us 51.
    51. 51. 52. relevancySEO?
    52. 52. SEO: it is at it’s best if you do notreally need it.relevant contenthigh-quality markupconsistent access across devices 53.
    53. 53. analytics 54.
    1. Gostou de algum slide específico?

      Recortar slides é uma maneira fácil de colecionar informações para acessar mais tarde.

    ×