Jag har funderat en hel del på responsiv design på sistone. Dels för att det är vad Emanuel hade kallat “en snackis” i webbdesignkretsar, och dels för att det ofta är ett trasigt genomförande som erbjuds.
Problemen är egentligen bara i renderingen av webbplatsen för mobila enheter, och de inkluderar (men består säkerligen inte enbart av):
- inläsning av onödigt stora stilmallar
- bruk av bilder med storlekar anpassade för stora skärmar
- inläsning av på tok för mycket HMTL-kod
Det här är ett problem därför att mobila enheter oftast dras med dyrare trafik och lägre hastigheter. Idag är det inte många som reagerar på att en bild i en bloggpost är 75 kB stor (jag ryser), men det är mindre kul om du är utomlands och betalar 50 kr/MB. Tycka vad man tycka vill om kostnaderna samt inte minst begränsningar för mobil trafik i Sverige, men det finns platser där det är värre. Kanske är det därför storleken på webbplatserna glöms bort.
Eller: läs inte in en fullskalig webbplats, göm element med CSS, och kalla det senare en “mobilversion”.
Lösningen är att utgå från den minsta gemensamma nämnaren, vilket antagligen betyder typsnitt, färger, länkar och liknande. Efter det kollar man vad det är för typ av enhet, och väljer rätt stilmallar efter det. På så sätt läser man inte in onödigt mycket kod bara för att inte använda merparten av det.
Att designa responsivt är intressant, faktiskt så intressant att jag tänkte se vad jag kan göra med den kommande nya versionen av TDH.se (och TDH.me). Jag får med andra ord anledning att återkomma i ärendet, men så länge: läs inte in onödigt mycket kod och göm den med display:hidden;
, det är definitivt inte den bästa lösningen.