Responsieve weblay-outs voor mobiele schermen Intro, tips en voorbeelden
Ontwerpers hebben het nu moeilijker dan voorheen. We moeten niet alleen ontwerpen voor stationaire apparaten, maar ook voor mobiele apparaten zoals de tablet en smartphones, en aangezien we hier veel verschillende schermformaten en -resoluties gebruiken, is het een enorme taak om op te staan. In het licht hiervan, responsief webontwerp zou de beste oplossing kunnen zijn. Het biedt meer dan alleen een eenvoudige mobiele sjabloon; in plaats daarvan is uw volledige site-indeling ontworpen om flexibel genoeg te zijn om in elke mogelijke schermresolutie te passen.
Met een dergelijk vloeistofontwerpschema zijn er duidelijke voordelen en nadelen. Bekijk mijn onderstaande voorbeelden voor hoe responsief webontwerp de overgang naar mobiele apparaten een vloeiender proces kan maken.
Hoe Responsive Design werkt
Wanneer ik het woord gebruik “sympathiek” in termen van webdesign bedoel ik dat de hele lay-out reageert op basis van de schermresolutie van de gebruiker. Stel u dit scenario voor: u leest een website op één tablet en u schakelt om de een of andere reden naar een ander apparaat. Het browservenster is nu opnieuw bemeten. Een responsieve lay-out van het webontwerp bevat schema's en een lay-out die netjes wordt afgebroken en zichzelf opnieuw uitvindt. Vanuit het oogpunt van bruikbaarheid is dit een briljante techniek.
Bij responsief ontwerp gaat het om het creëren van een homogene ervaring ongeacht de schermgrootte van de browser of het apparaat. Ik heb het perfecte voorbeeld uit 'A List Apart' gevonden om mijn punt te illustreren, dat ook dynamische afbeeldingen bevat. De breedte wordt ingesteld in CSS met percentages voor bijna alle interne containerelementen. Grotere websites reageren ook goed op het verwijderen van dynamische inhoud zoals JavaScript wanneer dit niet wordt ondersteund.
Waarom ontwerpen voor mobiel?
Het is duidelijk geworden dat meer gebruikers mobiel worden, en niet alleen voor on-the-go surfen op het web. Tablet-pc's beginnen hun context te veranderen wanneer gebruikers online zijn in de klas. Ontwerpen voor mobiel is zeker een vereiste in moderne webstandaarden. Het enige probleem is om je ontwikkelmethode te kiezen en je publiek op de juiste manier te richten.
Wanneer u begint te coderen voor specifieke schermresoluties, krijgt u te veel stylesheets om mee om te gaan. Mediaquery's in CSS3 kunnen worden gebruikt om iPhone-specifieke lay-outs te bouwen voor zowel de liggende als de liggende weergave. Aangezien u de pixeldichtheid van tevoren kunt bepalen, is het eenvoudig om een HTML-sjabloon voor mobiel opnieuw in te stellen.
(Beeldbron: bradfrostweb)
Maar wanneer u een lay-out codeert voor responsief ontwerp, worden de mobiele aspecten standaard verzorgd. Zowel desktop- als mobiele gebruikers krijgen een vergelijkbare ervaring aangeboden en u hoeft zich geen zorgen te maken over externe CSS-eigenschappen. Het enige onderzoek dat u zou moeten uitvoeren, is plannen voor het kleinst mogelijke scherm. Google Analytics-verkeersgegevens kunnen hiervoor erg handig zijn.
Het is niet waarschijnlijk dat uw website 100% werkt op elk apparaat dat op elke browser draait. Maar u kunt een meerderheid targeten op basis van de gemiddelde breedte van het scherm. Oudere iPhone-modellen gebruiken een beeldschermresolutie van 320 × 480, wat niet zo ongelofelijk is. Ik zou schieten voor een minimale breedte van 240 px, of zelfs kleiner als je er in past.
De standaardzoom verwijderen
Als u op een smartphone op internet hebt doorgebracht, ziet u hoe websites worden geschaald om volledig te worden weergegeven op het scherm. Dit is voor het gemak van de gebruiker, aangezien de meeste websites geen mobiele tegenhanger hebben, dus de volledige lay-out is de veiligste gok.
Maar wanneer u begint met het bouwen van een responsief mobiel ontwerp, kan de automatische zoomlens uw lay-outelementen echt verpesten. In het bijzonder kunnen afbeeldingen en navigatie-inhoud klein of te groot lijken in uw lay-out. Er is een speciale metatag die u kunt toevoegen aan de kop van het document, die dit op de meeste Android- en iPhone-apparaten opnieuw instelt.
Dit staat bekend als de metatag voor de viewport waarmee enkele aangepaste variabelen binnen de inhoud worden ingesteld. Apple heeft een documentatiepagina met betrekking tot een paar andere metatags waar je naar moet kijken, hoewel deze specifiek zijn gericht op websites op iOS. De eerste schaal waarde is belangrijk omdat dit uw website standaard instelt op een volledige zoom van 100%.
De laatste waarde voor user schaalbare verwijdert deze zoomfunctie helemaal zodat de gebruiker de grootte van de lay-out niet kan wijzigen. Hiermee wordt het ontwerp in één grootte vergrendeld op basis van de volledige apparaatbreedte. Merk op dat zelfs als u de zoomfunctionaliteit uitschakelt, een goed responsief ontwerp zich nog steeds zal aanpassen wanneer u van een portret naar een landschap overschakelt op elk apparaat! Maar het is logisch een responsief ontwerp te vergrendelen en de generieke schaalopties te verwijderen.
Dynamic Image Scaling
Afbeeldingen zijn een ander belangrijk facet van vrijwel elke website. Mobiele gebruikers willen misschien geen video's streamen, maar foto's zijn een heel ander verhaal. Dit zijn ook de grootste boosdoeners als het gaat om lay-outs die uit de doos komen.
img max-width: 100%;
De standaardregel voor CSS is om een max-width-eigenschap toe te passen op alle afbeeldingen. Omdat ze altijd op 100% worden ingesteld, merk je nooit vervormingen op. Wanneer de gebruiker het formaat van zijn browservenster kleiner maakt dan de afbeelding aankan, wordt het automatisch opnieuw aangepast tot de breedte van 100% is verkleind. Het probleem is dat Internet Explorer deze eigenschap niet kan begrijpen. U moet dus een IE-specifieke stylesheet samenstellen breedte: 100%;.
Flexibele afbeeldingen zijn ook mogelijk als u JavaScript- of jQuery-plug-ins gebruikt. Er zijn een aantal echt slimme ontwikkelaars die de tijd hebben genomen om ongelooflijk responsieve beeldinhoud te bouwen. Deze thread is slechts een van de vele in Stack Overflow met een bizarre en toch handige benadering voor het oplossen van de IE6 / 7-bugs.
Ik zou persoonlijk aanbevelen om het formaat van de CSS-afbeelding te wijzigen. Als uw website wordt uitgevoerd in een mobiele browser waarvoor JavaScript is ingeschakeld, kan dit waarschijnlijk ook CSS ondersteunen. Als je echt dieper wilt graven, bekijk dan dit 24 manieren artikel Images for Adaptive Designs ...
Ontwerpen aanraken
Webontwikkelaars vergeten misschien dat mobiele gebruikers niet meer op toetsenborden zoals BlackBerry's zijn. Een groot aantal smartphones maakt tegenwoordig gebruik van touchscreen-interfaces, waardoor een ander scenario verschilt van muis- en toetsenbordinstellingen.
Daarom moet u andere oplossingen in mobiele elementen overwegen. Dropdown-menu's kunnen beter werken als ze als één menu aan de rechterkant worden weergegeven. De meeste gebruikers kunnen links gemakkelijker tikken dan links, maar beide kolommen werken om de ruimte te verlichten. Met behulp van marge-inspringen, is het eenvoudig om de koppelingshiërarchie te identificeren zonder enige jQuery-code te vereisen.
Het is ook een goede gewoonte om de omvang van deze navigatielinks te vergroten. Mobiele gebruikers hebben niet de luxe van grote schermen op desktops of zelfs laptopcomputers. U moet de tekst ten allen tijde groot, up-front, tapbaar en leesbaar houden. U kunt zelfs het formaat wijzigen als de gebruiker overschakelt tussen de staande en liggende weergave - een redelijk vaak terugkerende herhaling tijdens het browsen op het mobiele web.
Aangepaste CSS-lay-outs
Over het algemeen is het het beste om uw lay-out aan te passen en natuurlijke afbraak van uw inhoud toe te staan. Als u een zijbalk en inhoudsgebied heeft, moet u deze in percentages of ems-breedten instellen, alles wat opnieuw wordt aangepast met het browservenster. Als u een min-width dit zal uiteindelijk een deel van de lay-out afbreken; dus nu wordt de inhoud van uw zijbalk boven de pagina-inhoud weergegeven.
(Afbeeldingsbron: Pepperson)
Wanneer u bedenkt hoe dit het algehele ontwerp beïnvloedt, is het een stuk eenvoudiger om externe stylesheets te ontwikkelen. U zult echter waarschijnlijk schermresoluties tegenkomen die gewoon te klein zijn om door uw lay-out te renderen. Dit is het perfecte scenario voor het toevoegen van aangepaste CSS-eigenschappen om delen van de pagina te verwijderen of om de inhoud helemaal opnieuw te formatteren.
Schakel extra inhoud in of uit
Voorbeelden van grote inhoudsblokken zijn webformulieren, dynamische menu's, afbeeldingsschuifregelaars en andere soortgelijke ideeën. In plaats van deze elementen volledig te verwijderen naarmate de lay-out kleiner wordt, waarom niet gewoon verbergen in een “geminimaliseerd” inhoud div? U kunt CSS of JavaScript gebruiken om de bewerkingen uit te voeren, maar uiteindelijk zult u waarschijnlijk een bepaalde JS-code nodig hebben om een schakelknop te maken.
Dit alternatief is perfect om uw startpagina dynamisch en vol met rijke webmedia te houden. In plaats van de vervolgkeuzelavigatie volledig te verwijderen of de paginastructuur opnieuw in te delen, kunt u deze verbergen binnen een content-div. Als de gebruiker uw links wil weergeven, tikt u op een schakelknop om het menu te openen / sluiten.
Deze opmaak is eenvoudig, intuïtief en gemakkelijk om mee te werken op touchscreen-apparaten. Binnen de div kunt u elk van de vervolgkeuzemenu's naast elkaar plaatsen in een kolomindeling. Naarmate het formaat van het venster nog kleiner wordt, zullen ze vanzelf onder elkaar vallen en de paginahoogte vergroten. Toch is de optie om het hele menu in te klappen gemakkelijk te bereiken en slechts een enkele tik verwijderd. Deze toggle div is ook perfect voor beeldschuifregelaars in combinatie met dynamische aanpassing van de foto's.
Mediaquery's gebruiken
Als een mobiel scherm je lay-out met 2 of 3 kolommen onderbreekt, kom je terecht in elk van de inhoudsgebieden die boven elkaar zijn gestapeld. De hele site lijkt te bloeden en kan erg verwarrend zijn zonder onderscheid te maken tussen blokgebieden. Een beter idee is om een onderrand toe te voegen aan elke kolom, alleen voor mobiele apparaten, met behulp van een externe stylesheet zoals mobile.css.
Met deze nieuwe stijlen wordt je inhoud opgedeeld in deelbare secties. Het media-attribuut hierboven is speciaal ontworpen om oudere iPhone-apparaten in de liggende weergave te richten. Maar het is ook van toepassing op apparaten met schermen kleiner dan 480 pixels. Gebruik dit in uw voordeel, zodat u kunt bepalen op welk punt de lay-out “uit elkaar gaan”.
Er zijn nog enkele opties die u kunt gebruiken voor het detecteren van de richting van het apparaat. Deze fantastische gids over CSS-media kan u een paar ideeën geven. Daarnaast biedt het nieuwe mobiele project 320 en hoger een standaardplaatje voor mobiele CSS @media stijlen. Deze kunnen rechtstreeks in hetzelfde mobile.css-bestand worden opgenomen en regels voor veel verschillende apparaten toepassen.
/ * Smartphones (staand en liggend) ----------- * / @media alleen scherm en (min-apparaat-breedte: 320px) en (max-apparaat-breedte: 480px) / * stijlen * / / * Smartphones (liggend) ----------- * / @media alleen scherm en (min-breedte: 321px) / * Stijlen * / / * Smartphones (portret) ---- ------- * / @media only scherm en (max-width: 320px) / * Styles * / / * iPads (portret en landschap) ----------- * / @ alleen media-scherm en (min-device-width: 768px) and (max-device-width: 1024px) / * Styles * /
(Bron: Hardboiled CSS3 Media Queries)
Handige tools
- Skelet - Mooie ketelplaat voor responsief mobiel ontwerp
- Van adaptief naar volledig responsief
Vitrine: mooie responsieve ontwerpen
Ik hoop dat deze tips en ontwerptechnieken je zullen aanmoedigen om te gaan werken aan het ontwikkelen van spannende, responsieve lay-outs, niet alleen voor mobiele schermen, maar voor elk gebruikelijk apparaat met surfen op het web. Om de creatieve sappen te laten stromen heb ik een kleine showcase van responsieve mobiele webontwerpen samengesteld. Zorg ervoor dat u enkele van de meer unieke functies bekijkt en deel uw mening over het ontwerp of het onderwerp in het discussiegebied.
de maan ophangen
Macdonald Hotels
CSS-Tricks
Happy Cog
Teixido
CSS-tovenaar
Informatie Architecten
ART = WORK
Hardboiled webontwerp
Sony USA
Toekomst vriendelijk
We kunnen niet stoppen met denken
Authentieke banen
Colbow-ontwerp
320 en hoger
Vork CMS
De Happy Bit
Elektrische pulp
Foster rekwisieten
Plexical
Preeti Cakes
Meer gevaren
Informatiecentrum voor tandheelkunde
ribot - interfaceontwerp
Hallo Fisher
Social Marketer's Summit
William Csete
Wollige robot
Meltmedia
Blijf kijken!
In de post van morgen zullen we een aantal demonstreren gratis responsieve WordPress-thema's je kunt downloaden voor gebruik. Zorg dat je daar op afstemt.
