Bästa bredd på webbutik?

[Runns.se]

Som topic säger, vad är optimala bredden?

[Fruktsam]

@Runns.se 68648 wrote:

Som topic säger, vad är optimala bredden?

Pratar du om sortiment eller pixelbredd?

Om det är det senare så bör layouten rätta sig efter innehållet och inte tvärt om. Fast 960px är standardbredd för dektopen idag, men sen har du ju alla mobila enheter att ta hänsyn till. Om du löser det med responsiv, adaptiv eller separat layout beror också på sajtens innehåll och funktion.
Svårt att göra några antaganden om skärmstorlekar nuförtiden när det snart går att surfa på allt från tv-apparater till brödrostar.

[Runns.se]

@Fruktsam 68666 wrote:

Svårt att göra några antaganden om skärmstorlekar nuförtiden när det snart går att surfa på allt från tv-apparater till brödrostar.

Precis det jag har funderat över

[Fruktsam]

Ja den optimala bredden är ju således en variabel bredd.

Många löser det ju med responsiv layout nuförtiden, vilket ofta blir en halvdan lösning när det gäller ehandel känner jag. Om man inte utvecklar den enligt ”mobile first”, men då blir den stora varianten ofta lidande.

Är isåfall mer för adaptiv design där man anpassar i större grad efter plattform.

Men de flesta låser fortfarande maxstorleken till 960px. Ibland mer om det finns goda skäl till det.

[HakanBrakan]

Vi bygger precis om våran site till att bli responsiv och då kör vi på följande fasta storlekar för att göra det lite enklare för oss: 1000px, 750px, 500px och 250px
Detta för att det är lätt att dela med 4 samt att vi täcker in följande

320 (smartphone)
640 (smartphone)
768 (tablet stående)
1024 (netbooks och desktop, table liggande)

Men om du inte känner dig helt bekant och har erfarenhet av responsiv design kan detta jobbet knäcka den mest envisa, detta är andra försöket för oss att göra denna uppdateringen

Några exempel:
http://baghashams.files.wordpress.com/2011/10/screen-sizes-2-large1.png

http://www.indivirtualdubai.com/news/2012-08-responsive-fluid-web-design/responsive-sizes1.jpg

[Pelmered]

Ja, reponsive är väl nästan det som gäller nu.

Det finns ju två varianter när det gäller sidans bredd när man gör sidan som ska vara responsive.
Det ena är fluid vilket betyder att sidans bredd alltid är 100% av skärmytan, oftast upp till en gräns någonstans runt 900-1200px.
Den andra varianten är fixed vilket betyder att sidans bredd hoppar mellan olika lägen för att anpassa sig till telefonen genom att välja det största läget som får plats på skärmens bredd. Det verkar vara det här som HåkanBråkan beskivet ovan.
Sedan finns det ju även olika former av hybridvarianter där sidan är fluid i vissa interval och hoppar över vissa bredder.

När det gäller e-handel så har man normalt sett väldigt mycket bilder på sidan och man vill helst undvika att skala om bilderna för mycket med HTML/CSS eftersom de inte alltid blir så fina då. Bilderna är ju väldigt viktiga på webben, och framförallt på e-handelssidor. Därför tycker jag nog att det oftast är bäst med fixed bredd i flera steg så att man har bättre kontroll på hur bilderna skalas.

HåkanBråkan: Om jag får ge lite feedback på ditt upplägg så skulle jag nog försöka lägga in några fler bredder. Det kommer vara ganska många lägen där man kommer få väldigt mycket tomrum på sidorna. Exempelvis har ganska många telefoner 480 pixlars höjd på skärmen vilket gör att man in landskapsläge endast får 250px versionen av sidan och således har 230px med tomrum på sidorna och bara 250px med innehåll. Samma sak för de som har t.ex. 720px eller 960px.

[Fruktsam]

@Pelmered 68740 wrote:

Det finns ju två varianter när det gäller sidans bredd när man gör sidan som ska vara responsive.
Det ena är fluid vilket betyder att sidans bredd alltid är 100% av skärmytan, oftast upp till en gräns någonstans runt 900-1200px.

Flytande layout är ju en del av responsiv layout. Flytande layouter har använts länge, men responsiva layouter är relativt nytt och bygger just på användandet av CSS media query och/eller javascript för att skapa brytpunkter där man arrangerar om layouten för att passa skärmstorleken. Ofta används det i kombination med en flytande layout, men kan även vara fixerad.

Sen har vi adaptiv layout där man oftast anpassar mallarna och innehållet både på serversidan och klientsidan för att leverera en sida/applikation som är bättre anpassad. Något som passar mer interaktionsbaserade sidor som ehandel bättre, dels för att man bättre kan leverera ett mer lättnavigerat gränssnitt men även för att kunna optimera sidans tyngd. Laddningstiden är ju enormt viktig, framförallt när det gäller ehandel. Det är inte många sekunder som krävs för att tappa en potentiell kund idag.
De flesta responsiva sajter är idag ungefär lika tunga oavsett vilken enhet de visas på, vilket är helgalet.

[Runns.se]

@Fruktsam 68704 wrote:

Ja den optimala bredden är ju således en variabel bredd.

Många löser det ju med responsiv layout nuförtiden, vilket ofta blir en halvdan lösning när det gäller ehandel känner jag. Om man inte utvecklar den enligt ”mobile first”, men då blir den stora varianten ofta lidande.

Är isåfall mer för adaptiv design där man anpassar i större grad efter plattform.

Men de flesta låser fortfarande maxstorleken till 960px. Ibland mer om det finns goda skäl till det.

Något sånt kommer aldrig komma till textalk
Vilka plattformar kan man få det på?

[Pelmered]

@Fruktsam 68741 wrote:

Flytande layout är ju en del av responsiv layout. Flytande layouter har använts länge, men responsiva layouter är relativt nytt och bygger just på användandet av CSS media query och/eller javascript för att skapa brytpunkter där man arrangerar om layouten för att passa skärmstorleken. Ofta används det i kombination med en flytande layout, men kan även vara fixerad.

Det var väl mer eller mindre exakt vad jag skrev?
Flytande layouter utan media queries är dock inte någon bra idé och det slog aldrig just på grund av det men har nu fått ett uppsving igen på grund av det.
@Fruktsam 68741 wrote:

Sen har vi adaptiv layout där man oftast anpassar mallarna och innehållet både på serversidan och klientsidan för att leverera en sida/applikation som är bättre anpassad. Något som passar mer interaktionsbaserade sidor som ehandel bättre, dels för att man bättre kan leverera ett mer lättnavigerat gränssnitt men även för att kunna optimera sidans tyngd. Laddningstiden är ju enormt viktig, framförallt när det gäller ehandel. Det är inte många sekunder som krävs för att tappa en potentiell kund idag.
De flesta responsiva sajter är idag ungefär lika tunga oavsett vilken enhet de visas på, vilket är helgalet.

Adaptiv är väl det bästa. Men det blir också väldigt mycket mer komplext och därmed mycket dyrare att både utveckla och underhålla. Det är ju en av de sakerna man vill undvika genom att använda responsiv design. Man vill inte att det ska skilja så mycket i funktionalitet mellan de olika enheterna och bara köra med progressive enhancement.

Om man bara ser till att använda webbläsar-cachen på rätt sätt så är det bara den initiala sidladdningen som går lite tyngre, efter det finns alla statiska filer lokalt i webbläsaren. Visst kan det var ett problem men det finns många saker man kan göra för snabba upp även det. Exempelvis kan man använda defer för att prioritera ned javascript och ladda in CSS och bilder smartare m.h.a. javascript(ladda först det kritiska och sedan resten asynkront).

Större e-handelare bör absolut satsa på adaptiv design, men för de flesta i det här forumet är det nog inte riktigt värt det i dagsläget om man inte har kunskaperna och tiden själv(väg i så fall den tiden det tar emot vad du kan göra för att utveckla verksamheten på andra sätt. Oftast kan man spendera sin tid på viktigare saker).

[Fruktsam]

@Runns.se 68751 wrote:

Något sånt kommer aldrig komma till textalk
Vilka plattformar kan man få det på?

Tänkte först skriva att det borde väl inte vara några större problem att fixa åtminstånde en responsiv layout till Textalk, men sen kom jag på att de kör HTML-kod anno 1998 med tabeller för menyer och annat snitsigt.
Fortfarande inte omöjligt men bra mycket meckigare.

Vet inte riktigt hur det ser ut på hyrplattforms-sidan annars. Många är ju lite begränsade när det gäller att förändra teman. Men så länge det är modern kod och du har full kontroll över CSS och kan lägga in egen javascript så är det i regel inga problem att göra en responsiv layout.

Egenhostade plattformar går ju givetvis bra vilken som. När det gäller adaptiv design är det olika smidigt på olika plattformar, men det ska gå bra på de flesta det med.

Det lättaste är oftast att börja från scratch och skapa ett helt nytt tema. Det finns flera frameworks som underlättar arbetet avsevärt, som Zurb Foundation, Twitter Bootstrap eller UIKit.

[Författare]

Inlägg