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

2. Future-friendly web
2.

3. the web
logo
banner
WEB
text
3.

4. the web
logo
banner
text
4.

5. 5.

6. the real web
Image courtesy of Brad Frost
6.

7. reduce costs
ensure a “pixel-perfect” experience across users
covered 90% of web clients
7.

8. 8.

9. the “classic” web, today...
9.

10. low usability
small text, tiny targets, “desktop” UI
10.

11. slow...
11.

12. use of obsolete technologies
12.

13. ineffective use of space
13.

14. user interface
viewport
connection speed and bandwidth
technology support
context
14.

15. 3
high level
strategies
15.

16. 1. mobile website
2. responsive website
3. app
16.

17. 1. mobile website
17.

18. www.uitinvlaanderen.be m.uitinvlaanderen.be
18.

19. “full” website
HTML + CSS + Javascript
templates
front-end
templates
DB
raw content
back-end logic
mobile website
HTML + CSS + Javascript
19.

20. mobile website
specific content and targeted UI
no changes to existing website
optimal experience for targeted device
device detection for auto-redirect
scalability
multiple information architectures
changes to CMS
SEO
20.

21. 2. responsive
website
21.

22. www.barackobama.com www.barackobama.com
22.

23. responsive website
23.

24. responsive design
front-end templates
HTML + CSS +
Javascript
DB
raw content
back-end logic
24.

25. 1. fluid grid + fluid images
25.

26. 2. CSS3 Media Queries
26.

27. 3. content like water
content’s going to take many forms and flow into
many different containers.
27.

28. “Whatever the device you use for getting
your information out, it should be the same
information.”
Sir Tim Berners-Lee, 1999
28.

29. same content for all devices
solid content strategy is crucial!
organizing and prioritizing
29.

30. responsive website
scalable
no changes CMS
SEO
1 single website
complex for existing websites
complex wireframing and design
30.

31. 3. app
31.

32. no standardization
32.

33. apps
rich user interface
OS integration
high performance
app store monetization
time to update
app store approval and restrictions
development for each platform
33.

34. the real-world
34.

35. mobile ≠ lite
35.

36. no clear “mobile use case” exists
phone/tablet as a primary device
mobile as an opportunity
36.

37. 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.

38. 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.

39. go mobile first
growth -> opportunity
constraints -> focus
capabilities -> innovation
39.

40. if you want an “app”
feeling, just build a native app.
40.

41. use web standards
41.

42. 42.

43. 43.

44. 44.

45. it’s not only about technology...
content
design
structure
usability
accessibility
45.

46. Properly structured content
is portable to future
platforms.
Design from the content out,
not from the canvas in.
A flexible project workflow is
essential to cope with
changes.
46.

47. SEO
47.

48. mobile search
≠
local search
48.

49. local search
49.

50. mobile search
crawling
CMS
www.example.com/about-us m.example.com/about-us
50.

51. mobile search
searching
device detection + redirect
www.example.com/about-us m.example.com/about-us
51.

52. 52.
relevancy
SEO?

53. SEO: it is at it’s best if you do not
really need it.
relevant content
high-quality markup
consistent access across devices
53.

54. analytics
54.