Er komen steeds meer gebruikers op internet via tablets en mobiele telefoons. Dit betekent, zoals je al weet, dat het niet langer voldoende is om een goede webpagina te ontwerpen die er goed uitziet op onze computer: hij moet ook op elk mobiel apparaat te zien zijn. Het probleem? Verschillende schermformaten en resoluties. Daarom is het zo moeilijk om een ontwerp te maken dat zich correct aanpast aan alle media (de beroemde reagerend ontwerp, vertaald als adaptief ontwerp).
Hier zijn enkele tips om in gedachten te houden bij het maken van een ontwerp met deze kenmerken. Let op!
Tips voor adaptief ontwerp
- Maak een eenvoudig sjabloonMet simpel bedoel ik niet saai. Ik heb het over de estructura HTML van uw website: hoe duidelijker hoe beter. Houd er rekening mee dat er op een computerscherm drie verticale kolommen passen; op het scherm van een gsm past er maar één. Denk erover na en hoe u de elementen gaat herpositioneren.
- Elimineer alles wat overbodig isVermijd jQuery-effecten, Flash-animaties en elke andere code die het laden van uw pagina vertraagt. Hoe minder inhoud van dit type u heeft, hoe sneller het web wordt geladen.
- Definieer een stijl css voor elke "maat"Maak een tiny.css, small.css en big.css (bijvoorbeeld) die wordt uitgevoerd op basis van het apparaat waarop het wordt bekeken. Bijvoorbeeld:
@import url (tiny.css) (min-breedte: 300px);
@import url (small.css) (min-breedte: 600px);
@import url (big.css) (min-breedte: 900px);
- De meest gebruikte resoluties320px/480px/720px/768px/900px/1024px
- Maak uw sjabloon FLEXIBELWerk waar mogelijk met percentages in plaats van vaste bedragen. Hier zijn enkele referentie-equivalenties: 200px = 15'38% / 300px = 23'07% / 800px = 61'5384615384%
- Typografie Het is belangrijker dan ooit. Soms kan het scherm van uw apparaat zo klein zijn dat u alleen tekst ziet. Daarom moeten we heel zorgvuldig de beste lettertypen op onze site selecteren, zodat ze, wanneer ze verkleind worden, de leesbaarheid niet verliezen. Bovendien moeten we weten hoe we meer neutrale lettertypen kunnen combineren met andere met persoonlijkheid die het web het nodige karakter geven. Daarom is de eerste tip dat u tijd besteedt aan het selecteren van de lettertypen die u gaat gebruiken.
- Verenigde Staten van Amerika afbeeldingen van hoge kwaliteitNaarmate de ruimte kleiner wordt, zullen de afbeeldingen het vergezellen. Selecteer degene die geen kwaliteit verliezen wanneer ze worden verkleind, en die hetzelfde werken wanneer ze worden geschaald. Een afbeelding van slechte kwaliteit zorgt ervoor dat uw website er slecht uitziet.
- Dat uw afbeeldingen altijd worden gezien volVoorkom dat uw foto's worden afgesneden door de code img (breedte: 100%;) toe te voegen aan uw css. Op deze manier vertel je het apparaat de hoogte die het de afbeelding zou moeten geven opnieuw te berekenen, zodat de breedte voor honderd procent zichtbaar is.
- Allemaal laag dezelfde URLVergeet subdomeinen zoals www.mysite.com/mobile, aangezien hetzelfde index.html-bestand in de hoofdmap voor alle apparaten zal werken (als u het adaptieve ontwerp correct uitvoert). Het voordeel kent u al: hoe minder subdomeinen, hoe sneller de pagina wordt geladen.
- Profiteer van de steunen: Wees creatief. Toegang tot een website vanaf een desktopcomputer is niet hetzelfde als vanaf een iPad of mobiele telefoon. Met de eerste navigeer je op een rustige en ontspannen manier. Met dat laatste doe je het in de inactieve uren en sluit je het raam zodra je je verveelt. Profiteer van deze voorwaarden om de gebruiker te vermaken en hem plezier te laten hebben in die paar minuten die hij aan jou zal wijden. Misschien zal hij bij thuiskomst besluiten om je op een meer ontspannen manier weer te bezoeken.
- Raak geïnspireerd Bij digitale publicaties vraagt u zich af waarom dit advies is. Erg makkelijk: digitale tijdschriften (goed) weten hoe ze kunnen profiteren van de ondersteuning en hun ontwerp is erg intelligent. Raak erdoor geïnspireerd en maak een website die moeilijk te verlaten is.
Meer informatie - Digitale tijdschriften
Bron - splio, 960.gs, zuilen
Er zijn dingen waar ik het niet helemaal mee eens ben.
In punt 5 ... sinds 200px = 15,38% en de volgende ... deze referentievergelijking kan niet worden gemaakt zonder een bovenliggende maat, de grootte per pixel is geen relatieve maat zoals de percentages!
Specificeer de afbeeldingen met breedte: 100% fout, ik denk niet dat het een aanbeveling zou moeten zijn. De afbeeldingen definiëren ze beter met hun breedte en hoogte, zodat de server minder tijd nodig heeft om de informatie te verwerken (hij hoeft de grootte niet te berekenen) en we verbeteren de laadsnelheid van de pagina (wat erg belangrijk is in adaptief of responsief web). ontwerp).
Ik zou alvast afbeeldingen voor retina-schermen opnemen, ook al is het een neuscorrectie. Als we responsive webdesign willen doen, is het verplicht om afbeeldingen te gebruiken voor retina-weergave, aangezien een hoog% van de mobiele en tabletweergaven deze schermen gebruikt. Het heeft dus geen zin om de moeite te steken in een ontwerp voor hen op half gas.
Goed voor de rest
In punt 5 plaatsen ze je in de juiste context en vertellen ze je over een totale lay-out van 1300px met 3 kolommen, een van 200, 300 en 1000.
Als je het doorgeeft aan percentages, zijn ze in hun geval zoals je zegt, 15,38% ((200 * 100) / 1300) (decimaal hieronder, internationaal systeem: P)
Maar als we het hebben over een lay-out van 500px en we hebben 3 kolommen, een van 200, een andere van 200 en een andere van 100px, dan zijn de percentages niet meer hetzelfde, in dit geval 200px = 40% ((200 * 100) / 500)
Ze zouden zijn: 200px = 40% en 100px = 10%
Kom op, zoals ik al zei, ze zijn geen referentie wat je aangeeft, ze zijn slechts een referentie op een 1300px-lay-out.
groeten
Wat een mislukking, je hebt helemaal gelijk in de wereld! Nogmaals bedankt ;)