Låt oss prata responsiva hemsidor anpassade för mobiler. Webbdesign-snack

Intressant tråd. Kommer följas!

Jag använder sällan mobilvarianten av hemsidor. Tyvärr finns det oftast bara två lägen - "Desktop" och "Device" där device känns optimerat för skärmar ganska långt sub-HD-upplösningar. Vissa, enklare sidor gör sig dock bättre med en enkel design. Beror nog mycket på innehållsmängden.

samma problem i många androidwebbläsare,
HTCs egna har sedan den första jag använda löst det där jäkligt bra med textstorlek beroende på inzoomning, spaltbredden på en desktopsida är alltid anpassad efter mobilens inzoomning, jag har textstorleken inställd på den minsta, hence att den är ganska liten, bilden går att zooma in på, och texten är fortfarande rättformaterad utefter skärmens bredd.

den där "featuren" gör att mobila responsiva hemsidor mest är ivägen, man kan faktiskt inte zooma ut och få till sin översikt.
pratas mycket om mobile-first, desktop-first, och responsiv-webb, buzzwords bland många som inte tänkt igenom det.
ingen känga åt eventuella webbdesigners, men när man dyker på en IT-ansvarig medelålders person som har hört att det där med responsivt är något man ska ha, för det är hippt. skjut mig.

nae, jag syftade verkligen inte att det är fel med mobile-first, eller RWD eller it-ansvariga heller för den delen.

menade mer på när något blir mode, och man hakar på för att man har hört att det är vad man ska göra, när man som okunnig gör kravspecar som gör att skattepengar slängs i sjön, totala meningslösheter, men man kan ju åtminstone skryta om att man har allt det däringa nya som amakedikerna pratar om.

När jag pratade om sådana It-ansvariga menar jag mer åt den 55åriga lärare jag hade som var it-ansvarig, hon ÄLSKADE buzzwords, framtidens klassrum var det tydligen, en projektor, ett klassrum, (hennes) och powerpointslides med pianomusik, samt fyra halvsunkiga pc-datorer med gratismjukvara längs kanten, och det här för 4 år sedan.
"framtidens klassrum med möjlighet till nya interaktionsmönster i en flexibel miljö." jotjena.
--

www.sverigesradio.se Stuvar om ganska rejält beroende på upplösning men inget försvinner, den är däremot för smal i maxbredd för att vara optimal när man har 2560 pixlar i bredd, hade den även anpassat sig åt det hållet typ ett tidningsuppslag med spalter hade den varit ännu bättre, nu ger den ju bara bild på ca 1/3 av ytan den tar upp i fullskärmsläge, jag hade alltså gärna sett optimeringar även för bredare sidor.

Visa innehåll

Dold text

hmm, enda gångerna jag dyker på en responsiv sida där jag märker av responsiviteten är på en mobil, och där är det i princip alltid samma sak som stör, alldeles för inzoomat, men då surfar jag inte som "normalt folk"

till TS
användbarhet och reaktion på en hemsida, är ju helt beroende av vad man vill ha ut av den.
IF's mobilsida var guld, och den är en renodlad mobilsida av variant år 2005 typ. men då skulle jag å andra sidan bara ha ett nummer.
en responsiv sida är ju många gånger anpassad till hur man antas "ska kolla på sidan", när designern vet bättre än besökaren.
ibland stämmer det, ibland inte, ge oss ett fem-tiotal responsiva sidor, och be oss spalta upp tankar kring dem, 1 från dator, 2 från mobil, och varför inte med en uppgift att få fram? eller strider det mot vad du är ute efter?

Det är otroligt viktigt att skilja på "Mobilt tema", "Desktop tema" mot "Responsiv design".

Responsiv design betyder ju att sidan flytande anpassar sig efter skärmens storlek för att maximera användbarheten oavsett vilken storlek man använder. Det är väldigt svårt att bygga designen efter 2560x1440 då textfält inte får vara för breda, utan för att utnyttja hela sidan så knuffar man ytterligare kolumner, reklam eller liknande till sidorna istället för att stapla dem.

Det är inte så hemskt svårt, men det är sällan man har en sida med innehåll som är lämpat att behandlas på det sättet - Ta en tidning till exempel, även om det är en enkel match att lista fler kolumner med nyheter är det ju inte speciellt användarvänligt, utan det är lättare att bara läsa uppifrån och ned i en huvudkolumn.

Visst, det finns ju undantag, men widescreen är klurigt när det kommer till text - Bilder, produkter, webshoppar och liknande är en annan femma dock.

Responsiv design betyder ju inte att man ska ta bort funktionalitet när man besöker sidan med en apparat som har en liten skärm, det betyder ju bara att innehållet paketeras om för att göra det läs- och användbarare trots skärmens begränsningar.

Det enda som är riktigt svårt att presentera i mobilvy är tabeller med data (också svårt i wide-view, se ovan om texts läsbarhet).

Ett snabbt exempel på hur "Sweclockers" kunde varit responsiv:

Om man minskar bredden på sidan, kommer kolumnen till vänster om brödtexten ta upp oproportionerligt stor plats, den hade då kunnat lägga sig som en rad ovanför brödtexten istället och TADA, som med magi är det trevligare att läsa på en surfplatta i stående läge.

Skatteverket har nyss gjort om sin hemsida till responsiv och lyckats riktigt bra. All information finns, fast lättare att använda och lättare att läsa på en liten apparat.

Wikipedia är ju inte responsiv utan hårdkodad, det är ju därför problemet uppstår när du har telefonen i landskapsläge. Det har ingenting med Windows Phone att göra, det är dålig markup på wikipedia. Responsiv layout har ju inte egentligen någon "desktop" version eller "mobil version", man har en version som justerar beroende på skärmens storlek.

En tryckt tidning har ju spalter så man läser ju hela "sidbredden" även om texten går uppifrån och ner i smalare segment som är mer anpassade för hur synen fungerar. Det borde vara så att man läser tex 3 "spalter" på en webbsida innan man scrollar ner så man utnyttjar bredden och samtidigt slipper mycket scrollande, har man en smalare skärm lägger man spalterna under varandra, jag tycker att man utnyttjar breda skärmar dåligt i många fall eftersom det ofta är mer än halva skärmen som är tom.
Ibland vill man inte ha fler olika sidor uppe utan man vill de mer av det man läser, speciellt när det handlar om instruktioner/manualer och liknande. däremot kan det ju ofta bli svårläst om man har "fullbredd" på texten med en bred monitor, så gärna automatiskt fler "spalter" när man har många pixlar i bredd.

Absolut, men ofta vill man locka läsaren att "läsa mer" och det gör man med rubrikerna och deras placering. Det blir inte bara optimering av skärmytan som blir aktuell, utan det måste även tävla med produktplaceringar, reklam och marknadsföringstekniker.

Man VILL ju att du ska måste scrolla förbi reklambannern, och man vill att den ska vara på ett särskilt ställe i en särskild kontext. Annars blir det som i vissa mindre nogräknade tidningar där reklam för ljusstakar hamnar bredvid en artikel om villor som brinner ner i juletid på grund av levande ljus.

Det är ju tekniskt mycket enkelt att stapla kolumner, men man vill styra ögonens rörelse över sidan samt begränsa vad det är för information man tar in vid varje given tidpunkt. - Att löpande scrolla nedåt (eller åt sidan) är ett "bra" sätt att begränsa informationsmängden.

Man ser ju ofta "plottriga" sidor där det är för mycket små boxar och lådor och annat skräp som skapar en form av brus som inte går att ta till sig. Det är svårt att se en tredje kolumn med samma blick som läser sista orden i en rad (om man läser ord för ord och inte hela raden på en gång).

Et cetera, et cetera.

Men absolut, massor av sidor är urusla på att utnyttja den extra bredden på ett bra sätt, men det kommer nog komma mer och mer, på samma sätt som fler och fler anpassar sig efter små skärmar. Om det hade kommit en bra branchstandard på att rapportera pixlar per centimeter skärm till webbläsaren hade livet varit betydligt enklare för webbutvecklare och bättre för användarna.

Mobilanpassad och responsiv är inte samma sak.

Vad baserar du den slutsatsen på? Jag skulle utan att blinka hävda den absoluta motsatsen, vi har analyserat behovet och åsikterna väldigt väl - det är ju en jättestor del av utvecklingsarbetet, iallafall om man arbetar enligt någon metod som ens liknar agil utveckling.

Sen säger det ju sig själv ganska automatiskt att en sida som är anpassad för att användas på en liten display kommer vara bättre på en liten skärm än en sida som är anpassad för att användas på en förhållandevis enorm skärm?

"Tycker du att de sex meter långa byxorna sitter bättre än de figursydda?"

Det största problemet med responsive är att designens komplexitet ökar exponentiellt i takt med att innehållet byggs ut. Det fungerar bra på sajter med enhetligt och strömlinjeformat innehåll, men så snart mer speciella behov kommer in i bilden blir det väldigt mycket att hålla reda på. Därför har åtminstone vi valt att satsa på att en gemensam sajt för större skärmar och en specialiserad version för mobiltelefoner, där behoven av särskilda anpassningar är som störst.

Jo, men det betyder att frågeställningen egentligen är:
"Tycker ni dåliga hemsidor är dåliga?".

Om man läser Andreas post ovan säger han ju att Sweclockers har valt att ha en specialiserad version för de tyckte det var för svårt att skapa och underhålla, inte för att han tycker det på något sätt skulle vara dåligt för användarupplevelsen att ha en responsiv design.

Hela frågeställningen är ju motsägelsefull. Om man skapar en hemsida, för att hemsidan skall funka så bra som möjligt och vara så trevlig som möjligt på en liten skärm, då kan ju det omöjligen vara en dålig sak? Man kan ju säkert misslyckas och göra ett dåligt jobb så att det blir ett dåligt resultat, men då är det ju för att man gjort ett dåligt jobb, inte för att man anpassat sidan efter storleken?

Din argumentation blir ju jättekonstig i mina ögon.

Om jag har byggt en sida för att den ska fungera bäst i 1920x1080 med en mus och tangentbord, då kan den ju omöjligen vara bättre på en skärm som är 5cm hög än om jag gjort mitt bästa för att bygga en site baserad på en 5cm hög skärm?

Åh, den här 10x10 meter plastmattan passar myyyycket bättre i mitt 2 kvadrats badrum än den plastmattan som är tillskuren i rätt storlek?

Om du ska göra det här som examensarbete måste du nog ställa upp premisserna ordentligt.

Till exempel så här:

Är en vanlig webbsida att föredra över en dåligt implementerad responsiv sida på en skärm under 6 tum och eller en standardupplösning på under 320 pixlars bredd.

Eller liknande.

Jag argumenterar inte med dig för att bråka eller vara elak, jag försöker bara förstå vad du menar, och kanske ge dig lite hjälp.

Det jag menar med komplexitet är att, beroende på hur långt man vill dra responsive-filosofin, har ett gäng olika states/lägen att hålla reda på som påverkar varje objekt (boxar, menyer etc.) i designen. För webbplatser likt SweClockers (med mycket och varierande innehåll) blir det enklare ur designsynpunkt att skapa två separata versioner av sajten än att försöka få allt att passa alla upplösningar från mobiltelefon till desktopdator.

Det har dock ingenting med innehållsbiten att göra. En särskild mobilsajt bör givetvis ge motsvarande funktionalitet som den fullstora versionen av webbplatsen. Google går att lösa genom att endast indexera den ena versionen av webbplatsen och länkarna fixas genom att läsa av user agent och omdirigera till respektive version av webbplatsen.

PS. Ta en titt på http://www.99mac.se , där vi använder responsive-design.