Your SlideShare is downloading. ×
Mobilize your website and web applications
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Mobilize your website and web applications

633
views

Published on

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

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
633
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
22
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • static viewport widthintroduces control
  • Transcript

    • 1. Future-friendly web 2.
    • 2. the weblogo bannerWEB text 3.
    • 3. the weblogo banner text 4.
    • 4. 5.
    • 5. the real web Image courtesy of Brad Frost 6.
    • 6. reduce costsensure a “pixel-perfect” experience across users covered 90% of web clients 7.
    • 7. 8.
    • 8. the “classic” web, today... 9.
    • 9. low usabilitysmall text, tiny targets, “desktop” UI 10.
    • 10. slow... 11.
    • 11. use of obsolete technologies 12.
    • 12. ineffective use of space 13.
    • 13. user interfaceviewportconnection speed and bandwidthtechnology supportcontext 14.
    • 14. 3high levelstrategies 15.
    • 15. 1. mobile website2. responsive website3. app 16.
    • 16. 1. mobile website 17.
    • 17. www.uitinvlaanderen.be m.uitinvlaanderen.be 18.
    • 18. “full” website HTML + CSS + Javascript templates front-end templates DBraw content back-end logic mobile website HTML + CSS + Javascript 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. 2. responsive website 21.
    • 21. www.barackobama.com www.barackobama.com 22.
    • 22. responsive website 23.
    • 23. responsive design front-end templates HTML + CSS + Javascript DBraw content back-end logic 24.
    • 24. 1. fluid grid + fluid images 25.
    • 25. 2. CSS3 Media Queries 26.
    • 26. 3. content like watercontent’s going to take many forms and flow into many different containers. 27.
    • 27. “Whatever the device you use for gettingyour information out, it should be the sameinformation.” Sir Tim Berners-Lee, 1999 28.
    • 28. same content for all devices solid content strategy is crucial! organizing and prioritizing 29.
    • 29. responsive websitescalableno changes CMSSEO1 single websitecomplex for existing websitescomplex wireframing and design 30.
    • 30. 3. app 31.
    • 31. no standardization 32.
    • 32. appsrich user interfaceOS integrationhigh performanceapp store monetizationtime to updateapp store approval and restrictionsdevelopment for each platform 33.
    • 33. the real-world 34.
    • 34. mobile ≠ lite 35.
    • 35. no clear “mobile use case” existsphone/tablet as a primary devicemobile as an opportunity 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. 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. go mobile first growth -> opportunity constraints -> focus capabilities -> innovation 39.
    • 39. if you want an “app”feeling, just build a native app. 40.
    • 40. use web standards 41.
    • 41. 42.
    • 42. 43.
    • 43. 44.
    • 44. it’s not only about technology... content design structure usability accessibility 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. SEO 47.
    • 47. mobile search ≠ local search 48.
    • 48. local search 49.
    • 49. mobile search crawling CMSwww.example.com/about-us m.example.com/about-us 50.
    • 50. mobile search searching device detection + redirectwww.example.com/about-us m.example.com/about-us 51.
    • 51. 52. relevancySEO?
    • 52. SEO: it is at it’s best if you do notreally need it.relevant contenthigh-quality markupconsistent access across devices 53.
    • 53. analytics 54.