Avatar billede EveryMA Mester
30. juli 2015 - 21:11 Der er 15 kommentarer

Responsiv design.. løsning?

Hej. Mit design blev i sin tid ikke bygget til at kunne følge med på mobile enheder hvorfor man altså altid ser en desktop version af sitet.

Jeg skriver for at høre om det er muligt at gøre den responsiv uden at skulle bygge det HELE om. Det er et forholdvist stort site så før jeg går igang med et langtidstrukket projekt ville jeg lige høre om man kan gøre noget.
Avatar billede Slater Ekspert
30. juli 2015 - 21:23 #1
Det kommer an på siden og designet.

Hvis alle selvstændige elementer hver for sig kan presses ned til en bredde på 320 pixels, så er det relativt let at sætte nogle media queries op til at smide dem under hinanden. Kan de ikke det, så skal der noget custom nusseri til at gøre det - og det er ikke til at sige hvor meget det kræver uden at se det.
Avatar billede EveryMA Mester
30. juli 2015 - 21:28 #2
Korrekt, svært at "snakke" om når man ikke sidder med det. Men jeg tænker lidt at der altid vil være noget der ikke kan gå ned i f.eks. 320 pixels. Hvordan formår man så at skære det fra udelukkende på den mobile enhed, men beholder den på desktop versionen?

der skal jo helst ikke være 2 forskellige "sites". giver bare dobbelt arbejde efterfølgende.
Avatar billede ebea Ekspert
30. juli 2015 - 21:28 #3
Hvad mener du med "...at følge med på mobile enheder"??
Og at siden skal gøres responsiv??

Hvis det blot handler om, at du skal have lavet siderne så de er Mobil og tablet venlige, er det ikke det store indgreb!

Og hvor kan din side ses henne??
Avatar billede EveryMA Mester
30. juli 2015 - 21:32 #4
Følge med, så de kan ses i god tilstand på mobile enheder... telefoner tablets m.v. altså ikke i desktop version hvor der skal zoomes for at kunne læse.

responsiv er jo bare så designet følger med alt efter hvilken enhed man benytter.
Avatar billede ebea Ekspert
30. juli 2015 - 21:41 #5
Hvis ikke du vil bygge hele sitet om, så du har 2 versioner (mobil og desktop), kan du vælge en ganske enkelt metode, som gør at der altid skaleres til en læsbar størrelse, uafhængig af hvad der indlæses på af enheder (telefoner, tablets, eller desktop).

Du kan indsætte følgende linje i din Meta sektion på hver side af alle sider.

<meta name="viewport" content="width=device-width, initial-scale=1">

Der indlæses altid i læsbar størrelse ved load på en enhed. Og der kan så blot klikkes ind og ud af læsbarheden, med et klik på skærmen.

ved ikke om det var det du tænkte på!!
Avatar billede EveryMA Mester
30. juli 2015 - 21:42 #6
Jeg kender godt til det meta-tag, men min pointe er at jeg IKKE vil have 2 versioner. Så skal jeg arbejde dobbelt når begge versioner skal opdateres.
Avatar billede ebea Ekspert
30. juli 2015 - 21:48 #7
Du får jo heller ikke 2 versioner ved at benytte dette tag!
Det er jo netop pointen ved det, at det skalerer dine sider til de enheder de indlæses på!
Avatar billede EveryMA Mester
30. juli 2015 - 21:50 #8
Jo jo, det kan godt være, at den "skalerer". Men så gør man det bare omvendt. I stedet for at zoome ind på desktop versionen for at læse, så skal man alene med dette tag zoome UD for at se hvad der sker til højre for skærmen :)
Avatar billede ebea Ekspert
30. juli 2015 - 22:01 #9
I desktop versionen skal man ikke zoome, eller på andre enheder ej heller.
Men det er rigtigt at man hvis man vil se HELE siden på en Phone, skal zoome ud. Men det er jo der at man blot scroller rundt på skærmen, og stadig har læsbarheden.

Ellers ser jeg ikke andre "mirakel" løsninger for at kunne overskue en hel side på en Phone eller tablet, uden at lave dem til en sådan.

Det er jo én af årsagerne til, at millionvis af sider rundt i verden, pludselig er røget nedad på Googles indeks lister, netop fordi de ikke var læsbare på Mobile enheder.
Avatar billede keysersoze Guru
30. juli 2015 - 23:03 #10
Samme svar som #1.

Hvis du har noget, der ikke kan skaleres ned til ~320 har du et problem - men mon ikke det meste kan lade sig gøre? Hvis det omhandler fx billeder kan de jo bare formindskes enten via css eller nedskalering på serveren - og gælder det fx tabeller vil det formentlig være den kedelige løsning, nemlig at pakke det ind i en div hvilket kan give en scrollbar.

Hvis du tager udgangspunkt i et responsivt framework, fx bootstrap, kan du se hvordan de har klaret de mest gængse udfordringer og så kan du lade dig inspirere ud fra det.

Uden at have set noget kode vil mit gæt være, at det letteste vil være at omskrive siden - kode, der ikke allerede tager højde for at være responsiv er højst sandsynligt ikke godt nok til at blive responsiv.
Avatar billede EveryMA Mester
02. august 2015 - 23:07 #11
Beklager sene svar.

Tak for hjælpen, input og idéer.

ebea din metode rammer ikke googles vilkår inden for mobilvenlighed og derfor er den ikke holdbar og kan ikke bruges, men tak for dine input og du har nok ret mht. at omskrive koden.

det samme med keysersoze. siden er på ingen måde optimeret til at kunne skrives responsiv. det kedelig er bare, at min css fil er flere kilometer lang og der ligger et halvt års arbejde med at skrive det hele om. virkelig øv!
Avatar billede ebea Ekspert
02. august 2015 - 23:19 #12
EveryMA  -  jeg ved ikke helt hvor du har infoen om, at den Meta tag linje jeg viste, ikke skulle opfylde Googles krav.
Det er netop Google selv som anbefaler brug af denne, da den opsætter sider  til at opfylde læsbarheden i Mobile enheder.

Og det virker hos mig, og i millionvis af andre websider.
Avatar billede EveryMA Mester
03. august 2015 - 08:57 #13
Du misforstår ... .

den meta linje du leverede sørger korrekt nok for det som du skriver, men når hjemmesiden ikke er mobilvenlig, så kommer du ikke langt med det stykke kode.

google vil fx ha trykbare elementer med mellemrum (på desktop, set på mobil er de tæt på hinanden) og større skrifttype så det kan læses, skrifttypen vil jo stadig være den samme selvom du som standard har zoomet brugeren helt ind på designet :)

et zoom ud og teksten er umulig at læse :)
Avatar billede keysersoze Guru
03. august 2015 - 09:37 #14
"Jeg skriver for at høre om det er muligt at gøre den responsiv uden at skulle bygge det HELE om."

"Siden er på ingen måde optimeret til at kunne skrives responsiv."

Hvis du allerede ved det hvorfor så spørge? ;)

Der findes ingen mirakelkure - hvis siden ikke kan gøres responsiv ved at udvidde den med mediaqueries/ekstra css så er en omskrivning eneste vej frem. Hvis din vurdering er at det vil tage et halvt år at skrive om så må det vurderes op imod om besøgstallet/indtægten og andelen af mobilbesøg er operationen værd.
Avatar billede EveryMA Mester
03. august 2015 - 12:13 #15
Græsset er grønt. Jeg ved jo godt at det er en vurderingssag, det har jeg allerede lagt en plan for og derfor kom jeg herind fordi det ER nødvendigt med en mobil side : - ))

men designet blev i sin tid designet uden tanke på mobilvenligheden og derfor ville jeg høre om nogen havde en idé til hvordan det ville være lettest at gribe det an. Jeg har på intet tidspunkt skrevet om en mirakelkur...

som jeg skrev:
"Det er et forholdvist stort site >>så før jeg går igang med et langtidstrukket projekt ville jeg lige høre om man kan gøre noget.<<"
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester