Responsiv unik HTML5 / CSS3-layout
 

Säljer nu en layout jag slängde ihop häromkvällen, layouten är responsiv för mobiler och tablets, byggd med HTML5 och CSS3.

Samtliga ikoner, fonter etc inkluderas och är free for commercial use. Layouten innehåller 10 stycken undersidor, färdiga element i form av knappar, forms, sliders, kolumner etc.

Testat i IE7+ och alla andra webbläsare.
Inkluderar även en dokumentation i CSS och HTML-filerna.

Koden, PSDer, fonter etc följer med.

Ni kan se layouten här: http://www.pr.avetile.com/Baxter/

Direktköp: 1.000 SEK - sen får du göra vad du vill med den, sälja vidare, använda själv etc.

Säljes som privatperson.
Vid frågor nås jag via PM eller här! :)

Den fungerar inte i Chrome. Det blir horisontell scroll om man ändrar storlek på fönstret.

Är inte riktigt säker på vad du syftar på, skulle du möjligtvis kunna skicka en print? :)

Samma sak här.

Minska du fönstret i Chrome så följer inte innehållet med. I stället visas en scrollbar i x-led.

Jag tror det han menar är detta nedan på bilden.

http://jejje.net/wp-content/uploads/...nsive-html.png

Men det fungerar om man fortsätter krympa den. Så tror inte det är något man behöver oroa sig för!

Riktigt snygg design förresten! :)

Jaha, det är den scrollbaren ni syftar på. Den är ju mer eller mindre oundviklig, sidan har tre olika lägen som ni bör märka av om ni fortsätter förminska fönstret. :)

Tack för kritiken Jejje! :)

Den är inte oundviklig. Är det en "responsiv" design, så ska den inte finnas med.

Jag antar att du syftar på att man ska använda %-enheter på hela sidan, och när man börjar förminska fönstret ska allting annat följa med snyggt och smidigt. I detta fall har huvudwrappern ett defaultläge på 1100 px.

När du börjar förminska ditt fönster att understiga 1100 px så kommer en sådan scrollbar finnas fram till att sizen på fönstret blir 1024 pixlar, då förändras wrappern och allting anpassas därefter. Sen finns det ett till läge för mobilen som befinner sig på strax under 500 pixlar.

Jag är väl medveten om vad en 100% responsiv layout är med flytande element och när allting är i procent, jag har antagligen gjort 10 sådana sidor senaste halvåret.

Däremot så är en sida enligt mig fortfarande per definition "responsiv" när man har exempelvis 3-4 olika lägen men ett fast pixelmått. Om detta beror på att jag lärt mig definiera responsivitet helt fel vet jag ej, då kallar jag denna layout för "desktop, table och mobil"-anpassad och ber om ursäkt för eventuell vilseledande marknadsföring! :)

Hela poängen med en responsiv design är att inte ha en scrollbar utan att sida ska vara "responsiv" till hur stor yta den kan visas på. Vad händer när du försöker "dra" något över sidan om den har en scroll? Ja då flyttar du ju på skärmen, inte så bra för mobil/tablets.

Ta en titt på http://twitter.github.io/bootstrap/index.html och förminska och förstora det fönstret, det är en responsiv sida, din är tyvärr inte det.

Som ovan nämnt så ber jag om ursäkt, jag bör kalla den adaptive kanske istället för responsiv eller något. En mod får gärna ändra detta. :)

Tessvärre så finns det fler än 3 skärmstorlekar. Din sida ser katastrofal ut på en 7" tablet jämnfört med en 10".

Ta gärna ett print på detta så ska jag fixa till det! :)

Du kan ju ändå undvika scrollen genom att sätta värdet för det "adaptiva" till att alltid vara mindre än skärmytan. Dina "steg" i det "adaptiva" är ju nu 1 steg för stort....alltså så som 99% av alla andra gör det. I dina steg så får du ju alltså förminska såpass att innehållet inte kan vara bredare än vad du tillåter att fönsterbredden är innan du hoppar till nästa steg.

Japp. :)

Hur som helst så tackar jag för allt fuzz i tråden, det var fel av mig att kalla den responsiv. Det är jag som under 2 år missuppfattat "responsivitet", för mig har det varit att den anpassat sig beroende på enhet - oavsett om jag gjort en flytande layout med enbart % och EM eller kört media query och pixelmått.

Dock skäms jag faktiskt lite lätt för detta misstag, och blåser därmed av försäljningen av layouten. :)

Hey, du överdriver definitionen en aning. Ska man gå efter din definition så är inte bootstrap heller responsive, jag får nämligen en scrollbar när jag minskar fönstret till minsta möjliga storlek.

Se till att uppgradera från IE6 så ska de nog fungera :)

Måste bara be att få flika in - det heter "följsam design" numera.
Och den där listen ska inte visas. Arbeta med procentenheter. Eller anpassa "px" efter skärmstorlek (brytpunkterna). Defaulta brytpunkter är i dag minst fem stycken.
Ett enkelt trix är att på en container eller wrapper som omfamnar allt är att sätta denna på:

max-width:90%; och med width på 1100px
width:1100px;

Inte helt 100 på ovan men något sådant är det, har inte tillgång till att prova.

Hur som så känns det ändå lite som paste and copy, och det finn mycket annat att anmärka på