Bredden på väg bort?!
 

Hej,

Utvecklaren förväntas numer anpassa sina webbplatser efter kundens behov istället för tvärtom som tidigare. Sidorna skall kunna anpassas i allt från smartphones till 42" skärmar utan att gästen skall behöva göra ett dyft. Vem minns inte texten (som var vanlig för tio år sedan): "Sajten är anpassad för 1024 x 768 etc".

Nu till vad jag vill ha sagt... Är det inte så att bredden kommer försvinna helt och sajten kommer täcka kundens fönster oavsett hur stort det är ungefär som på: http://www.lexus.se/Images/LS_pdf_ac...612-803130.pdf

Ovanstående länk är bara ett (dåligt) grafiskt exempel och inte ett exempel på den tekniska lösningen. Jag vill bara ha något att illustrera med.

Personligen gissar jag att det kommer anses som "ålderdomligt" år 2020 att ha en bredd på sajten och en bakgrund som täcker resten. Ni som kan betydligt mer än mig om programmering har säkert en åsikt?!

Bredden på ett A4 blir aldrig omodern ;-)

Skämt åt sido, jag tror inte att bredder kommer att försvinna, och det har med våra ögon att göra - det kan helt enkelt inte vara hur brett som helst. Dessutom är det praktiskt med en fast bredd iom att hårdvaran är såpass olika.

Samtidigt måste jag säga emot mig själv lite, eftersom responsive-sidor faktiskt blir mer vanliga. Wikipedia verkar ju inte bry sig om att text är svårt att läsa om raderna är långa.

En adaptiv design behöver inte betyda att sidan måste ta upp hela skärmens bredd. Tycker personligen inte att sidan bör bli mycket bredare än 1024 px.

Kommer ihåg att jag gick en kurs i användarvänlighet och tillgänglighet för 5-6 år sedan och då var det inget snack om att en "flytande" design, som dom kallade det, är bäst ur tillgänglighetssynpunkt. Så konceptet som sådant är knappast nytt. Det är väl att kunderna/användarna som fått mer kompetens på området och börjat förvänta sig att designen ska lira i samtliga upplösningar.

Jag anser att det redan idag är ålderdomligt om man bara tänker i en upplösning. Även om det tar lite längre tid att få fram en bra adaptiv design kan man räkna hem det eftersom att fler kommer kunna ta del av din sajt på ett behagligt och effektivt sätt.

Jag tycker anpassad bredd kan vara bra många gånger, men då ska det finnas en maxbredd. Ta WP-temat TwentyEleven som exempel. Det minskar bredden när webbläsarens fönster görs smalare, men blir det tillräckligt brett så stannar det vid ca 1000px.

Att Wikipedia blir bredare i all oändlighet är något jag inte tycker om. Det stör läsbarheten av deras texter. De borde ha en liknande lösning med maxbredd.

Håller med dig, en text måste begränsas till bredden om man har någon som helst tanke på användarna. Ska jag läsa längre texter på Wikipedia eller andra sidor som inte tar hänsyn till detta så kopierar jag till anteckningar istället då det går snabbare att läsa på det viset.

Sedan har ett tema som TwentyEleven tvärtom problem med höjden. På många laptops ser man en header över större delen av skärmen vilket inte är särskilt lyckat det heller.

coredev,

Nja, fast om det bara är text/innehåll på en femtedel av pappret så...

Jag surfar både med en 27" iMac och med min mobil (alla ni gör väl motsvarande) och just i iMacen blir det ofta väldigt mycket bakgrund och väldigt lite innehåll, såvida man håller browsern stor.

Dock tycker jag mig se fler och fler sajter där storleken helt anpassas efter webbläsarens storlek. Ni om några vet ju vad jag menar. Jag är en teknisk idiot (beträffande detta) men det är väl HTML5 and CSS3 som kan användas i stort sett i det oändliga.

Här är några exempel på (ungefär) vad jag menar, även om det kan göras ännu mer avancerat. Minska och förstora webläsaren från 1900 ner till 240 px (smartphone):

1. http://teixido.co

2. http://robot-or-not.com

3. http://seesparkbox.com

4. http://3200tigres.wwf.fr

5. http://teegallery.com

Personligen är min plan att bygga om samtliga mina uråldriga (haha) webbplatser 2014 och då anpassa dem enligt motsvarande teknik ovan. Jag tror personligen att det är ett måste om 5-8 år.

tartareandesire,

Vi pratar nog om olika saker. Titta på texten i det första av mina exempel ovan (länkarna). Den förstoras och anpassas efter browsern och läsbarheten minskar aldrig.

Det är det jag menar, inte någon gammal 100%-vidd-lösning från nittotalet. ;-)

Det kallas för responsive design och är väldigt inne just nu. Jag måste nog dock erkänna att jag inte tror på det, för en vanlig användare är det helt ologiskt att sidan ändrar utseende beroende på vilken manick man använder för att se sidan med och hur stort webbläsarens fönster är. Så länge man lägger div:arna rätt så att mobilläsarna kan zooma smart så borde det inte finnas något behov för speciella sidor / lösningar för mobiler. Och personer som klarar av att göra en responsive design klarar med största sannolikhet om att lägga div:arna rätt. ;)
Personligen blir jag mycket frustrerad om jag kommer till en mobilanpassad sida när jag surfar med mobilen och jag är nog inte ensam.

Däremot finns ju problemet med riktigt stora skärmar kvar. Frågan är om inte Windows 7 delvis har lösningen på gåtan, jag märker att jag mer och mer drar fönster till höger och vänsterkanten så att de maximeras på halva skärmens bredd. På så sätt kan jag ha min IDE på ena sidan och webbläsaren på den andra, eller för all del en e-post klienten och en administrationspanel.

coredev,

Jo den termen (RWD) har jag ju snappat upp.

Jag håller med om en del, men inte allt. Eftersom det praktiskt är möjligt att få sidorna identiska, bara med större/mindre bilder text tycker jag idén som sådan är briljant, dock kommer den nog att finslipas, så text och bilder ändrar storlek utan denna "hackighet".

Kul att ni vill svara och ge respons!

Jo, snyggt är det onekligen men tror det passar bäst till ganska enkla sidor. Har man avancerade annonslösningar och dylikt så fungerar det sisådär.

Det där håller jag absolut inte med om. Jag blir betydligt mer irriterad om jag måste anstränga mig för att kunna nå alla delar av webbplatsen. Hellre då en prydlig, enklare mobilversion. Normalt vill jag bara ha snabb information via mobilen, vill jag surfa "på riktigt" använder jag datorn.

Spännande att man kan tycka så olika :-)

Vad jag stör mig mest på mobilsidor är nog:
1) Att mobilsidorna sällan erbjuder samma mängd information & funktioner som originalet
2) Att designen inte är samma, dvs jag måste börja om på nytt för att lära mig hur upplägget är, var jag hittar saker, etc.
3) Att mobilsidorna generellt är så dåligt testade med döda länkar, etc.
4) Att det inte finns någon klar gräns när man skall få upp mobilsidan vs. originalet. Från vilken skärmstorlek bör den riktiga sidan visas, 4", 5", 7"..? Skall jag få upp mobilsidan på läsplattan eller bara på mobilen?

En sak jag gillar är att både wikipedia och flera WP-teman erbjuder att komma ihåg ens val om man vill använda originalsidan istället för mobilsidan.

-- Ber om ursäkt om jag fortsätter OT-diskussionen, men tycker ämnet är så intressant :)

1) Då har man i min mening misslyckats fatalt med mobilanpassningen.
2) Här finns det en poäng, men sanningen är att det oftast blir betydligt enklare att navigera på sidan. Tänk på att många besökare inte varit inne på sidan tidigare också.
3) Responsive löser ju detta helt iom att det är samma gränssnitt bara att det är anpassat efter bredden på sin skärm.
4) Det gör det visst. Övergångarna kan du definiera med pixelexakthet med hjälp av media querys. Om du drar i webbläsarfönstret kan du bli rörigt, men enda gången layouten eventuellt kan ändras annars är om du växlar mellan landscape och portrait och det ger i min mening en helt ny dimension i webbsurfningsupplevelsen. T.ex. på paddan kan du få upp sidebaren om du kör landscape eller få en annan layout med större bilder.

Det "finns" inga mobilsidor med RWD. Det finns sidor som fungerar optimalt på flera skärmar.

1) En bra RWD har inte detta problemet. Vi lyfter i vissa fall bort stora bilder, men i övrigt är all funktionalitet på plats. Däremot förtydligar vi navigering (= gör ordentliga knappar så att du får plats med dina fingrar när du trycker), byter ut sliders till dropdowns (= svårt att använda en slider på en pekskärm, bra på en dator) etc.

2) Med mobilens automatiska omskalning vet man på förväg inte hur mobilversionen kommer att se ut. Gör man RWD på ett bra sätt gör man den så att den fungerar bra tillsammans med den vanliga designen, men anpassas på ett sätt som är lämpligt.

3) Som sagt, det finns inga mobilsidor med dåliga länkar om man använder RWD. Mobilsidan är den vanliga sidan som är mobilsidan som är samma sida som när du skriver ut den på papper.

4) Med risk för att bli tjatig, det finns ingen mobilsida :D

Jag var nog lite otydlig, i mitt senaste inlägg pratade jag om rena mobilsidor, ej responsive design. :D Jag håller med om att responsive design löser en del av dessa problem ganska så elegant. Som utvecklare tycker jag såklart det är spännande med responsive och har fått tillfälle att pröva på det på mitt dayjob, men som användare tycker jag att surfa på ursprungssidan är det allra enklaste och bästa :-)

Håller med dig helt och hållet. Tycker bara att det är irriterande att behöva lära sig sidan på nytt. Även om sidan bara använder sig av responsive design så är det många som kompromissar sidebars och liknande med display:none eller dylikt.

Om man håller sig till rimlig bredd på sektioner och texter så behövs inte något extra för att enkelt läsa och navigera en vanlig hemsida i mobilen.

RWD är bra, man får tänka på alla stackarna med iPhone som inte har alltför stor skärm, då är det bra att anpassa sin layout :)

Förr ville man ha så lite mobil som möjligt, nu hör jag återigen folk säga att de lämnade mobilen hemma för att den är så stor och klumpig att ta med sig :)

coredev, du gillar inte appar heller då?

Fast om man gör en bra mobilanpassad layout är det ju ytterst lite man måste lära sig och det går ju då på någon sekund att fatta vart allt finns. Värre är det ju om besökaren inte kan sidan och kommer in med mobilen och inte kan läsa vad som står i utzoomat läge och måste börja med att zooma in och därefter börja leta kors och tvärs för att hitta rätt sektion.
Det här är det nästan alla som inte gillar RWD säger, men det är nästan bara tekniker som håller på med webb som tycker så är min uppfattning. Detta bygger ju också på att man har vant sig med att hålla på och zooma in och ut för att kunna navigera sidor och läsa innehållet men det är ju långt ifrån optimalt.
Gömma innehåll helt bör man inte göra om det är något som tillför funktionalitet till sidan. Sidebars brukar hamna längst ned, men man kan lika gärna göra så att de hamnar högst upp innan huvudinnehållet om man vill det.

En av de största fördelarna är ju att man kan anpassa och degradera sidan så att den fungerar bättre på mobila enheter. En slider med små navgationspluppar får en ny navigation med tydligare och större knappar där man inte behöver sikta med fingret för att träffa rätt.

Sedan är det ju lite som tartareandesire är inne på att webbsidan ska fungera mer som en app om man kommer in med telefonen.

Hej,

Även tidningar börjar med RWD:

http://bostonglobe.com

Svt play kommer få sådan design, tycker det är smidigt. Dessutom färre plattformar för dom att uppdatera, i princip kan du ju fimpa sina appar.

http://beta.svtplay.se/

noshaj,

Såg den för ett par dagar sen. Bra exempel.

Du har ett par bra argument men problemet med RWD är att mycket av sidan ändrar inte storlek utan endast lägger sig vertikalt istället för horisontellt. Tycker inte det är någon större skillnad mellan att scrolla och zooma runt.

Har än idag inte sett någon sida som faktiskt blir mer lättnavigerad med en specialanpassad sida. Att bara kasta om material är i mitt tycke inget som är värt att lägga tid på. Om man istället använder en mobil sida för att ta bort sekundärt material som inte nödvändigtvis behövs för att navigera sidan så kan det underlätta något men många kommer sakna materialet som som är borttaget.

Kan tipsa om denna artikeln som berör mobila sidor: http://www.useit.com/alertbox/mobile-vs-full-sites.html

Det viktigaste att fixa är tex:

1. Navigeringen - att den ska vara enkel att "träffa" när man ska peka på en liten skärm.

2. Lightboxar - fungerar ofta dåligt på mobilskärmar.

3. Vid telefonens egna inbyggda anpassning, bilder som täcker hela skärmen så man inte "ser" sidan.

Bra argument, men jag förstod inte riktigt nr 3. Vore tacksam för en förklaring :-)

Det är framförallt problem med (dåliga) bildspel som inte riktigt skalas om på ett bra sätt i mobilen, och det kan ibland leda till att man får en (del) av en bild som täcker hela skärmen. I värsta fall är bilden dessutom länkad, så det blir av misstag lätt att klicka på den istället för att zooma.

En bättre lösning är förvisso att inte använda dåliga bildspelsscript :)
(Har ingen länk i huvudet nu på sajt där det fungerar dåligt, men jag kan se om jag hittar när jag är tillbaks på jobb)

Google verkar nu satsa stenhårt på RWD och de hoppas att fler hänger på!

http://www.idg.se/2.1085/1.446439/go...siv-webbdesign

Google är också kända för att ha usel validering och att snabbt lägga ner projekt när de tröttnat på dem.

Ja, det är förvisso sant. Men om Google tar en teknik eller ett koncept under sina vingar så finns det goda chanser för att det kommer slå igenom på bred front.

Det har redan slagit igenom på bred front, och det är en bra teknik. Läste en bra quote om det:
"Responsive design is the real deal. It is not a fad. It’s a legitimate attempt to address the massive challenge of delivering great experiences to this explosion of devices and browsers. But don’t feel like it’s the end-all be-all of website construction. This aint religion. This is web design." (http://bradfrostweb.com/blog/web/res...ing-the-point/)

Annars tycker jag följande artikel är bra i sitt resonemang och är för mig ett mycket bättre sätt att gå tillväga för tjänster som tål att bearbetas. Det bygger på good old device detection, men är lite mer pragmatisk i ingångsväg och ger ofta bättre resultat än bara media queries.
http://www.html5rocks.com/en/mobile/cross-device/

Sen är ju inte apparna på väg bort heller. Det finns inget bra sätt att använda samma menyer, tabbsystem, device interaction osv. över helt olika enheter.

Dessutom missar många att mobil-applikationer och desktop ofta kan användas helt olika trots att det är samma tjänst. Detta är också något som är väldigt olika mellan olika sajter. En webbshop kanske kan användas likvärdigt, medans en sport-resultat-sida kanske används mer som live-verktyg i mobilen och mer för överblick eller djupdykningar på datorn.

Som användare avskyr jag för det mesta mobilsiter.

Vet inte om det är för att de är dåliga eller om det är jag som är misstänksam. Men jag letar alltid snabbt upp länken för att visa "desktop mode". Känns som man missar massor annars.

Dessutom tycker jag inte det är svårt att navigera en vanlig webbsida på iPhone/iPad, om den är vettig i grunden.

Som utvecklare/siteägare förstår jag dock att man vill köra på responsiv design. Men tycker dock inte man ska ta det för långt. Det är väldigt hype:at nu med responsivt, kanske lite fär hype:at.

Att ha en bra design & struktur räcker rätt långt. Iaf för iPad som ju är framtagen för att vara en "helskärmsupplevelse" för webben.

Att släcka lite element och "zooma in" för iPhone kan jag förstå till fullo!

Men att ha en flytande layout som växer över 1000px känns bara fel. För breda spalter blit inte läsbart och folk med stora skärmar lär ju snarare njuta av lyxen att ha flera fönster i bredd än att ha en webbläsare uppragen på 30"

På byrån där jag jobbar är vi övertygade om att responsive kommer finnas kvar och utvecklas i många år framöver. Brukar bygga våra siter med Twitter bootstrap som grund, de har en responsive grid att utgå ifrån som börjar på 1200px och går ända ner till max 480px och lägre.

Målet är ju alltid att få med den viktigaste informationen så tidigt som möjligt på mobil-versionen av sidan, stora touchvänliga menyknappar samt plocka bort och bygga om alla funktioner med popup-fönster och liknande som inte fungerar perfekt på alla devices.

Jag personligen tror inte att bredden någonsin kommer försvinna, vi kommer inte orka läsa wikipedia i 2500px bredd och många av oss använder säkert bara halva skärmen för webbläsaren så det finns nästan ingen idé att bygga bredare än 1200-1280px enligt mig. Möjligtvis 1600px, men bredare behöver vi nog inte gå.

Ser fram emot hur vi kommer anpassa webbplatserna för mobila projektor-devices i framtiden. Hur kommer vi göra för att klicka på länkar där och liknande? Bara ögonrörelse? Hur som, tror fortfarande inte det är nödvänligt med bredare än 1600px.

+1
Jag har nästan exakt samma erfarenheter och åsikter.

På webbyrån jag jobbar på valde vi dock att satsa på Zurb Foundation istället för Bootstrap. Vi tyckte att Foundation hade lite cleanare kod och innehöll precis det vi behövde, medan Bootstrap har betydligt mer funktionalitet inbyggt och används av många fler(vilket i sig har många fördelar).
Det var ett svårt val, men det var till slut Foundation som drog det längsta strået.

Det här är intressant diskussion tycker jag och undrar om det finns några bra exempel på hur man just ska anpassa jämförelselistor till olika storlekar, dvs sidor som
http://www.prisjakt.nu/produkt.php?p=1093233
och
http://www.reseguiden.se/sista-minut...7&min_nights=2
Där man får se en lista med olika produkter och några av deras egenskaper. Jag skulle hemskt gärna vilja se en bra lösning för detta fenomen.

Jag skulle nog lösa det genom att bara visa loggan, skriva 7/10 istället för stjärnor, samt bara priset. Loggan och priset kan vara länkar till produkten på respektive site. De ska dessutom vara ganska höga och "touch-vänliga", man behöver inte se mer än 4st åt gången på sin iphone liksom.

Bara en snabb tanke :)

Det är exakt sån't här som gör mig som frekvent mobilsurfare irriterad; i användarvänlighetens namn börjar man plocka bort information, det är inte användarvänligt - det är användarovänligt! :-)

Vill ni specialanpassa för mobiler så bygg en app och låt webbsidan vara som den är!

Kul med andra åsikter :)

Vilken av den informationen som försvinner är det som gör dig besvärad? Man behöver ju knappast plocka bort någon info för en padda, men i en lur blir det otroligt smått och pilligt att zooma och svårt för de som ser dåligt att se vad som står.

Appar känns ärligt talat redan en aning "gammaldags", eftersom att man måste bygga en app för iOS, en för Android, o.s.v. för mobiler man vill att de ska fungera på. Det borde finnas 1 standard, och den "mest optimala" är i min mening hittills responsive design.

Här kommer mer av den varan... :-)

All information som försvinner gör mig besvärad; mitt behov ändras inte bara för att jag förflyttar mig från mitt skrivbord (dator) till min säng (mobil) eller från tåget (surfplatta) till jobbet (multi-monitor). Jag vill ha tillgång till all information alltid.

Jag vill även veta exakt var denna information befinner sig, att bara lägga den under så att sidorna blir oändligt långa på mobilen är inget bra alternativ. Att scrolla i sidled innebär inget problem på en mobil och många gånger vill man t.ex. visa samma typ av data direkt under varandra (tabell / lista / etc) för enklare jämförelse.

Både pinch-zoom och dubbelklick är otroligt intuitivt och att zooma fungerar riktigt bra på mobila webbläsare. Det är just det som är grejjen, det är så sjukt lätt att anpassa zoomen till dina förutsättningar. Är jag trött och ligger i sängen och läser en artikel eller sitter på bussenen där det skakar så zommar jag bara lite extra.
Är det något som är pilligt så är det att använda en mus. Vet inte hur många gånger per dag jag startar fel program i Windows av misstag för att ikonerna är för nära varandra, men jag har aldrig någonsin misslyckats med att zooma in en text på mobilen. ;-)

Jag håller med om att appar känns gammaldags, men alternativet är icke mobilsidor eller responsive design - alternativet är att webbsidan alltid ser likadan ut.

Det finns även andra problem med RWD, du designar t.ex. en webbplats till en kund som kanske skall hålla i 10 år i en prylmarknad som ändrar sig otroligt snabbt. Du riskerar att ditt upplägg blir gammalt under tiden som designen realiseras till kod. För 2 år sedan var Blackberry fortfarande hett. Vem vet vad vi har imorgon. Är det inte bättre att prylarna anpassar sig efter webbsidan än tvärt om?

Fast du bör väl inte anpassa utvecklingen efter dig själv utan efter majoriteten av användarna?

Man bör begränsa innehållet på en sida på en vanlig webbplats för datorn och i nästa steg bör man begränsa innehållet än mer när det gäller mobilen. Man kan fortfarande ha samma information men man får organisera den på ett annat sätt. Att man visar information på olika vis är inte detsamma som att man plockar bort information :) Tung grafik och andra otrevligheter bör absolut undvikas i mobilversioner, det är långt ifrån alltid man har en perfekt uppkoppling på resande fot. Lätt, snabbt och smidigt är ledorden.

Saken är ju den att ingen information direkt försvinner. Det är bara den onödigt stora länken som försvinner, och länken finns fortfarande kvar på produkten. Stjärnorna blir breda och störiga i luren, men om man skriver 6/10 så är det inga problem att få med i mobilen ändå.

Här är vi av 2 helt olika åsikter. Mycket hellre en lång sida att scrolla igenom, än att behöva scrolla åt alla möjliga håll.

Hade faktiskt samma problem i Windows, mest eftersom att datorn blev så slö efter ett tag.


Jag tror att vi har kommit betydligt längre och närmare hur framtiden kommer se ut nu än för 2 år sedan. Ser fortfarande inte vad problemet är med att köra responsive om man i framtiden skulle börja anpassa devicesen heller, klarar de av att visa 1280 i bredd eller vad det nu kan tänkas vara, kommer ju den "versionen" av sidan att visas ändå.

Så det personliga svaret blir absolut nej, bättre att anpassa mjukvaran (webbsidan) efter hårdvaran än tvärt om.

Håller med, med det undantaget att jag tycker man bör anpassa för mobilen först och sedan bygga de mer "stationära"-versionerna. Det gör ofta att man får bort onöda detaljer från den stora sidan och slipper göra så stora anpassningar längre fram i projektet.


Ber om ursäkt om inlägger blev flummigt, trött som ett djur.

Man bör inte plocka bort information, utan möblera om. Finns inget värre än att gå in på en site som är mobilanpassad så hittar man inte det man söker.
Detta är något som många glömmer av när dem bygger responsive.