Download - Mobilize your website and web applications
![Page 1: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/1.jpg)
![Page 2: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/2.jpg)
2.
Future-friendly web
![Page 3: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/3.jpg)
3.
the web
logo
banner
text
WEB
![Page 4: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/4.jpg)
4.
the web
logo
banner
text
![Page 5: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/5.jpg)
5.
![Page 6: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/6.jpg)
6.
Image courtesy of Brad Frost
the real web
![Page 7: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/7.jpg)
7.
reduce costs
ensure a “pixel-perfect” experience across users
covered 90% of web clients
![Page 8: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/8.jpg)
8.
![Page 9: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/9.jpg)
9.
the “classic” web, today...
![Page 10: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/10.jpg)
10.
low usabilitysmall text, tiny targets, “desktop” UI
![Page 11: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/11.jpg)
11.
slow...
![Page 12: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/12.jpg)
12.
use of obsolete technologies
![Page 13: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/13.jpg)
13.
ineffective use of space
![Page 14: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/14.jpg)
14.
user interface
viewport
connection speed and bandwidth
technology support
context
![Page 15: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/15.jpg)
15.
3high level strategies
![Page 16: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/16.jpg)
16.
1. mobile website
2. responsive website
3. app
![Page 17: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/17.jpg)
17.
1. mobile website
![Page 18: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/18.jpg)
18.
www.uitinvlaanderen.be m.uitinvlaanderen.be
![Page 19: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/19.jpg)
19.
back-end
front-endDB
raw content
“full” websiteHTML + CSS + Javascript
templates
logicmobile websiteHTML + CSS + Javascript
templates
![Page 20: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/20.jpg)
20.
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
mobile website
![Page 21: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/21.jpg)
21.
2. responsive website
![Page 22: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/22.jpg)
22.
www.barackobama.com www.barackobama.com
![Page 23: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/23.jpg)
23.
responsive website
![Page 24: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/24.jpg)
24.
HTML + CSS + Javascript
responsive design
back-end
front-endDB
raw content
logic
templates
![Page 25: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/25.jpg)
25.
1. fluid grid + fluid images
![Page 26: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/26.jpg)
26.
2. CSS3 Media Queries
![Page 27: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/27.jpg)
27.
3. content like water
content’s going to take many forms and flow into many different containers.
![Page 28: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/28.jpg)
28.
“Whatever the device you use for getting your information out, it should be the same information.”
Sir Tim Berners-Lee, 1999
![Page 29: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/29.jpg)
29.
same content for all devicessolid content strategy is crucial!
organizing and prioritizing
![Page 30: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/30.jpg)
30.
scalable
no changes CMS
SEO
1 single website
complex for existing websites
complex wireframing and design
responsive website
![Page 31: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/31.jpg)
31.
3. app
![Page 32: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/32.jpg)
32.
no standardization
![Page 33: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/33.jpg)
33.
rich user interface
OS integration
high performance
app store monetization
time to update
app store approval and restrictions
development for each platform
apps
![Page 34: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/34.jpg)
34.
the real-world
![Page 35: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/35.jpg)
35.
mobile ≠ lite
![Page 36: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/36.jpg)
36.
no clear “mobile use case” exists
phone/tablet as a primary device
mobile as an opportunity
![Page 37: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/37.jpg)
37.
real-world difficultiesStakeholders have different mind-sets
Level of knowledge and experience
No room for mandatory content (*)(*) read “ads”
Fear of losing flexibiltyi.a. limited rich-text editor
TestingDevice labs are recommended
Short time-to-deliverNot much time for thorough content selection, modeling and structuring
![Page 38: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/38.jpg)
38.
possible solutionBuild 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
![Page 39: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/39.jpg)
39.
go mobile first
growth -> opportunity
constraints -> focus
capabilities -> innovation
![Page 40: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/40.jpg)
40.
if you want an “app” feeling,
just build a native app.
![Page 41: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/41.jpg)
41.
use web standards
![Page 42: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/42.jpg)
42.
![Page 43: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/43.jpg)
43.
![Page 44: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/44.jpg)
44.
![Page 45: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/45.jpg)
45.
it’s not only about technology...
content
design
structure
usability
accessibility
![Page 46: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/46.jpg)
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.
![Page 47: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/47.jpg)
47.
SEO
![Page 48: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/48.jpg)
48.
mobile search≠
local search
![Page 49: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/49.jpg)
49.
local search
![Page 50: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/50.jpg)
50.
mobile searchcrawling
www.example.com/about-us m.example.com/about-us
CMScanonical
![Page 51: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/51.jpg)
51.
mobile searchsearching
www.example.com/about-us m.example.com/about-us
device detection + redirect
![Page 52: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/52.jpg)
52.
SEO?relevan
cy
![Page 53: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/53.jpg)
53.
SEO: it is at it’s best if you do not really need it.
relevant content
high-quality markup
consistent access across devices
![Page 54: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/54.jpg)
54.
analytics
![Page 55: Mobilize your website and web applications](https://reader034.vdocuments.site/reader034/viewer/2022051819/54c8c0ec4a79597b3c8b4610/html5/thumbnails/55.jpg)