[jonssondesign]

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?

[P3N]

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

[P3N]

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 )

[P3N]

Två tips till till mobilen (kommer på efterhand här ):

<meta name='viewport' content='user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0'/>

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

[jonssondesign]

Tack tack! Ska kolla detta direkt!

[jonssondesign]

<meta name='viewport' content='user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0'/>

gjorde susen! Tack!

[niklas_SWED]

Ä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?

[Conny Westh]

Jag tycker responsive design är en självklarhet!

[danjel]

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

[Syke]

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