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