Responsive webdesign
 

Hej!,

Jag sitter och försöker lära mig lite responsiv webdesign. Har gjort denna sida i testsyfte:

http://bywatt.com/pre-view/

Som ni ser så ser det okej ut när man förminskar webbläsarens storlek, och även när man går in på hemsidor som testar hemsidan i flera upplösningar.

Däremot så händer ingenting när man går in på hemsidan visa mobilen.. sidan som visas är den layout som är utvecklad för upplösningar över 978px..

Någon som vet hur detta kommer sig?

Borde du inte lägga reglerna så att om webbläsaren är mindre än vad layouten kräver så skall den byta till en mindre?
Som det är nu så byter regeln till den mindre layouten bara när ytan är liten nog för att den layouten precis skall passa. När den egentligen behöver byta till en mindre layout när det inte finns plats längre. Designen nu släpar efter så att säga och blir då för stor.
Vad gäller mobilen, prova att byta ut "@media (max-width: 320px)" till "@media screen and (max-width: 320px)". (Källa: http://stackoverflow.com/questions/8...-media-queries).

Ett tips till. För att få layouten att flyta på i mellan de olika upplösningarna använd både width och max-width (procent värde på max-width). Så flyter layouten på i mellan de olika upplösningarna/reglerna också. (Källa: http://webdesignerwall.com/tutorials...ponsive-design) (detta lär ju lösa problemet med eftersläpningen ovan :) )

Två tips till till mobilen (kommer på efterhand här :) ):
Det gör så att sidan inte visas i full size utan efter skärmens storlek.

Samt att om du sätter overflow: hidden; på wrappern så slipper man att sidan kan röra sig i sidled (testat på iPhone bara).

Tack tack! Ska kolla detta direkt!

gjorde susen! Tack!

Är Responsive webdesign något man bör börja jobba med och ha som regel på alla sina hemsidor man gör idag för att anpassa sidan till olika webbläsare och enheter? Eller finns det andra alternativ?

Tips på någon bra guide på nätet som man kan följa och ta efter isåfall?

Jag tycker responsive design är en självklarhet!

Om man med responsive design menar att man ska få en hyfsat avancerad layout/site att funka på mobil såväl som vanliga skärmar kan det bli rätt komplext. dvs hur ska man hantera layout/ innehåll i flera kolumner, bildstorlek m.m. Samt att saker som javascripts "onmouseover" ju inte är applicerbart på mobiler medans tex "swipe events" är det.
Generellt kan det därför vara bra att överväga att göra en separat mobil site

Meningen med en responsive design är inte att "sidan ska fungera i mobiler", det handlar om mer än så.

Responsive design syftar till att ge användarna en så bra upplevelse som möjligt oavsett vilken enhet de surfar in på. Mobiltelefoner, tablets av olika storlekar, vanliga skärmar, tv-apparater eller kylskåp (eller vad nu framtiden kan ha i sitt sköte). Responsive design handlar om att inte göra några antaganden om vad användaren har för behov eller använder för enhet eller i vilken kontext de sitter.

Vi har egentligen aldrig kunnat göra antaganden om upplösning, uppkoppling eller användarbehov tidigare heller, vi har bara kommit undan med det eftersom alla har haft hyfsat lika förutsättningar (dator vid ett skrivbord med en uppkoppling och en skärmupplösning som sakta har ökat i takt med teknikutvecklingen). Dessa antaganden har däremot mosats med intåget av smartphones. Det är dock lika fel att börja göra antaganden att folk sitter vid en desktop eller en smartphone. Därför anser jag att en separat mobilsite är lika fel som att koda en fast layout för 960px bredd. Oavsett vad herr Nielsen säger ;)

Nä, skapa layouter som är flexibla och har brytpunkter där innehållet börjar se konstigt ut, inte där pixelgränser för en viss enhet finns för de ändras hela tiden. Gör inga antaganden om användarna utan se till att alltid servera viktigt, relevant innehåll med så få kb som möjligt, testa efter vilka funktioner som stöds hos besökarens webbläsare istället för att försöka gissa och ha inga förutfattade meningar om användarna så får du en site som håller för det mesta i framtiden.

Det tar definitivt längre tid att utveckla en responsive site, men hur lång tid tar det inte att utveckla separata siter för flera olika enheter? Och har du gjort en ordentlig responsive site behöver du inte skapa nya layouter så fort det kommer en ny enhet med en udda upplösning (hej iPad Mini!).

Några intressanta artiklar:
A Dao of Webdesign (en artikel från 2000(!) som var lite före sin tid..) - http://www.alistapart.com/articles/dao/
Responsive Web Design - http://www.alistapart.com/articles/r...ve-web-design/
http://www.designbyfront.com/workinp...ponsive-design
http://readwrite.com/2011/09/14/how-...lobe-pulled-of

Några intressanta böcker:
Mobile First - http://www.abookapart.com/products/mobile-first
Responsive Web Design - http://www.abookapart.com/products/r...ive-web-design
Adaptive Web Design - http://easy-readers.net/books/adaptive-web-design/

Det var mina $0.02 .. och nu har ni att läsa :)

Det här med att ha en separat mobil site är ju inte alltid fel. Ett exempel är SJ där man vill ha så enkel sökning och navigering som möjligt för mobila enheter. Typfallet för en mobil användare här är ju inte information om organisationen utan just att söka/boka resa eller få information om tidtabeller m.m

Jag håller inte med. Varför skulle inte en desktopanvändare vilja ha en så enkel sökning och navigering som möjligt också? Och hur kan man veta att en mobil användare inte vill ha information om organisationen? Var går gränsen för en mobil användare? En smartphone? En Samsung Galaxy Note? En ipad mini? Google Nexus 7? Vanlig ipad?

Vet man att personen precis ska ut och åka tåg eller om han/hon sitter hemma i soffan med telefonen för att man inte längre orkar plocka fram den bärbara eller gå och sätta sig vid ett skrivbord?

Det är just dessa antaganden som jag tycker är så lustiga och fel. Beteendet ändras hela tiden och man kan inte göra antaganden. Jag behöver bara se till mitt eget surfande på mobiltelefon / ipad, det är ganska ofta jag hamnar på mobilsiter som inte erbjuder samma innehåll som desktopsiten och det är just det saknade innehållet jag söker. Otroligt frustrerande!

Då är det väl bättre att försöka göra en så lättnavigerad och innehållseffektiv sida så att den fungerar för alla, oavsett enhet eller kontext.

Varför ska desktopanvändare "straffas" med att ladda ner massa innehåll i onödan. Är det inte viktigt nog för att finnas i en mobiltelefon lär det inte vara viktigt nog för att finnas på en desktopsite heller.

Med det sagt finns det ju så klart undantag. Gallerier, filmsidor, spelsidor och andra "poster"-designer lämpar sig inte alltid för enheter med små skärmar och låg bandbredd men det känns som en helt annan diskussion.

Ja men..de har ju gjort antagandet att användningsområdet för mobila användare skiljer sig från desktop användare, sen kan jag hålla med om det du skriver att den analysen ibland är fel i ett specifikt fall.
Hur som , mobilt är inte bara en mindre skärmstorlek , det är ett beteende. Man använder inte mobilen på samma sätt som PC:n.
Om målet är 100% mobilanpassad kan även content ändras, inte bara design och navigering. Man är t.ex inte lika tålmodig att leta runt på en site med en mobil i samma utsträckning som desktop på PC eller tablet.

Listar upp vad jag tycker är relevant om man ska göra ett vägval vid lansering av en mobil upplevelse

Responsiv
+ enklare uppdatering av innehåll/information
+ SEO
- laddtid kan ofta bli sämre eftersom statiskt innehåll som bilder m.m inte kan minimieras
- endast smartphones, ej äldre mobiler


Mobile
+ Typiska "mobila behov", vägbeskrivningar, app nedladdningar m.m
+ Enklare använda mobilspecifika saker som swipe-events
- Svårare uppdatera innehåll
- Kostar mer

I min åsikt är Responsiv bäst om det handlar om relativt enkla informationssidor, tex företags sidor eller bloggar.
Medans mobilsite lämpar sig just för mobila användningsområden eller där det blir för komplext att göra en responsiv variant av sidan,
tänker t.ex på aftonbladet.se som åtminstone inte jag skulle välja att göra responsiv.
En fråga är väl även ur vilket perspektiv man ser det ur, är det ROI eller användarupplevelsen ?

Håller med!

Här är en sida med några nyttiga länkar rörande responsive design:
http://www.hotscripts.com/blog/start...ve-web-design/

Det är lite synd att många fått för sig att det går snabbare att skapa en optimal mobil-sida med responsive istället för att göra en separat sajt.

I själva verket är det inte sällan tvärtom om man ska göra det bra genom att:
- Begränsa långsamma interaktionssätt (att skriva)
- Begränsa bandbredd och antal request väldigt snävt (mobila enheter har allt som oftast 300-500% straff på både bandbredd och svarstider)
- Tillgodose ett annorlunda användarbehov direkt på första skärmytan. För det mesta mer tidsspecifikt och mer "akut".
- Tvunget stödja interaktions-möjligheterna på huvudsajten på en övervägande majoritet av mobila enheter, OS och webbläsare. Att kunna förenkla här sparar ofta mycket tid. Ibland finns det dessutom inget likvärdigt stöd på dessa enheter varför funktionen helt måste göras om. Det går att styra med javascript och media queries ... om man vill göra det jobbigt för sig.
- Osv osv. Finns många fler exempel.

För all del - responsive web design är bra för alla sidor för enheter som inte utgör en större del av besökarna, är för många för att överblicka eller där man inte kan göra något antagande eller undersökning av användarbeteendet. Men när man faktiskt analyserat eller läst på om faktiskt användande och sett det som en viktig kanal för sajten - då är det för det mesta ett desto mer komplicerat och tidsödande projekt att skapa en optimal upplevelse med responsive.

Vi får nog "agree to disagree". :)

Jag tror att det inte bara finns "mobila" och "pc-användare". Det finns så otroligt många däremellan och interpolationer mellan beteenden att man inte kan säga att "den här lilla gruppen av alla ska få den här upplevelsen, resten får den här". Gör man skillnaden på en mobil web och en vanlig web gör man ju en hel skräll med antaganden om besökarna som ständigt ändras.

Att man inte är lika tålmodig att leta information på en mobil site som en vanlig site ser jag som ett bakvänt argument. Jag är återigen tillbaka vid att om det inte är viktigt, relevant eller enkelt nog för en mobilsite, varför ska alla andra enheter / kontext acceptera en sämre upplevelse och straffas bara för att den som skapat siten gjort massa antaganden och tycker att sitter man vid en dator har man minsann tid att sålla och leta?

Hur kan man göra antaganden att ett mobilt beteende är annorlunda? Vad är ett mobilt beteende? När man sitter på bussen? När man är ute och går? När man står i hallen hemma? När man sitter i soffan? Alla fall när man inte sitter vid ett skrivbord? När man sitter på ett flyg i 8h? När man har touchstöd? Hur räknas en bärbar mac med touchskärm? Vad händer den dagen alla datorer får touchskärmar som interface?

Jag menar på att gränsen mellan mobil användare och "vanlig" användare är så suddig att man inte kan eller bör placera användarna i såna fack. Satsa istället på att ge en optimal upplevelse för alla. Hur kan man bestämma vilka som ska hamna på vilken site?

Jag skulle gärna se aftonbladet och t.ex. DN som responsiva, avskyr deras mobilsiter och tycker desktopsiten är på tok för jobbig i min iphone. Tänk om DN kunde göra som Boston Globe (http://bostonglobe.com/)!

Hur vet man vid en analys att användarna bara vill göra de snabbaste och enklaste sakerna via t.ex. en smartphone? Det kan ju lika gärna vara en konsekvens av att det är en sämre upplevelse att besöka siter med mobiler.

Precis på samma sätt som du kan göra liknande analyser av vanliga sajter. Man tittar på vad besökarna klickar på, man gör ab-tester för att se förändringar i beteende osv. Vänder mobil-besökarna i dörren kan det finnas anledning att fundera på vad man skapat för elände för dom. Interagerar de med helt andra delar av webbsajten som inte är lättare att komma åt är det svårt att dra en annan slutsats än att de har ett annat behov?

Du kan likna det med att göra en analys av användarbeteende när man märkt att 25% av ens besökare är tyskar. Är 75% av skärmytan då täckt med saker som tyskarna inte interagerar med så kan det finnas en väldigt stark anledning av optimera upplevelsen.

Men då missar du ju de användare som inte går in på siten via mobilen för att den ger en sån dålig upplevelse, no?

Ja, om du gör någon form av trafikanalys på din sajt så missar du de där miljarderna som inte besöker din sajt.

Bra argumenterat, där dödade du all diskussion :)

Jag menar att om du testar och analyserar befintlig trafik så säger det ju inget om vad användarna saknar, inte hittar eller om de inte går in alls på siten via mobilen eftersom de inte tror / tycker att det ger en bra upplevelse.

Hur delar du in användarna i dessa fack? Kikar du på upplösning? Enhet? Browser? OS? Var drar du gränsen för vilka som får hamna på den mobila siten?

Jag tycker det är farligt att skapa den uppdelningen. Vi borde inte prata om en "mobil webb" och en "vanlig webb", det borde handla om en web. Punkt. Oavsett enhet eller kontext. Allt annat är farligt och kommer att låsa in oss i framtiden.

Vill du ha en extremt välpolerad upplevelse för en specifik enhet - gör en app.

Där har du en bra utgångspunkt. Som leder fram till 2 andra faktorer:

1.) Resurser. Att skapa en hyfsat polerad mobil-sajt istället för en app kräver mindre spetskompetens, är lättare att underhålla och kräver mindre planering eftersom du säkert kan göra kontinuerligt förbättringsarbete som går ut direkt.
2.) Om du har väldigt mycket trafik från vissa typer av mobila enheter - kan du räkna med att de laddar ner din applikation bara du pushar för den eller kommer du alltid att ha en betydande andel som inte vill ladda ner den? I min mening så gäller ALLTID det senare. Du kommer aldrig få 99% nedladdnings-andel - oavsett hur bra din app är. Med betydande trafik till sajten från vissa typer av annorlunda enheter blir det då per automatik nödvändigt att skapa en bra polerad användarupplevelse för detta. Ska det göras bra och omfattande är oftast en mobil-sajt optimalt för både ROI och användarupplevelse.

Att analysera existerande trafik är lättast men säger inte allt givetvis. Men prio #1 för förbättringsarbete av din sajt borde alltid vara att ta hand om de besökarna du har. Har du ingen betydande trafik måste du gissa dig fram eller göra andra typer av undersökningar. Men har du trafik har du en besökarbas där du kan göra riktiga och betydande analyser. I dessa tider har du också, med största sannolikhet, en betydande andel besökare från tablets och telefoner som du faktiskt kan analysera och få fram hårda beteende-data av. Även om de vänder efter första requesten så har du något att utgå ifrån och testa dig fram att förbättra. Du kan testa responsive ... du kan testa mobil-sajt ... du kan testa konvertering i app-downloads. Se till att fånga upp relevant interaktions-statistik så ser du exakt hur mycket det hjälper för att öka konverteringar, time spent eller återkommande besökare.

Sedan kanske du kan börja förbättra upplevelsen för kylskåps-browsers som du inte ens kan analysera (överdrift, men jag hoppas poängen går fram).

Om 5 år kanske du behöver optimera för TV-apparater också. Men i nuläget finns 3 typer av viktiga enheter för att täcka marknaden för de flesta sajter - mobil, tablet och dator. För anpassade sajter kan responsive fortfarande vara väldgt väldigt nyttigt. T ex för att säkra effektiv layout mellan olika upplösningar. Men när man får andra typer av input, väldigt annorlunda hårdvaru-kapacitet, annat användarbeteende osv osv att ta hänsyn till på samma gång - då blir responsive väldigt tidsödande och komplicerat med väldigt mycket javascript-hantering.

Rent specifikt kan man ju kolla user-agent mot Wurfl databas eller motsvarande lösning för att identifiera requesten som "mobil".
En lösning som är ganska praktisk är att om man tror att requesten är en mobil dito så visar man en länk till mobilsiten på desktop siten. Denna desktop site kan ju mycket väl vara responsiv i sin helhet men för att ytterligare förbättra mobila användares upplevelse så finns en mobil variant som ett alternativ.

Jag håller annars med dig ut ett "teoretiskt" perspektiv.
I normalfallet skulle jag själv göra egna webbar med ett responsive "mobile first" angreppssätt. Dvs layouten m.m optimerat för låga skärmupplösningar för att få rena, enkla gränssnitt. Och där man eventuellt lägger på max 1 style / funktion för skärmupplösningar större än 500 pixlar eller nåt..

Dock i "praktiken" med projekt med många möjliga funktionella/design krav skulle jag göra en separat mobilsite bl.a för att underhåll tenderar att bli för komplext och för att det är svårt att optimera laddtider för statiska resurser

Men indelningen rent praktiskt, hur går den till? Vad räknas som en mobil användare i dagens läge? Är det allt annat än stationär dator? Eller är det bara smartphones? Jag undrar mest bara hur ni resonerar i frågan.. Själv har jag otroligt svårt att komma på var jag skulle kunna tänkas dra linjen mellan mobila användare och övriga.

Personligen tycker jag det verkar jobbigare att underhålla flera olika siter än en som fungerar i alla enheter. Om man alltid optimerar resurser och tänker content first lär man inte ha några prestandaproblem oavsett enhet.

Designkrav må man ha, men här har vi ju haft ett ganska felaktigt tänk genom åren. Någon gång för länge sedan slutade man tänka på webben som det flexibla media den är och istället började man tänka på den som ett tryckt media där designen är statisk och man ville ha pixelperfekta siter utefter skisser.

Jag anser att appar är till för speciella upplevelser i specifika enheter, tänk istället för kampanjsiter eller något med ett extremt smalt användningsområde och att användarna sedan kan skickas till den responsiva siten från appen.

Ok, om du pratar om väldigt smala användningsområden, t.ex. kampanjsiter etc. så kan jag gå med på att det är smidigare än att göra en app, men du får fortfarande långt ifrån den mjuka och välpolerade upplevelsen i en mobilsajt vs. app.

Jag förstår vad du menar, men blir inte det här tänket lite bakvänt? Att göra en site som riktar sig mot en viss typ av enhet och ett visst typ av beteende och sedan behöva ändra denna site allt eftersom det kommer nya enheter eller beteenden och samtidigt utveckla och underhålla en hel site som ska fungera för alla andra enheter (enheter som närmar sig varandra allt mer) måste ju kosta mer än att underhålla en site som fungerar i alla enheter? Dessutom kanske det kommer ytterligare en ny, häftig enhet som du måste utveckla ytterligare en separat site för... då har du helt plötsligt tre separata siter att underhålla.

Vad gör du när det kommer touch på stationära datorer t.ex.? Då kommer du ju ändå att behöva implementera det stödet på samma sätt som du gjort på mobilsiten.

Om man alltid tänker content first och optimerar sidan för att ladda så snabbt som möjligt och använder sig av feature detection för ex. touchstöd spelar det inte någon roll vilken enhet besökaren kommer in på.

Oj var många som skrev i denna tråden jag skapade... Nu är det så att över 30% använder mobilen vid besök av min sajt, vad bör jag göra för att behålla besökarna bäst? i dagsläget så är inte min sajt optimal för mobiltelefoner, eller det blir ett jäkla scrollande hit- och dit... bör jag skapa en subdomän för mobila enheter?

Ser ut som om nån annan skapade tråden... aja.

Hur du skall göra beror ju helt på resurser och hur mycket jobb man vill lägga ner. Är sidan hyfsat uppbyggd kan det ju räcka att göra olika css regler beroende på upplösning hos klienten. Men som sagt beror ju helt på hur sidan i sig är uppbyggd. Har du något exempel?

Själv tycker jag att responsiv design är en självklarhet nu för tiden.

Däremot förutsätter det att man gjort det ordentligt och riktigt bra. Man vill, som ni säger, inte tappa väsentligt innehåll och även hålla designen snygg.

Det skall bli spännande att se hur det utvecklar sig. Det verkar hittills inte vara speciellt brett utspritt.

Säger du inte emot dig själv nu? Det är en självklarhet men inte särskilt utbrett? :)

Hur tänkte du nu? Det gör jag väl inte alls?

Jag anser att det är en självklarhet att man bör bygga sin webbplats i responsiv design.

Men tyvärr verkar det inte vara alltför utbrett ännu.