Brugervenlighed & design på nettet

Svar: Responsivt design / mobilt website

Peter1982 — Mon, 27 Feb 2012 12:28:30 GMT

Takker for svar til jer alle.

Svar: Responsivt design / mobilt website

Jens Andersen — Thu, 23 Feb 2012 17:29:18 GMT

Peter1982:
Kender du evt. til en side, hvor dette bruges?

Hej Peter.

Jeg har via tutorials lavet denne hjemmeside, som ikke er helt færdig, hvor jeg benytter de ovenstående media definitioner til 3 forskellige stylesheets. Et til smartphones, et til tablets og et til desktop.

Du kan se siden her:

www.strikkerten.dk

Du kan gøre vinduet smallere i det vindue du har browseren åben i og se hvordan designet ændrer sig.

Se det eventuelt på en smartphone, der kan du bedre se forskellen.

Jens

Svar: Responsivt design / mobilt website

Lundsby — Wed, 22 Feb 2012 14:42:59 GMT

Jeg er stor tilhænger af responsivt design, i mine øjne er det til langt de fleste opgaver, at foretrække fremfor en decideret mobil version.

Det kan lyde lidt mærkeligt, men det som jeg ser som den største stærke, er at man via responsivt design kan give brugeren, en tryghed omkring at der findes en gennemtænkt mobil, tablet etc. oplevelse af ens site.

Det er super stærkt, fordi vi idag langt de fleste besøg kommer fra Desktop devices, og man på den måde kan virke cool og med på beat, selv overfor dem der ikke surfer via en iPhone.

Som jeg ser det bliver responsivt design, fremtidens krav til stortset alle websites og ikke mindst shops. Finans sektoren er allerede igang check: http://www.jyskebank.dk

På den tekniske side er det relavtivt nemt at hvordan media-queries kan blive omdrejningspunkt, for at oplevelsen til passes, både hvad angår scripts, flash etc.

Lad os f.eks. sige vi vil varierer antallet af bannere der kører på en side, så bruger man simpelt media queries til at skjule og vise det foreskellige bannere, det gode ved det er at evt. Flash bannere kun bliver loadet når de bliver vist, på javascript siden er det også relativt simpelt at komme udenom, da det man skal tage højde få bare er om den pågældende banner er synlig eller ej.

Så jo man bruger CSS til at forhindre at JavaScript eksekveres og billeder/film etc. loades, det hele styres med CSS media queries som omdrejningspunkt.

Ulempen ved responsivt design, er pt. at man downloader hele html'en og hele javascript filen, selv på mindre devices. Men det fleste der har arbejdet med performance af websider, vil nok være enige i at det nok ikke er den store begrænsning.

Men der ligger da en sjov opgave i at lave et filter som køres webserveren, som filterer irrelevant indhold væk for f.eks. en iPhone. Men det vil næppe havde den store betydning for performance, men det betyder ikke at de rigtige kunder ikke vil betale mange penge for sådan en teknologi.

Svar: Responsivt design / mobilt website

Simon Hoxer Bønding — Wed, 22 Feb 2012 14:01:07 GMT

Mads Jensen:
Jeg ser ingen grund til at lave serverside specifik kode. Datagrundlaget bør være det samme på siderne uanset hvilken opløsning man kører med. Det er ikke så nemt at få den besøgende opløsning fra serverside, og det kan nemt blive et mareridt at skulle vedligeholde den del serverside. Hvis der er ting der ikke skal vises ved bestemte opløsninger, kan det så håndteres via enten css eller javascript.

Problemet mindskes løbende i takt med at telefonener bliver hurtigere, men i forhold til størrelsen af siden og skærmen, kan det være en god grund at reducere antallet af punkter i en liste. Antallet af bannerannoncer osv. for at gøre siden mindre tung. CSS kan ikke forhindre Javascript i et eksekvere.

Det var nok ikke denne diskussion trådstarter, havde håbet på, det beklager jeg, men jeg lader det lige stå i tilfælde af at andre forbipasserende kan bruge det.

Svar: Responsivt design / mobilt website

Mads — Wed, 22 Feb 2012 13:04:38 GMT

Peter1982:
Kender du evt. til en side, hvor dette bruges?

Diazz linkede til en fin liste. Jeg syntes også, at Smashing Magazine's website er godt eksempel (resize din browser for at se effekten).

Simon Hoxer Bønding:

Jeg tror ikke CSS fidusen er så udbredt, som den lægger op til. Når alt kommer til alt, løser den kun problemet delvist og skal ligevel bakkes op af client-specifikke scripts, både javascript og serverside.

Løsning kan ændre bredden på siden, sidens grafiske elementer og skrifttyperne. Mere kan den ikke rigtig.

Det er jeg uenig i. Med et 'korrekt' kodet site (i forhold til html og css) vil man kunne ændre hele designet gennem media queries, ikke kun bredde, grafik og font, men også elementers placering, styling, skjule/vise elementer mv.

Jeg er enig i, at der kan være fordele i at lave javascript kode specifik kode til de forskellige opløsninger. Det vil dog heller ikke være et store problem, da man nemt kan fange den besøgende opløsning herfra.

Jeg ser ingen grund til at lave serverside specifik kode. Datagrundlaget bør være det samme på siderne uanset hvilken opløsning man kører med. Det er ikke så nemt at få den besøgende opløsning fra serverside, og det kan nemt blive et mareridt at skulle vedligeholde den del serverside. Hvis der er ting der ikke skal vises ved bestemte opløsninger, kan det så håndteres via enten css eller javascript.

Svar: Responsivt design / mobilt website

Simon Hoxer Bønding — Wed, 22 Feb 2012 10:34:44 GMT

Jeg tror ikke CSS fidusen er så udbredt, som den lægger op til. Når alt kommer til alt, løser den kun problemet delvist og skal ligevel bakkes op af client-specifikke scripts, både javascript og serverside.

Løsning kan ændre bredden på siden, sidens grafiske elementer og skrifttyperne. Mere kan den ikke rigtig.

Svar: Responsivt design / mobilt website

Diazz — Wed, 22 Feb 2012 10:24:28 GMT

http://mediaqueri.es

Svar: Responsivt design / mobilt website

Peter1982 — Wed, 22 Feb 2012 10:20:11 GMT

Tak for svar til jer begge.

Mads Jensen:

Du skal bruge media queries med dine stylesheets for at lave et design afhængigt af opløsningen.

F.eks. sådan:

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="mobile.css" />

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px) and (max-device-width: 760px)" href="tablet.css" />

Hvis den besøgende har en opløsning på max. width 480 px. vil den bruge mobile.css. Hvis den besøgende har mellem 480px og 760px vil den bruge tablet.css osv.

Det er generelt ikke en god ide at identificere browseren via serveren. Det giver hurtigt en masse problemer.

Kender du evt. til en side, hvor dette bruges?

Svar: Responsivt design / mobilt website

Mads — Tue, 21 Feb 2012 07:40:56 GMT

Responsive web design er ikke afhængigt af browseren, men af den opløsning den besøgende har. Og opløsningen kan kun fanges i frontend'en (via f.eks. javascript).

Du skal bruge media queries med dine stylesheets for at lave et design afhængigt af opløsningen.

F.eks. sådan:

Hvis den besøgende har en opløsning på max. width 480 px. vil den bruge mobile.css. Hvis den besøgende har mellem 480px og 760px vil den bruge tablet.css osv.

Det er generelt ikke en god ide at identificere browseren via serveren. Det giver hurtigt en masse problemer.

Svar: Responsivt design / mobilt website

Simon Hoxer Bønding — Tue, 21 Feb 2012 07:29:05 GMT

Browseren identificerer sig som regel indledningsvist, når den opretter en forespørgelse til en hjemmeside. Hvordan man tilgår de data browseren identificerer sig med, varierer imellem PHP, .ASP og andre serverside sprog.

Responsivt design / mobilt website

Peter1982 — Tue, 21 Feb 2012 07:16:48 GMT

Hej alle,

Jeg har nu læst en del om responsivt design som et alternativ til apps, hvilket jeg synes er genialt Der er dog en ting jeg fortsat ikke kan hitte ud af; hvordan ved serveren hvilken type browser, der besøger hjemmesiden? Altså hvordan kan serveren skelne imellem de forskellige typer browsers?

Vh. Peter