Kategoriarkiv: Design
Mobilutveckling — vad är bäst?
Lämna ett svar
Efter en föreläsning på WordCamp Stockholm om hur man utvecklar för mobilen, följt upp av upptäckten att Compass har funktioner för att base64-encoda både bilder och typsnitt bestämde jag mig för att undersöka hur de olika delarna stackar upp när man gör olika saker. Varje sida testas på GTmetrix, så får vi se vad som verkar ge bäst resultat. I nuläget har inget krut lagts på att sidan ska vara cross-browser, teknikerna fungerar i Chrome och Firefox, åtminstone. En framtida post/diskussion kan mycket väl vara att se hur teknikerna kan användas. Kanske man kan skala bort litet av tyngden från base64-encoding om man inte lägger in alla filer, det behöver också undersökas. Jag är också osäker på hur caching fungerar med <link>–element för Google Fonts gentemot @import i filen — någon som vet? För närvarande finns inte sidorna/etc tillgängliga, men om det finns intresse kan jag lägga upp dem på Github för framtida experiment.
Benchmark Den grundläggande sidan är baserad på en minimal, responsiv template från
Initializr, utan varken jQuery eller Modernizr, eftersom testen inte tittar på javascript. Jag använder sex ikoner från Paul Robert Lloyd, och två typsnitt med fulla familjer (normal, kursiv, fetstil och kursiv fetstil) (Alegreya och Ubuntu). Typsnitten finns både på Google Webfonts och på FontSquirrel. De experiment som inte använder Google Webfonts använder standard webkittet från FontSquirrel.
Tekniker
Minifiera CSS
På benchmarksidan används icke-minifierad CSS, men från och med experiment två är stilmallen komprimerad via Sass, detta för att få en bra idé om hur mycket det gör.
Bilder
Bilderna serveras på tre olika sätt:
- Sex unika bilder (om inget annat anges)
- Bilderna ihopbakade med Sass magiska sprites (Markeras med IS)
- Enskilda bilder, men enkodade i bas64 för att minska HTTP requests (Markeras med II)
Typsnitt
Typsnitten serveras på fyra olika sätt:
- Varje font för sig, i alla nödvändiga format, lokalt (om inget annat anges)
- Ett anrop till Google Webfonts, importerar filen (Markeras med FG)
- Bas64 enkodade i CSS-filen (Markeras med FI)
- Ett anrop till Google Webfonts,
<link>i headern (Markeras med FGL)
Tabell med Data
| Page Speed Grade | YSlow Grade | Total page size | Total # of requests | Load (s) * | |
|---|---|---|---|---|---|
| Base | B (81%) | B (87%) | 161KB | 16 | 4.63 |
| Minified (2) | B (81%) | B (87%) | 159KB | 16 | 4.62 |
| IS (3) | A (97%) | A (95%) | 159KB | 11 | 3.37 |
| FG (4) | C (73%) | B (86%) | 344KB | 17 | 5.59 |
| FG, IS (5) | A (91%) | A (94%) | 344KB | 12 | 4.34 |
| II (6) | A (98%) | A (97%) | 159KB | 10 | 3.12 |
| FG, II (7) | A (93%) | A (95%) | 344KB | 11 | 4.09 |
| FI (8) | B (87%) | B (87%) | 490KB | 8 | 3.91 |
| FI, II (9) | A (97%) | A (97%) | 491KB | 2 | 2.42 |
| FI, IS (10) | A (92%) | A (95%) | 490KB | 3 | 2.66 |
| FGL (11) | C (76%) | B (86%) | 344KB | 17 | 5.59 |
| FGL, IS (12) | A (95%) | A (94%) | 344KB | 12 | 4.34 |
| FGL, II (13) | A (97%) | A (95%) | 344KB | 11 | 4.09 |
- Beräknat på bandbredd av 0.25Mbit, samt fördröjning av 0.25s/anrop
Internet Explorer 9 float bug
Idag har jag varit på insektsjakt! Designen till en sida jag jobbar med var snygg i Chrome och Firefox, så hyfsad man kunde förvänta sig i IE8, och sedan kollade jag IE9…
Åh jisses. Hela layouten var helt ur led, med en float: left till höger, och sidebaren (float: right) nere på nästa rad.
Enter Google! Det visade sig att det finns/fanns en bug i IE om man har antingen 1) förälder utan fast bredd eller 2) förälder med margin: auto.
Jag hade 2), men vem vill låta bli en centrerad layout? Jag fortsatte Googla. Slutligen såg jag en intressant trend… Många med detta problem hade en felaktig doctype.
Det hade ju visserligen inte vi, men i desperation skrev jag DOCTYPE istället för doctype, dvs med stora istället för små bokstäver. Då fungerade layouten.
Så, för att sammanfatta: Internet Explorer hamnar i quirksmode om doctype är skrivet med små bokstäver. 
PS: Ifall någon vet vem som gjort bilden jag använder så skulle jag vara tacksam över att få reda på det. Den har legat i mappar på mina datorer sedan cirka –96, och konstnärens första namn är troligtvis “Åke”.