http://screenqueri.es/ er den bedste side jeg har kunne finde, har forskellige telefoner + tablets. Og der er mulighed for at man kan trække i hjørerne, for selv at bestemme skærm størrelsen. Ligeledes kan man gemme et ss af hvordan det ser ud.
Responsivt design - tjek!
Det er jo simpelt nok; vi lever i en verden, hvor der kan surfes fra en stor mængde af diverse gadgets og disse gadgets har forskellig skærmstørrelse, browsersoftware og indstillinger, som påvirker hvordan dine kunder får leveret dit website. Man savner næsten de gode gamle dage, hvor man bare skulle huske at teste i lidt forskellige browsere (og ja, der er ganske mange, når man også lige skal tage kombinationen med OS ind i planerne). Nogle forsøger så at kontrollere oplevelsen ved at lave en platformsafhængig app, som oftest er en delmængde af dit website, andre laver et dedikeret letvægts mobilsite (f.eks. anbefalet af Jakob Nielsen) og andre igen tyer til responsivt design.
Hvis du vælger responsivt design, skal det naturligvis testes - den dyre, sjove og ikke helt realistiske måde er at købe alle de tænkelige gadgets, der kommer på markedet. En mere realistisk måde ville være at køre sitet igennem en række simulatorer og se resultatet der. Hvis du er heldig er der nogen der har gjort fodarbejdet for dig og bygget et testsite, hvor du kan se hvordan dit website ser ud på et udvalg af gadgets. F.eks. kan du bruge http://ami.responsivedesign.is/ for at tjekke dit design på Apples platforme. Men der er jo mange platforme.
Hvordan tester du på tværs?
Kommentarer (9)
sortSortér kommentarer
- Ældste først
- Nyeste først
- Bedste først
Hej
Nogen der har en god guide til at opnå et ægte responsivt design.
(CSS og HTML)
Måske twitter bootstrap: http://twitter.github.com/bootstrap/scaffolding.html#responsive
Der er også dette http://mite.keynote.com/
En nem start: http://view.jquerymobile.com/1.3.0/docs/intro/rwd.php
./palle
Cool.
Der er også en lidt simplere side her: http://responsive.is/
Jeg bruger en bookmarklet til et hurtigt tjek.
http://responsive.victorcoulon.fr/
Det er dog bestemt realistisk at købe en stor mængde forskellige devices - i hvert fald, hvis man vil være sikker i sin test og er et nogenlunde etableret udviklingshus. Og i så fald er Adobe Edge Inspect (tidligere Adobe Shadow) den rigtige løsning. http://html.adobe.com/edge/inspect/
Jeg kan i øvrigt varmt anbefale:
Respond.js (mediaqueries polyfill)
https://github.com/scottjehl/Respond
Adaptive images (php script til at resize images på serveren)
http://adaptive-images.com/
... og selvølgelig modernizr, som dog ikke udelukkende giver mening ift responsive design
http://modernizr.com/
BrowserStack er servicEN, når det kommer til at teste i forskellige browsere. Der får man live interaktion med en nystartet virtuel maskine og alle platforme er tilgængelige, inkl. mobile. Microsoft tilbyder 3 måneders gratis brug gennem deres modern.IE-kampagne (http://www.modern.ie/en-US/virtualization-tools)
Med hensyn til responsive UI-frameworks er de to største Twitter Bootstrap og ZURB Foundation. Foundation kan anbefales, fordi det bruger Compass (SCSS); hvis du som webdesigner har sovet i timen og ikke bruger Compass endnu, har du mulighed for at tage et kæmpe spring fremad i produktivitet lige nu og her :)
Log ind eller Opret konto for at kommentere
