iPhone-vriendelijk webdesign met CSS

De introductie van de iPhone heeft ook gevolgen gehad voor webdesigners. Aan de hand van zes voorbeelden met 1, 2 of 3 kolommen en liquid layout kun je een bestaande website makkelijk aanpassen voor Safari op de iPhone en andere browsers.
Gonny van der Zwaag - · Laatst bijgewerkt:

Webdesign voor iPhoneDe introductie van de iPhone heeft ook onder webdesigners nogal wat teweeg gebracht. Als je nog niet was overgestapt op een CSS-layout met meerdere kolommen, dan is dit het moment. Op de website van Matthew James Taylor zijn meerdere liquid layouts te vinden die geschikt zijn voor de iPhone. Belangrijke kenmerken: SEO-vriendelijk, geen CSS-hacks, geen JavaScript en geschikt voor wisselende tekstgrootte.

Heb je nog een oude website die nog van tabellen of (horror!) van frames gebruikmaakt, dan is het echt tijd om je website een opknapbeurt te geven. Tegenwoordig is CSS (cascading stylesheet) de norm; met minder word je niet serieus genomen. Bij een website die voor de iPhone geschikt moet zijn, heb je eigenlijk niet veel meer nodig dan een goede layout in twee of drie kolommen. Grafisch geweld, veel plaatjes en andere franje die het laden alleen maar trager maakt, is ongewenst.

Met de zes layout-voorbeelden die Matthew James Taylor heeft gemaakt, ben je al een flink stuk op weg: nog even je tekst erin plakken en klaar is kees. Alle voorbeelden maken gebruik van een liquid layout; dat houdt in dat de breedte van kolommen relatief is. Ze hebben dus geen vaste breedte, maar krijgen een vast percentage van de totoale breedte toegewezen. Ze zijn ook stapelbaar, dus je kunt meerdere layouts na elkaar op dezelfde pagina gebruiken.

De maker van de website heeft ook wat voorbeelden met floating boxes layout.

Suggestie hoe we dit artikel kunnen verbeteren? Laat het ons weten!

Informatie

Laatst bijgewerkt 2 november 2009, 1:43
Categorie Apps

Reacties zijn gesloten voor dit artikel.