Clicky

Blogglisten
tirsdag 20. juli 2010 • 12:10
Mobilside for Øyafestivalen

Etter gode tilbakemeldinger på mobilsiden jeg lagde for Slottsfjellfestivalen, og en forespørsel fra Kenneth på Twitter, har jeg laget en mobilside for Øyafestivalens program. Og, om jeg tør si det selv, denne gangen ble den 1000 ganger bedre!

Denne gangen har jeg konsentrert meg om smartphones (spesielt iPhone og iPad), slik at jeg kan leke litt mer med UI. Én av endringene er at jeg denne gangen benytter meg av Ajax gjennom jQuery UIs tabs-funksjon:

$(‘#tabs’).tabs();

Ved å bruke Ajax kan brukerne også bruke siden som en web-app på Hjem-skjermene sine i iOS. (Bruker man vanlige linker sendes brukerne til Safari-appen.) Og, siden ser «smoothere» ut uten Safari-UI-et.

Øyafestivalen – mobilside Øyafestivalen – mobilside

Jeg har i tillegg benyttet meg av enhetsspesifisert CSS. Med andre ord; forskjellige CSS til forskjellige skjermstørrelser. Det vil si at iPhone-brukere får servert en mindre versjon enn det iPad- og desktop-brukere får. Denne funksjonen er implementert slik:

<link rel=”stylesheet” href=”style.css” type=”html/text” />
<!– Vanlig CSS som gjelder alle enheter –>

<link rel=”stylesheet” media=”screen and (max-device-width: 320px)” href=”320px.css” />
<!– CSS for enheter med mindre vidde enn 320px –>

<link rel=”stylesheet” media=”screen and (min-device-width: 321px)” href=”640px.css” />
<!– CSS for enheter med større vidde enn 321px –>

Øyafestivalen – mobilside (iPad)
Takk til Oddne for skjermbilde fra iPad!

Så, hva syns dere?

Oppdatert 22. juli 2010 18:04:
Etter tilbakemeldinger fra «Aaaaaa» (et akronym?) har jeg justert opp maksvidden (max-device-width) for å tilpasse mobiler med større oppløsning enn 320px, noe som vel i grunnen også gjelder iPhone 4. Siden jeg selv ikke har tilgang til all verdens mobiltelefoner, tar jeg gjerne imot tilbakemeldinger på hvordan siden oppfører seg på andre modeller!

En annen ting som også er lagt til er offline-funksjon for nettlesere som støtter HTML 5 Manifest. Det vil i praksis si alle iPhone-er, iPod Touch-er og iPad-er (og sikkert Android-er da dette er Google[?]). Enjoy!

Arkivert under: Fagstoff, Kreasjoner og omhandler: , , .
  • Per-Karsten
    ...hvorddan/hvor ofte henter denne "oppdateringer" fra programmet til oyafestivalen.com? Ser at et par artister har byttet plass/tid på programlista til festivalen, men inne i app'en er det fortsatt de samme tidene som kommer opp...

    (spesifikt gjelder det hhv. Panda Bear og Surfer Blood som har byttet plass på torsdagsprogrammet)
  • Den oppdateres når jeg forandrer innholdet. (Noe som jeg begrenser til én gang i uken, så den ikke bruker så mye båndbredde for de som bruker EDGE/3G.) Jeg forandrer de nå, så kommer de med oppdateringen på fredag. :)
  • Per-Karsten
    Dødsbra!
    Forøvrig et glimrende stykke arbeid.
    Dette blir jo utrolig nyttig å ha uka som kommer :)
  • Aaaaaa
    får ikke tatt screenshot på andriod uten å roote den faktisk, og det gidder jeg ikke. men det ble bedre nå. Mangler bare den første bokstaven i kolonnen :-)
  • Hehe, ok :) Men den får nesten bli som den er nå til jeg evt. får lånt en X10 og testa selv. Høres i alle fall ut som den er brukbar nå ;)
  • Aaaaaa
    funker ikke på android (SE x10). halve venstre del av kolonnen til venstre er utenfor skjermen og kan ikke sees
  • Hei, og takk for tilbakemeldingen. Har du mulighet til å sende et skjermbilde av det?

    Jeg har nå justert litt på CSS-biten, så den bruker 320px-CSSen på skjermer opptil 480px (som jeg tror Xperia 10 er), så bør fungere nå.
  • veldig bra! takk
blog comments powered by Disqus