Future-friendly web

the web logo banner text WEB

the web logo banner text

Image courtesy of Brad Frost the real web

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

the “classic” web, today...

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

slow...

use of obsolete technologies

ineffective use of space

user interface viewport connection speed and bandwidth technology support context

3 high level strategies

1.mobile website 2.responsive website 3.app

1. mobile website

m.uitinvlaanderen.be

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

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

2. responsive website

responsive website

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

1. fluid grid + fluid images

2. CSS3 Media Queries

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

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

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

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

3. app

no standardization

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

the real-world

mobile ≠ lite

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

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

possible solution Build 2 separate websites  classic “desktop” website (  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

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

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

use web standards

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

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.

SEO

mobile search ≠ local search

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

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

SEO? relevancy

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

analytics

OEA Website Vendor designed CMS called GeoDocs. Local to Columbus. We chose option 2, responsive website. Required CMS modifications. Full content, but not full functionality.