Flexibele, mobiel-eerste lay-outs met CSS3

Sommige experts projecteren mobiele apparaten om binnen vijf jaar het dominante medium voor surfen op het web te worden, waardoor ze het browsen op desktopcomputers inhalen. Ongeacht hoe nauwkeurig deze projectie ook blijkt te zijn, het is duidelijk dat het formatteren van websites voor mobielvriendelijk kijken een hoofdbestanddeel van webontwerp en -ontwikkeling moet worden. Er zijn natuurlijk veel manieren om dit te bereiken. CSS3 biedt echter een redelijk rijke toolset voor mobielvriendelijke opmaak, vertrouwend op de browsermogelijkheden van de client in plaats van back-end template.

Stap 1. Denk vooruit

Er zijn een aantal zaken waar over nagedacht moet worden voordat je meteen naar een layout gaat stylen.

Mobile Web Browsing

Ten eerste, wat moet men in gedachten houden bij het ontwerpen voor mobiele browsers? Nou, hier zijn een paar dingen ...

HTTP-verzoeken beperken: gegevensoverdracht via 3G kan behoorlijk belastend zijn. Dit omvat waar mogelijk beperkende afbeeldingen (bijvoorbeeld van de CSS).
Variërende schermafmetingen: Mobiele apparaten hebben de neiging om rond de breedtebeelden van 320 - 480 pixel te zweven, maar kunnen sterk variëren, afhankelijk van het apparaat. Dus het vooraf definiëren van breedten in de CSS is over het algemeen een slecht idee voor zaken als alinea's en DIV's.
Optimaliseren voor een subset: Er zijn ontzettend veel mobiele apparaten, browsers, besturingssystemen, etc. Probeer je tests te concentreren op wat jij als het belangrijkste beschouwt. Voor mij omvat dit iPhone, iPad, Blackberry en Android. Deze lijst moet ook Windows Mobile bevatten, maar ik heb simpelweg geen toegang tot een Windows Mobile-apparaat.
Hover moet sterven: Oké, dat is een beetje dramatisch. Touchscreens bieden echter geen ondersteuning voor zweven. Dus als u menu's samenstelt, verberg dan geen dingen achter zweefgebeurtenissen. De muisaanwijzer moet alleen worden gebruikt om sommige effecten (zoals kleurwijzigingen) te verbeteren die geen belangrijke inhoud leveren (zoals vervolgkeuzemenu's).

"Het algemene punt is om van tevoren te weten hoe uw site er in verschillende browsers waarschijnlijk uit zal zien voor het zien. "

Browserondersteuning (op desktops)

Ten tweede moet u de browserondersteuning in gedachten houden. De spreekwoordelijke "olifant in de kamer" is natuurlijk IE. Maar goed nieuws! Het blijkt dat websites er niet echt precies hetzelfde uit hoeven te zien in elke browser. Zolang het de inhoud van de website niet hindert, zal een browser die CSS3 niet kan verwerken, over het algemeen een meer dan acceptabele ervaring bieden. Het algemene punt is om van tevoren te weten hoe uw site er in verschillende browsers waarschijnlijk uit zal zien voor het zien.

Stap 2. De HTML

Het lichaam

"Houd de markup eenvoudig en schoon."

We willen niet alleen geldige HTML produceren, we willen het ook zo veel mogelijk vereenvoudigen. Hoewel het altijd een goed idee was om HTML gestroomlijnd en vrij van onnodige DIV's te houden, is het nu nog belangrijker met de toename van mobiel browsen op het web. Ook kunnen veel van de effecten die 7 geneste DIV-tags vereisten nu worden gereproduceerd met een beetje CSS3.

Omdat dit geen HTML5-zelfstudie is, blijf ik vasthouden aan XHTML strict. Met dat in gedachten kunnen veel van de markup hier nog schoner worden gemaakt met behulp van sommige HTML5-elementen. Hier is wat HTML voor een typische lay-out. We hebben een pagina met een koptekst, voettekst, inhoudsgebied en zijbalk.

Mijn blog

Een item over iets
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lorem elit, suscipit tempus pretium eget, varius ut erat. Donec lobortis est zit amet felis pellentesque vel egestas sapien iaculis. Maecenas eget quam nisi. Klasse aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Mauris nunc metus, pellentesque eget porta ut, facilisis ut metus. Etiam dignissim egestas sempre. Aliquam tincidunt tortor non mi ulicies quis interdum quam scelerisque. Aenean risus libero, aliquam vel rhoncus sed, elementum eu leo. Pellentesque vitae ante urna, ut rhoncus sapien. In iaculis tristique lobortis. Nulla feugiat elit bij odio dictum dignissim. Fusce tristique lacus nec justo porttitor egestas. Etiam vitae arcu risus, op interdum lacus. Ut dignissim, dui eu imperdiet accumsan, dui mauris hendrerit leo, vel fringilla mi ipsum vitae orci. Nulla libero quam, euismod eget rutrum sed, ullamcorper vitae felis. Mauris aliquam dignissim interdum. Sed sagittis blandit urna, sit amet pellentesque lorem egestas sed. Nam adipiscing, lorem non ornare volutpat, turpis ante sagittis elit, ac hendrerit arcu nunc ut est. Vivamus at arcu felis, eget porta odio.

Een vermelding over iets anders
Maecenas vitae metus ac est lobortis tincidunt laoreet et enim. Maecenas purus magna, specimentum at mattis vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque enim faucibus ac. Etiam suscipit fringilla mi, et tempor mauris convallis zitten amet. Phasellus eros dolor, tempus at pulvinar ac, mollis sed eros. Morbi viverra pellentesque tellus, et tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus egeteget felis. Donec ut malesuada lorem.
Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sit amet erat. Nullam cursus ornare placerat. Sedumacademie van Sedumacum. Proin suscipit ultrices mattis. Sed semper facilisis est in luctus. Etiam et quam a ligula laoreet iaculis vel quis leo. Etiam et purus a quam vehicula feugiat. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac a tortor.

Een derde binnenkomst
Maecenas vitae metus ac est lobortis tincidunt laoreet et enim. Maecenas purus magna, specimentum at mattis vel, pellentesque sed nibh. Curabitur scelerisque pulvinar ante, quis pellentesque enim faucibus ac. Etiam suscipit fringilla mi, et tempor mauris convallis zitten amet. Phasellus eros dolor, tempus at pulvinar ac, mollis sed eros. Morbi viverra pellentesque tellus, et tincidunt lectus fringilla non. Donec quis turpis in nunc venenatis rhoncus egeteget felis. Donec ut malesuada lorem.
Vivamus placerat bibendum placerat. Nullam pretium, nisl vitae sodales rhoncus, ante massa ultricies purus, ac blandit ante felis sit amet erat. Nullam cursus ornare placerat. Sedumacademie van Sedumacum. Proin suscipit ultrices mattis. Sed semper facilisis est in luctus. Etiam et quam a ligula laoreet iaculis vel quis leo. Etiam et purus a quam vehicula feugiat. Praesent ac ligula mi. Donec ut sapien in nunc sagittis interdum ac a tortor.

Blog Menu
abonneren
RSS

sociaal
Facebook
tjilpen

Categorieën
Iets
Niets
Alle dingen
Geen dingen

archief
Juni 2010
Mei 2010
April 2010
Maart 2010

Zoals u kunt zien, is het een vrij eenvoudige en typische bloglayout met een paar artikelen en enkele menu-opties in de zijbalk.

Viewport-metadata

In ons hoofdelement plaatsen we alle typische stukken zoals stijlbladen, inhoudstype, titel, enzovoort. Er is echter één extra stuk dat we zullen toevoegen om mobiele browsers glad te strijken..

Dit is een kleine metadata-tag, voorgesteld door Apple, om iPhones te helpen bij het renderen van een pagina. Het past in feite automatisch de pagina aan de viewport en voorkomt zoomen. Verschillende andere mobiele browsers ondersteunen dit ook, inclusief Blackberry's eigen browser. In mijn testen is het bijhouden van deze tag helemaal niet schadelijk voor het bladeren op het bureaublad. Dus laten we het gewoon in het hoofd steken en het vergeten.

Denken over de lay-out

Deze specifieke tutorial zal zich concentreren op het nemen van de bovenstaande HTML en deze in twee lay-outs te stylen. Eén lay-out is gericht op mobiel browsen en één op desktop browsing. In de praktijk zal het waarschijnlijk nuttig zijn om zo'n lay-out in verschillende "doelen" te breken. Omwille van deze eenvoud zal deze tutorial zich echter alleen op deze twee richten.

Stap 3. De mobiele styling

ontkenning

Het doel van deze tutorial is niet om te praten over rijke typografie of briljant grafisch ontwerp. Dus de presentatie hier is heel eenvoudig gehouden. Wat belangrijk is, is het denkproces dat de stylesheet aanstuurt.

De aanpak

De hoofdthema van dit alles is na te denken over het ontwerpen van een mobiele lay-out eerste. De reden hiervoor is dat het waarschijnlijk is dat wat je ook verzint voor mobiele apparaten ook op een desktop werkt. Dan, in plaats van te eindigen met een samengevoegde mobiele lay-out en een briljante desktoplayout, begin je met een briljante mobiele lay-out en verbeter je deze voor desktop. Dit zorgt er ook voor dat uw website zijn publiek niet verliest terwijl de wereld mobiel wordt.

De inspiratie

Deze aanpak is geïnspireerd door Luke Wroblewski die dit jaar op An Event Apart in Boston heeft gesproken. Zijn presentatie was gericht op het denken over "Mobile First".

Hoewel deze tutorial zijn presentatie in geen enkel geheel vastlegt, sloeg een stuk meer naar huis dan de rest (voor mij). De huidige trend is design om als eerste aan de desktopversie van een website te werken, het vervolgens te strippen en een mobiele website samen te stellen als er tijd is. In plaats daarvan moeten we eerst voor de mobiele wereld gaan ontwerpen en vervolgens dat ontwerp naar wens aanpassen voor de desktop. Het rationele is in wezen een van progressieve verbetering ... als het ontwerp handig is op mobiele apparaten, zal het ook op de desktop werken. Het omgekeerde is echter meestal niet waar.

Sommige CSS

Laten we dus een ogenblik nadenken over mobiel browsen. Lange schuifschermen zijn moeilijk om mee om te gaan. Laten we dus de items in de blogmenulijst nemen en ze gemakkelijker verwerken.

.zijbalk ul border-left: solid 1px #ccc; opvulling: 0 0 0 5px;  .sidebar ul li display: inline; opvulling: 0 5px 0 0px; border-right: solid 1px #ccc;

Dat zou ons een mooi, schoon uitziend menu moeten opleveren met een paar pijpachtige afscheiders. U zult merken dat ik niet heb gekozen om het menu van de onderkant van het scherm te verplaatsen. Menu's onderaan kunnen handig zijn bij mobiel browsen. Als je erover nadenkt om door een webpagina te bladeren, moet je helemaal naar boven scrollen om ergens anders heen te gaan. Afhankelijk van het apparaat kan scrollen nogal lastig zijn. Er zijn voor- en nadelen aan deze methode, maar in dit geval denk ik dat het goed werkt.

Ik zou echter graag de RSS naar de topbanner verplaatsen, dus laten we dat ook doen.

h3.subscribe display: none;  .sidebar ul.subscribe position: absolute; top: 25px; rechts: 10px; border: none; color: # fff;  .sidebar ul.subscribe li border: none;

Afgezien van dat, de rest is eigenlijk gewoon een beetje lettertype van de rubriek elementen en kleuren van de ankers. Voor de toepassing van deze zelfstudie heb ik voor de eenvoud een CSS-reset aan de bovenkant van het blad opgenomen. Het volledige CSS-blad is te vinden in de broncode van deze tutorial.

Zoals u kunt zien, is er niets bijzonders aan de mobiele stijl wanneer u het ontwerp benadert vanuit een eerste gezichtspunt. In plaats van te denken "hoe kan ik dit eruit zien op mijn scherm", denkt u "hoe kan ik styling gebruiken om dit het handigst te maken op een mobiel apparaat".

Stap 4. De Desktop Styling

Media Query

In het geval dat je het niet hebt geraden, zal dit hele ding uiteindelijk worden aangedreven door CSS3 media query. In het geval dat u niet bekend bent, is media-query een manier voor het stijlblad om aangiften aan en uit te schakelen op basis van verschillende voorwaarden. Een dergelijke voorwaarde, en het onderwerp van dit blad, is schermafmetingen.

Nogmaals, de volledige CSS is te vinden in de bron die bij deze tutorial hoort, maar laten we dit even bekijken:

.pg width: 800px; marge: 0 auto;

In dit geval willen we niet echt een paginabreedte van 800 px, tenzij we zeker weten dat het browservenster van de gebruiker minimaal 800 pixels breed is. Anders eindigen we met een van die irritante horizontale schuifbalken.

Dus we gaan die verklaring (samen met een aantal andere) in een mediaquery inpakken.

@media all en (min-width: 800px) .pg width: 800px; marge: 0 auto;

Dat leest vrij gemakkelijk, toch? Het 'alles' verwijst naar 'gebruik deze stijl voor alle soorten media'. Er zijn andere dingen die hier kunnen gaan, zoals "afdrukken" voor de printer, maar er is niet veel consistente ondersteuning. Hoe dan ook, "alle" zal hier prima voor werken.

"Vorige" stijlen overschrijven

We zullen ook veel andere dingen in deze mediaquery plaatsen, maar het belangrijkste om te onthouden is in essentie override vorige stijlen en voeg enkele nieuwe toe om de nieuwe lay-out te bereiken. Hierdoor kunnen browsers die geen mediaquery ondersteunen, gewoon terugvallen op de originele stijl. Ook al zijn ze dat wel geoptimaliseerde voor mobiel is er niets mis met het weergeven van die lay-out in een minder geschikte desktopbrowser.

We verplaatsen die zijbalk bijvoorbeeld van de onderkant en maken de lijsten weer als lijsten.

@media all en (min-width: 800px) .sidebar ul border: none; padding: 0;  .sidebar ul li display: block; padding: 0; border: none;  h3.subscribe display: block;  .sidebar ul.subscribe position: static; top: auto; rechts: auto; border: erven; kleur: erven;  .sidebar ul.subscribe li border: inherit;

Hiermee wordt de zijbalk links uitgezet (gecombineerd met een paar andere vlotters die in het stylesheet zijn gevonden) en plaatst u de subscribe terug waar deze hoort voor mensen die de site doorzoeken in minimaal 800 px breedte.

Als u de bron opent in een browser en de grootte horizontaal aanpast, kunt u de lay-out bekijken tussen het bureaubladformaat en het mobielvriendelijke formaat.

Je vraagt je misschien af, waarom 800px? Is er iets magisch aan een breedte van 800px? Nee. In feite zou ik zeggen dat het te breed is. Met de introductie van "snap" in Windows 7 zou ik willen beweren dat 600px de nieuwe doelbreedte zou moeten zijn voor een desktopwebsite. Op die manier kan de browser naar rechts of links worden "geklikt" op een 1280px-scherm en toch de lay-out behouden. Dit is echter echt niet hier noch daar. Houd er rekening mee dat 800px niets bijzonders is.

Browserondersteuning

Belangrijk: De website zal worden gestileerd als de mobiele versie in IE8 en lager. Is dit goed? Ik denk het. Ik heb dit ook eerder gedaan en tot nu toe heeft niemand me gearresteerd. Bovendien wordt ondersteuning voor mediaquery beloofd in IE9.

Stap 5. Alternatieve methoden

Dit is niet de enige manier om dit te bereiken. Het doel van deze zelfstudie was echter om een zeer praktisch gebruik van de mediaquery te tonen en enkele ideeën voor mobiele lay-outs te presenteren op basis van alleen CSS.

Dat gezegd hebbende, hier zijn een paar andere manieren om een mobiele lay-out samen te stellen ...

Serveer verschillende sjablonen: Als u toegang hebt tot de sjablonen voor de site, kan meestal een thema-systeem worden geplaatst waar de aanvragende browser wordt gedetecteerd, waarna een andere HTML-sjabloon wordt weergegeven op basis van het type browser (mobiel of niet). Dit gaat meestal gepaard met een aparte set CSS.
subdomeinen: m., mobile., en .mobi zijn hier meestal de normen, waar een geheel andere website wordt geserveerd. Dat gezegd hebbende, het is meestal hetzelfde als "verschillende sjablonen gebruiken" om duplicatie van inhoud te voorkomen.
Vloeistoflay-outs: Men kan ook hun lay-out volledig vloeibaar maken, zodat ongeacht de grootte van het browservenster, de inhoud zich aanpast. In feite is de "mobiele" stylesheet in deze tutorial een vloeiende lay-out. Het leuke aan het gebruik van mediaquery's is dat je de achtergrondafbeeldingen kunt verminderen en minder HTTP-verzoeken kunt produceren.

Er zijn waarschijnlijk verschillende andere methoden voor het omgaan met mobiel surfen op het web, maar vaak komt dit neer op een soort van hybride. Of het nu gaat om een vloeiende lay-out met bepaalde "kick" -punten op basis van mediaquery of een subdomeinomleiding voor verschillende sjablonen, het belangrijkste is om van tevoren mobiele lay-outs te plannen, zodat uw websites niet steeds minder nuttig worden over de verschillende sjablonen. komende 5 jaar.

Code