Platform uavhengig webdesign.

[Gjest Slettet+9871234]

1. Bakgrunn

Dere finner lenkene til alle mine nettsteder i min venstre signaturlenke DigitalPunkt.no. De sidene er laget i en 7 år gammel DreamWeaver mal som jeg har endret ganske mye. Det har vært en tut og kjør utvikling og mange av sidene har ikke mye innhold. Jeg har ikke hatt tid til fintilpasning av design slik at sidene kan leses av de fleste skjermstørrelser og oppløsninger. Jeg vet at de ikke ser bra ut på veldig små skjermer og jeg regner med at de er uleselige på mobile plattformer som iPhone og iPad og plattformer som bruker mobile nettlesere som Opera mini / mobile o. l. De er heller ikke bra på de nyeste store skjermene med default innstillinger. Nå er tiden inne for å endre på dette og ideelt sett skal siden leses på alle nettlesere deriblant tekstbaserte som Lynx og mobile plattformer. Denne https://www.diskusjon.no/index.php?showtopic=1308893&pid=17148760&st=20entry17148760 tåden inspirerte meg ytterligere til å ta fatt på denne oppgaven, jfr min post #21. Jeg har aldri testet mine sider i Lynx og på mobile plattformer. Så akkurat det er nytt for meg.

 

2. En start

Jeg vil bruke følgende teknologier (forslag til bedre mottas med takk):

1. X(HTML) - Forslag til versjon er viktig.
   
2. CSS (Forslag til versjon og styling er viktig)
   
3. PHP (Teste på user agent og levere det beste CSS stilarket tilpasset den agenten)
   

 

Mer om user agent:

1. http://php.net/manual/en/reserved.variables.server.php
   
2. http://www.php.net/manual/en/function.get-browser.php
   

 

Andre bedre metoder for å identifisere HTTP_USER_AGENT, kodesnutter eller klasser mottas med takk.

 

3. Løsning

Modifisere dagens styling eller lage en helt ny. Sidene bør laste så raskt som mulig. I dag lastes det inn en del grafikk som tar tid. Sidene bør vises bra på alle kjente nettlesere uansett skjermstørrelse og skjermoppløsning. De bør også vises bra på mobile plattformer nevnt ovenfor.

 

4. Innspill

1. Hvordan sidene ser ut i dag på ulike plattformer. Er de ubrukbare på iPhone / iPad etc?
   
2. Finnes der i så fall en rask tilpasning / ad hock løsning?
   
3. Design løsninger, CSS versjon samt styling.
   
4. (X)HTML versjon, coding, etc.
   
5. Andre php løsninger.
   

Endret 29. mars 2011 av Slettet+9871234

[MikkelRev]

Av HTML-versjoner (doctype) foreslår jeg HTML5. Da koder du for fremtiden istedetfor å bruke utgått/utgående teknologi. Skal siden vises likt i alle nettlesere, er det stor fordel å validere. Denne siden er også ganske fin for å finne ut hvordan siden din ser ut i andre nettlesere/OS'er: http://browsershots.org/

[Gjest Slettet+9871234]

Takk for raskt svar. Håper på mange flere innlegg.

[andreasn]

Du kan bruke Media-funksjonen til CSS for å hente forskjellig stilark/klasser til hver type klient. Les mer hos W3C og W3Schools.

[MikkelRev]

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

[Gjest Slettet+9871234]

Takk for ytterligere lenker. Har noen hatt tid til å se på hvordan de eksisterende sidene ser ut i ulike browsere? Er de som jeg antar ubrukelige på små skjermer?

 

Jeg kan komme til å implementere blogger i WordPress på noen av sidene, men det vil ikke være noen høyt prioritert oppgave. Der er også tegn som tyder på at blogg plattformers popularitet er dalende:

 

They say it because they are cheap and sheep..

Kilde: Wordpress.com Websites Are Great For SEO

 

Men Rosa blogg sider tjener jo penger på reklame her i landet og de får mye oppmerksomhet på Tv, så kanskje jeg skulle implementere en? Hvor god er forresten WordPress sider på mobile plattformer?

 

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Endret 30. mars 2011 av Slettet+9871234

[agrimsrud]

Må vel starte med å si jeg ikke har spesielt lang fartstid innen utvikling for mobile nettlesere, men etter min oppfatning er det to vilkår som gjør det nødvendig å sniffe etter mobile lesere:

 

1. Den vanlige nettsiden er stor og tung, mye data, mye grafikk, flash og/eller andre effekter.

 

For mobile brukere er det da praktisk med en egen versjon hvor alt av unødvendigheter er strippet vekk - både for å spare innlastingstid, for å redusere forstyrrende elementer og for å spare på mengden data som må overføres (og kanskje betales for).

 

2. Du tilbyr en tjeneste som egner seg godt som en webapp.

 

Enkelte tjenester bør være raske å få tilgang til og praktiske å bruke, og kan ha godt av å tilpasses mobile lesere. F.eks. tidtabeller, nyhetssider, webmail/meldingstjenester, vær ol. (Se f.eks. se.no eller ap.no og merk forskjellen mellom en vanlig PC/mac og en mobiltlf).

 

Nå har jeg bare en Androidtelefon selv, men har inntrykk av at de aller fleste moderne touchtelefoner har solide nettlesere som viser en nettside på samme måte som om du sitter på PC/mac (selv om du gjerne må zoome en del inn/ut hvis du surfer mye). Regner med det samme gjelder diverse nettbrett. Tror derfor det er irrelevant hvorvidt du bruker HTML4.01, HTML5, XHTML1.x-2 osv. Vil jo da anbefale HTML5 som Mikkel foreslår - en enkel, intuitiv og fremtidsrettet standard.

 

I forhold til WP, så er lesbarheten på mobile enheter avhengig av template/theme.

[Gjest Slettet+9871234]

Takker for glimrende utførlig svar.

[Jonas]

Du ser ut til å streve etter nettsider som er kompatible med alle nettlesere, men faktum er at ikke alle nettlesere er kompatible med HTML. Bare følg standarder, så skal du se at når nettlesere oppdateres med full støtte, så funker sidene dine. Det er opp til brukeren å bruke en god nettleser. Å endre output på bakgrunn av type nettleser er nesten alltid bare unødvendig. Eneste argumentet for dette er båndbredde for mobile enheter, men i dag er selv dette en ikke-bekymring.

 

Sjekk ut media types.

 

La meg til slutt tilføye at ønsket støtte i Lynx er noe av det latterligste jeg har hørt på lenge.

Endret 31. mars 2011 av Jonas

[cbastus]

Har du oversikt over fordelingen mellom ulike plattformer/nettlesere av de som bruker sidene dine i dag?

Det er alltid et godt utgangspunkt å jobbe ut fra slik statistikk, på den måten dekker du majoritetene og kan luke bort ting som er uvesentlig (som Lynx, med mindre du antar at majoriteten din er blind/svaksynt).

 

Som det ble påpekt tidligere; det trenger ikke se likt ut hos alle. Om ingen av dine brukere har mobile plattformer, ville jeg prioritert bort dette i starten.

 

Når det kommer til valg av plattform for dine sider, bør du starte med hvilke behov du har og velge et system som dekker disse.

Jeg har jobbet med mange som har gått til innkjøp av feil CMS, fordi de har fokusert mer på muligheter enn de oppgavene som faktisk skal løses. Det er litt som å bruke flattrekker på stjerneskruer: Det gjør jobben, men det er mer kronglete enn nødvendig.

[Gjest Slettet+9871234]

Det er opp til brukeren å bruke en god nettleser. Å endre output på bakgrunn av type nettleser er nesten alltid bare unødvendig. Eneste argumentet for dette er båndbredde for mobile enheter, men i dag er selv dette en ikke-bekymring.

Selv i land som USA og Australia er der mange som fortsatt bruker 64 k oppringt modem. Jeg har sett en av sidene mine på en slik forbindelse, og det var ingen god erfaring.

 

La meg til slutt tilføye at ønsket støtte i Lynx er noe av det latterligste jeg har hørt på lenge.

Stort sett enig når det gjelder de norske sidene mine. Men jeg har langt flere engelskspråklige sider, som ideelt sett skal være tilgjengelige globalt. Ikke minst Afrika og Asia er mye lenger fremme på å ta i bruk mobile medier når de surfer nettet for å finne informasjon og når de handler via en nettbutikk. Mobile banking er et begrep man først og fremst forbinder med Afrika og der er det vanlig at du får en melding på mobiltlelefonen når lønnen din er kommet inn på konto. Man bruker også mobiltelefonen til å surfe og handle på nettet i større grad enn i Norge. De går med andre ofte utenom kabel nettverk og fokuserer mer på trådløse forbindelser. Jeg har vært medlem på WebProWorld forumet siden 2005, så dette vet jeg en del om.

 

Min sider er drevet av Google AdSense og den provisjonen betales ikke av hvor i verden en surfer benyttet reklamen. Den er med andre ord ikke kjøpekraftsjustert, så en som handler via min Google AdSense reklame i Afrika er like mye verdt som en som klikker seg inn på en vare eller tjeneste via min Google AdSense reklame i Norge.

Endret 1. april 2011 av Slettet+9871234

[Gjest Slettet+9871234]

Har du oversikt over fordelingen mellom ulike plattformer/nettlesere av de som bruker sidene dine i dag?

Det er alltid et godt utgangspunkt å jobbe ut fra slik statistikk, på den måten dekker du majoritetene og kan luke bort ting som er uvesentlig (som Lynx, med mindre du antar at majoriteten din er blind/svaksynt).

Nei det er en tid siden jeg sluttet å se på loggene mine da det tok for mye tid. De største brukerne var da jeg studerte dette US Education og US Military. Jeg husker ingen oppdeling på "user agent". Mest sannsynlig var det den gang Internet Explorer og FireFox som var de mest brukte browsere. Mye er endret siden jeg så på de loggene.

 

Takker for ytterligere innspill. La oss begynne med den enkle siden i min signatur, http://www.digitalpunkt.no/. Det hadde vært fint om dere hadde kommet med konkrete forslag til endringer i tillegg til de som allerede er nevnt. Men alle seriøse innspill er velkomne.

Endret 1. april 2011 av Slettet+9871234

[Avean]

Bare til rådet om å starte med HTML5 koding. Husk ikke alle har gått over til IE9 enda og fortsatt sitter med IE8. IE8 støtter ikke HTML5, bare noen få kodesnutter. For tidlig å begynne med HTML5.

 

Crossbrowser kompatibilitet handler om å bare skrive validert kode, ikke lage script for hver nettleser. Det er helt unødvendig. Ser sidene dine var veldig trege og hadde utrolig mye unødvendig kode så dette kan forbedres utrolig mye bare ved å gå over til ren CSS oppsett.

Endret 1. april 2011 av Avean

[Jonas]

Jeg har vært medlem på WebProWorld forumet siden 2005, så dette vet jeg en del om.

We're dealing with a master here.

[cbastus]

... La oss begynne med den enkle siden i min signatur, http://www.digitalpunkt.no/. Det hadde vært fint om dere hadde kommet med konkrete forslag til endringer i tillegg til de som allerede er nevnt. Men alle seriøse innspill er velkomne.

Det første jeg sliter med å forstå er hva denne siden/tjenesten er, og hvorfor jeg skal bruke min tid på den? Får du frem det på en enkel måte er du på god vei. Les gjerne Steve Krugs Don't Make Me Think og Jacob Nielsens artikler på useit.com for en god start.

 

Brukervennlighet handler i korte trekk om å gjøre ting åpenbart, tilpasse språk/ordbruk/farger/design til målgruppen og snakke til folks underbevissthet.

 

Mitt førsteinntrykk er at du har et for tungt språk (rundt 30-40 % av den vestlige befolkningen har lese og skrivevansker, så unngå store ord om du ikke spesifikt er ute etter folk med høyere utdanning kilde), at siden minner en spamsite (voldsomt mange annonser) og at jeg ikke helt forstå hva de forskjellige kategoriene er: Er dette sider du finner interessant, sider om spesifikke temaer, sider folk du kjenner har laget og hvem er Veronica?

[Gjest Slettet+9871234]

Bare til rådet om å starte med HTML5 koding. Husk ikke alle har gått over til IE9 enda og fortsatt sitter med IE8. IE8 støtter ikke HTML5, bare noen få kodesnutter. For tidlig å begynne med HTML5.

Har vel tenkt det samme, og når jeg snakker med personer fra Singapore på WPW som jo er langt fremme på IT, sier de at det er mange der som fortsatt bruker IE6. Kan jo løse det ved å teste på dato

 

<?php if date('Y') > 2013 echo HTML5 ...

Er 2014 er rimelig årstall å skifte? Jeg må jo da teste den koden i en browser som best mulg støtter HTML5, antagelig Opera eller FF.

 

Crossbrowser kompatibilitet handler om å bare skrive validert kode, ikke lage script for hver nettleser. Det er helt unødvendig. Ser sidene dine var veldig trege og hadde utrolig mye unødvendig kode så dette kan forbedres utrolig mye bare ved å gå over til ren CSS oppsett.

De laster inn noen små bilde filer som jeg har komprimert med http://www.irfanview.com/ som jeg synes gir den beste komprimeringen. Takknemlig om noen vet noen som er bedre. Standard opsjoner i Photoshop som min datter kan relativt godt var ikke noe bedre. Der kan være avanserte opsjoenr i PhotoShop som komprimerer enda mer of samme oppløsning. Veldig trege er de ikke på min eldgamle stasjonære med standard NextGentel modem forbindelse, så det er nytt om du bruker en rask forbindelse. Jeg er enig med deg i at et rent CSS oppsett er det beste om jeg ellers blir fornøyd med menyer etc. Jeg bruker sikkert for mye JavaScript kode (menyer) og de(t) skal jo også være søkemotors fiendtlig(e) og tregere enn å bruke CSS menyer.

 

Bra forslag som jeg nok selv er klar over. Jeg kan begynne med MiniNettverkets site, DigitalPunkt. Kan legge ut et forslag når jeg kommer fra ferie i slutten av april som de som gidder kan se på. Jeg bruker også for mange tabeller som man lett kan unngå med CSS. Intet er jo raskere enn HTML. En HTML side levert via PHP må jo preprosesseres og det kan ta litt tid. Site vide css stilark hvor default stilark ligger i minne er nesten like raskt.

 

Nyttig innspill

Endret 1. april 2011 av Slettet+9871234

[Gjest Slettet+9871234]

We're dealing with a master here.

Jonas ble medlem på diskusjon.no 22. desember 2002

so we are dealing with a Norwegian master

 

Ingen er så stor som vedkommende tror vi andre tror

[Gjest Slettet+9871234]

Det første jeg sliter med å forstå er hva denne siden/tjenesten er, og hvorfor jeg skal bruke min tid på den?

Du trenger ikke bruke mye tid på den. Det er startpunktet for vårt (mest mitt mini nettverk). Jeg spør etter innspill på hvordan den siden kan gjøres mer plattformomuavhengig, raskere og bedre. Den skal få mer innhold. Jeg spør hovedsakelig ikke etter det. Jeg har ideer om mer innhold. Har andre ideer om ytterligere innhold, mottas de med takk. Som sagt innledningsvis har sidene mine så langt vært et tut og kjør opplegg.

 

Får du frem det på en enkel måte er du på god vei. Les gjerne Steve Krugs Don't Make Me Think og Jacob Nielsens artikler på useit.com for en god start.

Godt råd å skrive enklere. Steve Krugs artikkel kjenner jeg ikke. Skal se på den. Jacob Nielsen kjenner jeg godt til men jeg skal nok studere hans artikler "Writing for the Web bedre."

 

Brukervennlighet handler i korte trekk om å gjøre ting åpenbart, tilpasse språk/ordbruk/farger/design til målgruppen og snakke til folks underbevissthet.

Bra innspill. Det er ikke alltid lett. Krever nok kreativitet.

 

Mitt førsteinntrykk er at du har et for tungt språk (rundt 30-40 % av den vestlige befolkningen har lese og skrivevansker, så unngå store ord om du ikke spesifikt er ute etter folk med høyere utdanning

Vi har ulike handikap. Jeg kjenner mitt med bakgrunn fra forskningsavdelingen i Norges Bank.

 

... at siden minner en spamsite (voldsomt mange annonser)

Lagd for AdSense, "link" og "content farms" - "siste straff fra Google". Jeg kjenner til det. Mer innhold skal komme.

 

Er dette sider du finner interessant, sider om spesifikke temaer, sider folk du kjenner har laget og hvem er Veronica?

Veronica og Sunniva er mine døtre.

 

Generelt. Bra kommentarer

Endret 1. april 2011 av Slettet+9871234

[agrimsrud]

Bare til rådet om å starte med HTML5 koding. Husk ikke alle har gått over til IE9 enda og fortsatt sitter med IE8. IE8 støtter ikke HTML5, bare noen få kodesnutter. For tidlig å begynne med HTML5.

Vha. HTML5 Shiv kan du få IE6-8 til å anerkjenne de nye HTML5-elementene. Krever javascript, men løser mange problemer og fungerer fint i de aller aller fleste sammenhenger.

 

HTML5 Shiv @Google Code og HTML5 Shiv @ejohn.org

 

Viktig å pushe standardene

[Gjest Slettet+9871234]

Takk igjen:

 

Denne

 

http://pewresearch.org/

 

siten synes jeg setter en god standard, med raske Css menyer og organisering av innhold.

 

En interessant artikkel

 

http://www.amobil.no/artikler/iphone_5_kan_faa_toppkamera/93524

 

om iPhone 5. Jeg har aldri hatt en iPhone og har tenkt å anskaffe meg versjon 5. Da får jeg jo selv testet den nye versjonen av siden på den plattformen når den er ferdig. Jeg har som mål at den nye versjonen av http://www.digitalpunkt.no/ skal være lett å navigere på ihvertfall den mobile plattformen.

 

Sjekk ut media types.

Jeg kjenner til og har så vidt brukt media typer. Ut over det har dere kommentert lite på dette viktige punktet, blant annet tester av hvordan siter fungerer på ulike moblie media typer. Er det noen som kjenner denne test

 

http://www.deviceanywhere.com/

 

plattformen, eller bruker dere Operas Mini simulator http://www.opera.com/mobile/demo/ eller andre test simulatorer?

 

Jeg synes ikke den foreslåtte test siden http://www.bbc.co.uk/news/ var så veldig brukervennlig på http://www.opera.com/mobile/demo/ (Opera mini simulatoren). Er det noen som har sammenlignet den test plattformen med en eller flere fysiske mobile plattformer? Er simulatoren generelt bedre enn det man får inntrykk av ved å teste den på BBCs nyhetsside? Gir simulatoren en sammenlignbar opplevelse av den man får på en iPhone eller en iPad?

 

Jeg er veldig interessert i slik informasjon før / mens jeg begynner med å utvikle en mobil versjon, fortrinnsvis ved å teste på user-agent og levere et skreddersydd stilark.

 

Her

 

http://www.webproworld.com/webmaster-forum/threads/59953-The-mobile-revolution

 

er der en topp ratet (5 stjerner) WPW tråd om dette viktige emnet for de som vil grave dypere i temaet.

 

Uansett takk for alle innspill så langt.

Endret 4. april 2011 av Slettet+9871234