Hov. Du er ikke logget ind.
DU SKAL VÆRE LOGGET IND, FOR AT INTERAGERE PÅ DENNE SIDE

Responsivt design / mobilt website

Side 1 ud af 2 (11 indlæg)
Tilmeldt 12. Oct 10
Indlæg ialt: 540
Skrevet kl. 08:16
Hvor mange stjerner giver du? :

Hej alle,

Jeg har nu læst en del om responsivt design som et alternativ til apps, hvilket jeg synes er genialt Big Smile 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

Fra Aalborg
Tilmeldt 4. Mar 11
Indlæg ialt: 169
Fra  HoxIT Skrevet kl. 08:29
Hvor mange stjerner giver du? :
Gennemsnit 5,0 stjerner givet af 1 person

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.

Tilmeldt 30. Oct 06
Indlæg ialt: 588
Fra  dk Skrevet kl. 08:40
Hvor mange stjerner giver du? :
Gennemsnit 5,0 stjerner givet af 1 person

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:

<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.

Tilmeldt 12. Oct 10
Indlæg ialt: 540
Skrevet kl. 11:20
Hvor mange stjerner giver du? :

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?

Tilmeldt 13. Feb 11
Indlæg ialt: 2
Skrevet kl. 11:24
Hvor mange stjerner giver du? :
Fra Aalborg
Tilmeldt 4. Mar 11
Indlæg ialt: 169
Fra  HoxIT Skrevet kl. 11:34
Hvor mange stjerner giver du? :

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.

Tilmeldt 30. Oct 06
Indlæg ialt: 588
Fra  dk Skrevet kl. 14:04
Hvor mange stjerner giver du? :

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.

Fra Aalborg
Tilmeldt 4. Mar 11
Indlæg ialt: 169
Fra  HoxIT Skrevet kl. 15:01
Hvor mange stjerner giver du? :

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.

Fra Hellerup
Tilmeldt 11. Apr 06
Indlæg ialt: 3722
Fra  CloudSprout Skrevet kl. 15:42
Hvor mange stjerner giver du? :

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.

 

 

 

 

Fra Brønshøj
Tilmeldt 15. Jun 11
Indlæg ialt: 1191
Fra  Jens Andersen Web-Integration Skrevet kl. 18:29
Hvor mange stjerner giver du? :

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

Redigering og Opdatering af hjemmesider. Responsive Webdesign Hjemmeside? Se YDELSER  Ring for tilbud tlf: 40431253

Side 1 ud af 2 (11 indlæg)