Vertaling van het uiterst waardevolle artikel "Responsive Web Design Techniques, Tools and Design Strategies" van de populaire online publicatie voor ontwikkelaars Smashing Magazine.

In januari publiceerden we een artikel over responsief ontwerp, "Responsive webdesign: wat het is en hoe het te gebruiken". Responsief webdesign blijft veel aandacht trekken, maar als je bedenkt hoe verschillend het is van traditionele methoden voor websiteontwikkeling, kan het overweldigend moeilijk lijken voor ontwerpers en ontwikkelaars die het nog niet hebben geprobeerd.

Om deze reden hebben we een overzicht samengesteld van bronnen die handig zijn bij het maken van responsieve sites. De beoordeling bevat gedetailleerde handleidingen, benaderingen, tools, artikelen met het praktische advies dat u nodig hebt om uw eigen responsieve website te maken.

Responsieve webontwerptechnieken

1. CSS-overgangen en mediaquery's
CSS-overgangen en mediaquery's

Elliot Jay Stocks beschrijft de methode voor het combineren van CSS Media Queries en CSS-overgangen. Het basisidee is dit: wanneer je een responsieve site ontwikkelt met Media Queries, verander je constant de breedte van je browser om te zien hoe de site zich daarbij gedraagt. Maar elke keer dat een van uw mediaquery's wordt uitgevoerd, ziet u een harde overgang tussen stijlen (de eerste bijvoorbeeld voor desktops, de tweede voor tablets). Waarom geen CSS-overgangen gebruiken om die harde overgangen met animatie glad te strijken?

Responsieve afbeeldingen en video's

5. Vloeiende beelden
Rubberachtige afbeeldingen (browserschaling)

Rubberachtige afbeeldingen zijn een van de centrale thema's in responsive webdesign. Zie het artikel van Ethan Marcotte voor een gedetailleerd overzicht van hoe je ze kunt maken met het klassieke codefragment img (max-breedte: 100%;), evenals alle benodigde onderdelen die nodig zijn om aan de slag te gaan.

Responsieve e-mails

14. Uw e-mail optimaliseren voor mobiele apparaten met de mediaquery
E-mail optimaliseren voor mobiele apparaten met mediaquery's

Grote e-mails vereisen vaak horizontaal scrollen om te bekijken, vooral wanneer de e-mail een grote afbeelding heeft als bijlage. In dit onderzoek legt Campaign Monitor uit hoe e-mails kunnen worden geoptimaliseerd voor mobiele apparaten met behulp van Mediavragen en stelde enkele nuttige methoden en codefragmenten voor om in de praktijk te gebruiken.

Responsieve webontwerptools

Je kunt ontwerpen adaptief ontwerp helemaal opnieuw of gebruik de onderstaande tools om het creatieproces te versnellen en te vereenvoudigen.

Dit is een snelle en lichtgewicht Polyfill (een codefragment dat functionaliteit toevoegt die niet door de browser wordt ondersteund) gemaakt door Scott Jehl ter ondersteuning van de min-width en max-width-eigenschappen van CSS3 Media Queries in IE6-IE8 en hoger.

Gebruik de informatie in deze kleine tool om een ​​responsieve website te maken.

Een tool voor rapid prototyping van responsive design. U kunt CSS ontwerpen voor verschillende populaire schermformaten, oriëntaties en browsers, of het nu gaat om telefoons (BlackBerry Torch, Google Nexus One, iPhone, Motorola Droid), tablets (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitoren of tv's (720p, 1080p).

U kunt de ontwerpresultaten direct in de browser bekijken en de ontwikkeltools gebruiken waarmee u vertrouwd bent, zoals Firebug. Probeer ook de alternatieve tool ScreenFly.

De tool 320 en hoger is gebaseerd op het principe: mobiel eerst(mobile first), waarbij eerst ontwerpen worden gemaakt voor mobiele schermen en vervolgens worden uitgebreid naar tablets, desktops en grote schermen. Het werkt goed als een add-on voor de HTML5-boilerplate en als een stand-alone.

Dit zijn aanpasbare sjablonen voor het bouwen van uitgebreide, krachtige mobiele webapplicaties. U krijgt compatibiliteit tussen verschillende browsers voor klasse A-smartphones en goede ondersteuning voor oudere BlackBerry, Symbian en IE Mobile. En ook een groot aantal verschillende optimalisaties voor mobiele browsers.

Kaders voor responsief ontwerp

33.1140 CSS-raster

1140 CSS Grid is geoptimaliseerd om te werken op schermen van mobiele apparaten tot monitoren van 1280px breed. Het is een eenvoudig en flexibel raster dat gebruik maakt van Mediavragen.

Dit CSS-framework is een goede basis voor het ontwikkelen op kleine schermen (zoals telefoons) en kleine schermen (zoals tablets), direct uit de doos met minimale inspanning. Daarnaast is er een generator om zelf een vloeiend CSS-framework te creëren.

Flurid is een rubberen net met 6, 7, 8, 9, 10, 12 en 16 kolommen.

FluidGrids is een modulaire rastergenerator die lay-outs van 6, 7, 8, 9, 10, 12 of 16 kolommen maakt.

CSS-framework voor het maken van responsieve lay-outs. Het bevat 4 basislay-outs en 3 typografiesets.

Een vloeiend kader met de nadruk op typografie.

Tiny Fluid Grid helpt je bij het maken van je eigen rubberen raster met 12, 16 of 24 kolommen, hun maximale en minimale breedte en inspringing in procent in te stellen.

Responsieve ontwerpstrategieën

40. De workflow van de responsieve ontwerper
Responsieve workflow voor webdesign-ontwikkelaars

Luke Wroblewski schetste een presentatie van Ethan Marcotte over de toepassing van responsieve webontwerpprincipes op het herontwerp van de website van een toonaangevende krant. Ethan legt onder meer uit hoe hij de ontwerpmethodologie van responsive webdesign benadert en hoe prototyping eruitziet in de context van responsive webdesign.

Luke Wroblewski maakte aantekeningen op de Breaking Development Conference tijdens Stephen Hay's lezing over de realiteit van het ontwerpen voor verschillende apparaten.

Discussies en verschillende perspectieven op responsive webdesign

Deze artikelen, hoewel het geen tutorials zijn, kunnen u waardevol inzicht geven in waarom (en wanneer) u responsieve webontwerptechnieken zou moeten gebruiken.

Een uitstekende introductie tot responsive design als een manier van denken, niet als een tool of techniek. Jeremy Keith stelt dat responsive webdesign niet zomaar als stap kan worden toegevoegd aan een bestaande workflow. In plaats van te streven naar pixelperfectie, moeten we streven naar proportionele perfectie.

Publiceren is een combinatie van filosofie en strategie voor het verzamelen van best practices op het gebied van responsive design.

Een regelmatig bijgewerkte verzameling websites die Media Queries gebruiken.

In aflevering 9 van The Big Web Show nodigden Jeffrey Zeldman en Dan Benjamin Ethan Marcotte uit om over responsive design te praten.

Een mooie aanvulling op dit artikel is een blog over responsive design, waar ontwikkelaars hun ervaringen delen en reviews schrijven over responsive tools.

responsive webdesign

reagerend ontwerp

css3

Tags toevoegen

De laatste tijd worden er steeds meer technologieën en verschillende apparaten (tablets, smartphones, monitoren) ontwikkeld met behulp waarvan sites worden bekeken.

Op het gebied waarvan we een grote verscheidenheid aan verschillende schermresoluties krijgen, wat op zijn beurt leidt tot de moeilijkheid om informatie van sites te verkrijgen. Om de informatie op de meeste apparaten goed leesbaar en goed zichtbaar te maken, is adaptieve ontwerptechnologie ontwikkeld.

Het doel van responsief ontwerp is om een ​​universeel website-ontwerp te ontwikkelen, waarmee u de bron vanaf verschillende apparaten kunt bekijken en ermee kunt werken.

En deze technologie omvat ook de ontwikkeling van één versie van de website voor alle apparaten, en niet meerdere.

Responsief webdesign(Engels Adaptive Web Design) - ontwerp van webpagina's dat zorgt voor de juiste weergave van de site op verschillende apparaten die met internet zijn verbonden en zich dynamisch aanpast aan de gegeven afmetingen van het browservenster.

Basisprincipes van responsive design:

• Responsieve websitesjabloon, het vermogen van de sjabloon om zich aan te passen aan verschillende schermresoluties van apparaten, van een computermonitor tot een smartphone;
• Contentblokken aanpassen en verplaatsen, het vermogen van inhoudsblokken, afhankelijk van de schermresolutie van het apparaat, om de vereiste afmetingen aan te nemen, evenals de mogelijkheid om naar een andere positie in de lay-out te gaan;
• Afbeeldingen aanpassen, het vermogen van afbeeldingen om het formaat te wijzigen afhankelijk van de schermresolutie of om een ​​meer aangepaste afbeelding te laden met minder gewicht en grootte;
• Flexibel gaas gebruiken, hiermee kunt u snel het ontwerp van de lay-out wijzigen;
• Minder belangrijke blokkades verbergen, op kleine schermen kunnen sommige blokken verborgen zijn;
• Herontwerp van de bruikbaarheid van navigatie-elementen, aangezien op mobiele apparaten, vanwege de lage resolutie, navigatie-elementen minder klikbaar worden, worden ze herwerkt, waardoor ze gemakkelijk te gebruiken zijn;
• Een aantal elementen op een webpagina vereenvoudigen, sommige elementen zijn vereenvoudigd voor gebruik op mobiele apparaten;
• Aanpassing van video-inhoud, moet u ook rekening houden met de aanpassing van de video;
• Mediaquery's gebruiken(mediaquery), hiermee kunt u een responsieve lay-out maken;
• Mobiel eerst(mobile first), het ontwerpen van responsieve ontwerpen begint met een mockup voor mobiele apparaten.

Wat betreft het laatste punt, of het goed is of niet, is een moeilijke vraag, althans velen beweren dat het nodig is om een ​​lay-out te ontwikkelen met een versie voor mobiele apparaten. Ik hou het op een iets andere opvatting, het is voor mij makkelijker om een ​​layout te ontwikkelen voor de maximale resolutie met een goed doordacht raster en volledige functionaliteit, en deze dan pas aan te passen aan andere resoluties.

Responsieve ontwerplay-outformaten

Enige tijd geleden in 2012 schreef ik een kort artikel over welke te kiezen bij het ontwikkelen van een ontwerp - een lay-out van een vaste site. Dit artikel kreeg veel belangstelling van lezers, het blijkt dat dit nummer interessant is voor veel beginnende ontwerpers en ontwikkelaars. In dit verband heb ik in dit artikel ook besloten om dit probleem onder de aandacht te brengen.

Dus puur vanuit mijn eigen visie schets ik het principe en de afmetingen waarvoor de lay-out ontwikkeld moet worden.

Als je eerst het principe van mobiel volgt, dan zullen er resoluties zijn waarvoor het nodig is om een ​​lay-out te ontwikkelen 320px / 480px / 768px / 1024px / 1280px misschien hangt meer af van de taken.

De afbeelding ziet er ongeveer zo uit, maar vaak is het voor een bepaalde resolutie niet nodig om een ​​lay-out te maken, bijvoorbeeld voor 480px. als de lay-out niet tussendoor breekt 768 - 320 pixels.

Natuurlijk zullen we een canvas maken in Photoshop, rekening houdend met opvulling, schuifbalken en al het andere, net als een normale lay-out. voor gemakkelijke ontwikkeling en een sneller lay-outontwerp. Veel mensen gebruiken frameworks in hun werk en vertrouwen daarom op het raster van het framework waarop ze zich ontwikkelen.

Hierdoor kunnen we de lay-outontwerper laten zien hoe de lay-out zich zal gedragen op verschillende schermresoluties en apparaten. Ik heb bijvoorbeeld een kleine lay-out geschetst, je kunt het zien op de onderstaande schermafbeelding.

Mediaquery en viewport in responsief ontwerp

Om de browser te vertellen hoe de paginagrootte moet worden weergegeven en de schaal moet worden gewijzigd, wordt de viewport-metatag gebruikt. Deze metatag is geschreven in plaats. Hiermee kunnen ontwikkelaars de schermbreedte voor apparaten instellen, die is geschreven in css.

De viewport-metatag is als volgt geschreven:

• breedte = apparaatbreedte- betekent dat de breedte van de sitepagina wordt ingesteld in overeenstemming met de breedte van het scherm van het apparaat.
• beginschaal = 1,0- dit attribuut zal de browser vertellen om een ​​schaalovereenkomst van 1: 1 in te stellen voor pixels, wat betekent niet te schalen.

Links zonder metatag, rechts met viewport-metatag.

Ook kunnen andere attributen en parameters worden ingesteld voor de metatag.

Mediavragen

CSS3 speelt een grote rol bij de ontwikkeling van responsieve websites mediavragen(mediavragen). Mediaquery's omvatten mediatype (printers, smartphones, schermen, tv's, projectoren, enz.) en voorwaarden, die waar of onwaar (waar, onwaar) kunnen zijn. Er worden verschillende CSS-stijlen toegepast, afhankelijk van of het mediatype correct is en of aan de voorwaarde wordt voldaan. Als het waar is, worden de stijlen die in deze mediaquery zijn gespecificeerd, toegepast, als het onwaar is, worden de gebruikelijke CSS-stijlen toegepast.

Dankzij dergelijke verzoeken worden verschillende weergaven van de site gemaakt, voor mobiel, tablet en monitorschermen. Ondersteund door alle moderne browsers.

Het is als volgt geschreven:

@media-scherm en (max-breedte: 1000px) (.class (property: waarde;))

• @media- mediavraag;
• scherm- media - type (ook wel mediatype genoemd);
• maximale breedte: 1000px- de voorwaarde waaraan moet worden voldaan (in ons geval worden de stijlen toegepast als de vensterbreedte kleiner is dan 1000px);
• . klas- de bijbehorende selectors (klassen, id) worden geregistreerd waarin nieuwe waarden worden toegekend aan de eigenschappen.

In de meeste gevallen worden de volgende mediafuncties gebruikt om responsieve ontwerpen te ontwikkelen.

• max-breedte: breedte- betekent dat als de breedte van het browservenster kleiner is dan de opgegeven breedte, aan de voorwaarde is voldaan en de bijbehorende stijlen worden toegepast (voorbeeld: max-width: 768px, betekent dat als de breedte van het browservenster kleiner is dan 768px , dan moeten de stijlen worden gebruikt die in het mediaverzoek zijn gespecificeerd).
• min-breedte: breedte- betekent dat als de breedte van het browservenster groter is dan de opgegeven breedte, aan de voorwaarde is voldaan en dat de opgegeven stijlen worden toegepast in het verzoek (voorbeeld: min-breedte: 480px).

Maar er kunnen ook andere functies worden gebruikt: kleur, apparaatbreedte, raster, hoogte, oriëntatie: liggend, oriëntatie: staand, resolutie en andere.

De waarden die worden gebruikt in mediafuncties worden ook wel aangeduid als breekpunten(tipping points of checkpoints). Op deze breekpunten, je raadt het al, verandert het ontwerp van de site.

• 320px- mobiel
• 480px- mobiel
• 768px- tabletten
• 1024px- tablets, netbooks
• 1280px en meer - personal computers.

Besturingspunten zijn mogelijk niet star gebonden aan een bepaalde schermresolutie, omdat ze kunnen worden gemaakt met verschillende parameters in die waarden waar de lay-out zichtbaar wordt verbroken, onjuist wordt weergegeven en niet meer correct wordt weergegeven.

Logische operators worden ook gebruikt in mediaquery's, zoals:

• en- logische AND, gebruikt om verschillende voorwaarden te combineren (bijvoorbeeld: @media print en (kleur) (...)).
• niet- logische NOT, gebruikt om een ​​voorwaarde te ontkennen (voorbeeld: @media niet allemaal en (kleur) (...)).
• enkel en alleen- gebruikt voor oudere browsers die geen mediaquery's ondersteunen (bijvoorbeeld: @media only screen en (max-width: 1300px) (…)).

Mediaquery's worden aan het einde van de stylesheet geschreven, tenslotte de belangrijkste CSS-stijlen.

Hoe maak je een responsive website-ontwerp vanuit een vaste lay-out

Stel dat u een websitethema met een vast formaat heeft dat u wilt behouden en een responsieve lay-out wilt maken, maar niet weet waar u moet beginnen. Vervolgens zal ik u vertellen hoe dit kan, of het uberhaupt kan, wat er moet gebeuren en waar u moet beginnen.

1. Allereerst maken we een reservekopie van de sjabloon (thema), voor het geval dat.
2. Vervolgens hebben we een programma nodig voor het bewerken van css, het kan elke code-editor zijn, bijvoorbeeld haakjes van adobe, het is gratis of Notepad ++.
3. En ook de Google Chrome-browser, met zijn code-inspecteur (aangeroepen door de F12-toets).

Laten we vervolgens beginnen met bewerken, voor het gemak kunt u de sjabloon overbrengen naar Denver (lokale server) of naar een subdomein, omdat dit voor iedereen handiger is, zodat gebruikers niet alle bewerkingen zien die met de lay-out zullen plaatsvinden. Laten we allereerst de viewport-metatag toevoegen, ik heb er hierboven over geschreven zoals aanbevolen.
Vervolgens moeten we alle statische meeteenheden converteren naar relatieve eenheden.

Dat zijn px, je moet ze vertalen naar% en de lettertypen instellen op em. Het gaat daarbij vooral om breedtes en lettertypen.

Laat de breedte van de hoofdcontainer-wrapper (max-width: 960px;) ongewijzigd, indien geschreven, verander de breedte in max-width. Voor de rest van de containers zullen we de breedte wijzigen in de%-verhouding. We vertalen volgens de formule:

Containergrootte (px) / grootte van hoofdcontainer (ouder) in (px) * 100% = resultaat (%)

Een body-container voor een statische site is bijvoorbeeld 720px, de grootte van de hoofdcontainer (de ouder), bijvoorbeeld de standaard 960px, dan krijgen we de volgende 720/960 * 100 = 75%.

Daarom zullen we onze statische lay-out converteren naar een rubberen lay-out. Vervolgens zullen we onze lettertypen vertalen, als ze in px v em gebruik hiervoor opnieuw de formule:

Lettergrootte (px) / 16px (standaardgrootte) = lettergrootte (em)

Lettergrootte is bijvoorbeeld 32px, dan 32/16 = 2em.
Dan maken we onze afbeeldingen responsive. Om dit te doen, zullen we de volgende eigenschappen en waarden in css schrijven.

Img (max-breedte: 100%; hoogte: auto;)

Deze methode past afbeeldingen goed aan, het enige dat het gewicht van afbeeldingen niet vermindert, wat betekent dat afbeeldingen met een groot gewicht op mobiele apparaten worden geladen. Om dit te voorkomen, is het noodzakelijk om verschillende afbeeldingen te laden, afhankelijk van de schermgrootte.

Nadat je al deze wijzigingen hebt aangebracht en je alles correct hebt aangebracht, zou er niets op de site moeten veranderen, en als je probeert de browservensters te verkleinen, zouden het ontwerp en de afbeeldingen moeten krimpen.

Welnu, nu is onze basis klaar, nu is het noodzakelijk om de controlepunten te bepalen waarop de lay-out zal worden herbouwd, na te denken over hoe de blokken zich zullen gedragen, wat we zullen verbergen en dit allemaal op te nemen in mediaquery's. We zullen deze kantelpunten bepalen met behulp van de Google Chrome-browser.

Laten we onze lay-out erin openen, druk op de toets F12 en we zullen de grootte van het browservenster verkleinen. In de rechterbovenhoek zullen we de grootte van het venster schrijven, we zijn geïnteresseerd in de eerste waarde, deze geeft de breedte aan. Het is noodzakelijk om te krimpen totdat het ontwerp niet meer correct wordt weergegeven. Bij de grootte wanneer de lay-out er niet goed uitziet, zullen we een breekpunt maken.
Nadat we het eerste buigpunt hebben geïdentificeerd, zullen we het helemaal aan het einde naar het bestand style.css schrijven na alle hoofdstijlen. Laten we zeggen dat onze lay-out een linkerzijbalk heeft en een inhoudsgedeelte met aankondigingen, en bij 910px begint de site onjuist weer te geven. In dit geval zullen we de volgende mediaquery opnemen.

@media only screen en (max-width: 910px) (/ * we maken de inhoud deels over de volledige breedte, annuleren de uitlijning * / sectie (breedte: 100%; float: none;) / * we maken ook de zijbalk over de volledige breedte, uitlijning annuleren * / opzij (breedte: 100%; zwevend: geen;))

Als deze blokken marges of opvulling hebben, moeten ze op nul worden gezet of in aanmerking worden genomen bij het schrijven van de breedte. Bijvoorbeeld, vulling: 2%; dan wordt de breedte als volgt geschreven: breedte: 96%;.

Daarom hebben we onze lay-out aangepast tot minder dan 910px. Als het browservenster kleiner is dan 910px, wordt de inhoud de volledige breedte en valt de zijbalk onder het inhoudsgedeelte en wordt ook de volledige breedte.

Volgens hetzelfde principe maken we de rest van de controlepunten, vinden de breedte waarop de lay-out breekt (ziet er niet correct uit), schrijven de mediaquery op, vormen er stijlen voor, stellen de breedte van de blokken in, we kunnen verbergen minder belangrijke blokken ( Geen weergeven).

Zoals je hebt gemerkt, zullen in dit voorbeeld de breekpunten niet strak aan de schermformaten worden bevestigd, wat op zijn beurt een goede weergave van de site op verschillende apparaten garandeert, ongeacht hun resolutie.

Je zult hard moeten werken, maar het resultaat laat niet lang op zich wachten en je kunt zelfstandig een responsive website-ontwerp maken vanuit een vaste lay-out.

Nou, dat lijkt alles te zijn wat ik in dit artikel wilde vertellen, ik wilde iets schrijven over responsief ontwerp, maar het bleek behoorlijk volumineus te zijn, ik hoop dat het materiaal nuttig voor je zal zijn.

Dag iedereen! Onlangs, toen ik de statistieken van een van mijn projecten had bekeken, realiseerde ik me dat het tijd was om te leren hoe je een responsief website-ontwerp kunt maken, dat wil zeggen een ontwerp dat er goed uitziet op zowel vaste computers en laptops als op mobiele apparaten. Kijk zelf maar, zegt Metrica.

Wat vind je van deze foto? Misschien zal bij sommige onderwerpen het percentage mobiel verkeer lager zijn, in andere meer, maar in ieder geval is het niet meer mogelijk om de bezoekers die je lezen vanaf een smartphone of tablet te negeren.

Weet u hoe mobiele gebruikers uw website zien? Gelukkig is er een uitstekende controleservice - responsinator.com

Alles is hier waanzinnig eenvoudig - u voert het websiteadres in en ziet hoe het eruitziet op mobiele apparaten. Laten we als voorbeeld een blog bekijken die iedereen waarschijnlijk kent.

Alexander Borisov heeft een prachtige template, je ziet direct dat er geld is geïnvesteerd in het ontwerp en de lay-out, en niet een beetje geld. Het is echter erg onhandig om een ​​blog vanaf een telefoon te lezen, en het zou me niet verbazen als het bouncepercentage onder mobiele gebruikers veel hoger is dan bij degenen die de site vanaf een computer bezoeken.

Wat te doen? Er zijn twee uitwegen: laat alles zoals het is en kijk hoe andere projecten de jouwe omzeilen in de zoekresultaten van zoekmachines, of maak je website-ontwerp responsive.

Wat is responsief ontwerp?

In het begin zag ik het verschil niet tussen responsieve en vloeiende lay-outs, wanneer de grootte van de blokken verandert afhankelijk van de breedte van het scherm. Er is echter een verschil.

Responsief ontwerp rekt of krimpt niet alleen in de breedte, het past zich aan het scherm aan en verandert soms de stijl van de dozen volledig.

Het eenvoudigste voorbeeld: het inhoudsgebied wordt uitgerekt tot de volledige breedte van het scherm en de zijbalk wordt ofwel naar beneden verplaatst of verdwijnt helemaal van de pagina. Of het menu verandert van de gebruikelijke horizontale in een vervolgkeuzelijst.

Hoe maak je een responsive design voor je website

Afhankelijk van uw budget en kennis van CSS/HTML kunnen er meerdere opties zijn.

Een responsive layout bestellen bij een freelancer

De meest correcte, naar mijn mening, optie, en het is ook de meest onpopulaire. Omdat het plezier niet goedkoop is. En toch, als het geld het toelaat, en er is geen behoefte om de fijne kneepjes van de lay-out te begrijpen, is het beter om een ​​studio of freelancer te vinden die je sjabloon aanpast voor mobiele apparaten of een nieuwe maakt. En u weet al hoe u het werk kunt controleren op apparaten met verschillende resoluties - responsinator.com helpt u daarbij.

Vind een afgewerkt ontwerp

De laatste tijd proberen bijna alle ontwerpers hun sjablonen aan te passen voor mobiele apparaten. U kunt bijvoorbeeld hier zoeken naar een kant-en-klaar ontwerp:

• www.templatemonster.com is een van de meest populaire verzamelingen betaalde sjablonen voor verschillende CMS- en alleen HTML-sites.
• www.templatemo.com - Veel gratis moderne ontwerpopties.

Deze optie is geschikt voor degenen die niet op zoek zijn naar een exclusief ontwerp of die hun eigen wijzigingen in de code kunnen aanbrengen om de sjabloon uniek te maken.

Gebruik kaders

Kader (framework) - je kunt het skelet van de sjabloon, de hoofdbestanden en het raster van blokken zeggen. Ontwerpers houden van ze vanwege hun gebruiksgemak en tijdbesparing, omdat de kant-en-klare "vis" van de sjabloon u in staat stelt geen tijd te verspillen aan routine. Als je weet hoe je met frameworks moet werken, is het een geweldige oplossing om ze te gebruiken om responsieve ontwerpen te maken.

Je vindt een enorme lijst met responsieve frameworks voor elke smaak op Habré. Maar de meeste zijn vrij moeilijk te gebruiken en zwaar in volume. Daarom raad ik, voor degenen die van minimalisme houden, een andere lijst met lichtgewicht responsieve frameworks van Beloweb.com aan. Kijk tegelijkertijd eens goed naar de blog, er zijn veel nuttige "snoepjes" voor ontwerpers en lay-outontwerpers.

Zelf lay-out maken

Deze methode is voor degenen die niet op zoek zijn naar gemakkelijke manieren en het zelf willen uitvinden. Kortom, om uw sjabloon responsief te maken, moet u twee dingen gebruiken:

De viewport-metatag
Die bepaalt vanaf welk type apparaat de bezoeker de site is binnengekomen en stelt de juiste schermbreedte in. Kopieer deze code gewoon in de kop van uw site.

@Mediaregel
Hierdoor kunnen we verschillende stijlen voor dezelfde blokken in ons css-bestand schrijven. Het ziet er zo uit:

#left (breedte: 600px; float: left; margin-right: 10px;) #right (width: 400px; float: right;) @media only screen and (max-width: 1010px) (#left, #right (breedte : 98%; zwevend: geen; marge: 10px automatisch;))

In dit voorbeeld is het blok #links is 600 pixels breed en wordt links van het blok geplaatst #Rechtsaf 400 pixels breed. Maar als de monitorresolutie lager is dan 1010 pixels, verwijderen we de verpakking van beide dozen en rekken ze uit tot 98% van de schermbreedte.

En op deze manier moet je de regels schrijven voor de volgende schermformaten:

• 320px voor iPhone 3-5 rechtop
• 480px voor iPhone 3-4 horizontaal
• 568px voor iPhone 5 horizontaal
• 384px voor smartphone in verticale positie
• 600px voor smartphone in horizontale positie
• 768px voor iPad in horizontale positie
• 1024px voor iPad rechtop

Een volledige lijst met resoluties is te vinden op responsinator.com of in het Yandex.Metrica-rapport voor uw site (sectie Technologieën / Weergaveresoluties). Kortom, voor degenen die bekend zijn met de lay-out van sites, zal het niet moeilijk zijn om dit probleem te begrijpen.

Weet je, ik link zelden naar betaalde cursussen (omdat ik nooit iets aanbeveel dat ik zelf nog nooit heb gebruikt), maar dit is echt de beste lay-outhandleiding die ik ooit heb gezien. Het is dankzij Mikhail dat mijn blogsjabloon nu niet alleen is aangepast aan verschillende schermresoluties, het is lichter geworden dan de vorige versie en is beter geoptimaliseerd voor zoekmachines.

Trouwens, als je een artikel leest vanaf een mobiele telefoon, schrijf dan: is alles op zijn plaats, is alles handig? En dat was alles voor vandaag. Als je vragen of aanvullingen hebt - welkom bij de opmerkingen, ze staan, zoals gewoonlijk, open voor iedereen.

Van de auteur: Responsief website-ontwerp is een geheel nieuwe benadering van ontwerp die steeds meer aandacht krijgt, maar gezien hoe verschillend het is van traditionele ontwikkelingsmethoden, kan het in eerste instantie ontmoedigend moeilijk lijken voor aspirant-webontwerpers en -ontwikkelaars. In dit artikel ga ik enkele van de belangrijkste punten belichten met betrekking tot de ontwikkeling en implementatie van responsief webdesign en uw leven een beetje gemakkelijker maken, vrienden.

De klassieke benadering van het maken van een website ziet er ongeveer zo uit: een ontwikkelingsblok, een webdesignblok, een lay-outblok, enz. De afgelopen jaren is alles echter drastisch veranderd: de term "webdesign" wordt geleidelijk vervaagt, terwijl 'adaptief ontwerp' zijn positie verraderlijk versterkt en geleidelijk verschuivingen veroorzaakt in de hoofden van specialisten.

Over het algemeen moet webdesign niet zo eenduidig ​​worden opgevat, en de snelle ontwikkeling van responsive design, dat al als bijna een industriestandaard wordt beschouwd, heeft geleid tot een hele carrousel van verschillende tools en platforms.

Aanpassingsconcept

"Wat is responsive design en waar past het zich aan aan?" - een onwetend persoon kan vragen. Ik zal u antwoorden: op het type apparaat dat wordt gebruikt. Responsief ontwerp biedt een goede ervaring voor webpagina's op verschillende gadgets die met internet zijn verbonden.

Dezelfde site moet er geweldig uitzien op laptops, smartphones, tablets en meer, ongeacht het schermformaat of de gebruikte resolutie. Tegelijkertijd moet het voor gebruikers net zo handig zijn om door webpagina's te bladeren voor alle formaten, zonder dat bijvoorbeeld afzonderlijke blokken moeten worden uitgevouwen om de gewenste knop niet te missen.

Omdat elk adaptief project individueel en iteratief is, is het nogal moeilijk om al zijn processen te analyseren om oplossingen voor alle gelegenheden te bieden en de werkefficiëntie te verhogen. Er zijn echter algemene succesvolle strategieën en technieken voor het implementeren, verbeteren en creëren van een responsief website-ontwerp dat in bijna elke situatie kan worden toegepast.

Mobile First-strategie

Deze ontwikkelingsstrategie werd in 2009 voorgesteld door Luke Wroblewski, de auteur van boeken en artikelen over webdesign, het hoofd van het sociale netwerk Bagcheck, dat slechts 9 maanden na de oprichting door Twitter Inc. werd overgenomen.

De door Luke Wroblewski voorgestelde ontwikkelingsaanpak wordt om drie redenen "Mobile First" genoemd:

mobiele omgeving stelt u in staat om u te concentreren en de rommel te verwijderen die het gevolg is van veel schermruimte;

de mobiele markt ontwikkelt zich in een razend tempo;

de mobiele omgeving gaat gepaard met vele mogelijkheden (camera, multitouch gebaren, gps, accelerometer, geolocatie).

Sindsdien is webdesign gestaag naar deze benadering verschoven. Veel webdesigners en webontwikkelaars denken eerst na over hoe ze een responsive design van de mobiele versie van de site kunnen maken, en doen daarna aan desktopontwikkeling.

De Mobile First-strategie voorziet als uitgangspunt de creatie van de structuur en inhoud van de mobiele versie die werkt in omstandigheden met lage internetsnelheden, en de overgang naar grote onderbrekingspunten met snellere verbindingen, terwijl de vereenvoudigde versies worden verbeterd en geoptimaliseerd.

Moderne trends en benaderingen in webontwikkeling

Leer het snelle groei-algoritme helemaal opnieuw bij het bouwen van een site

Zo wordt een innovatieve en efficiënte werking van alle soorten apparaten gegarandeerd. Website-ontwikkelaars richten zich op de behoeften van gebruikers, creëren geoptimaliseerde en snelle pagina's, besteden aandacht aan belangrijke inhoud. Trouwens, zelfs Google gebruikt de Mobile First-aanpak.

Contentstrategie "Content out"

Het doel van responsive design is om de beste bruikbaarheid in elke context te bieden. Dit is een goede reden om content te analyseren en gemakkelijk toegankelijk en leesbaar te maken op allerlei soorten apparaten.

Veel van degenen die de mobile first-strategie niet gebruiken, geven de voorkeur aan de content first-strategie. Dit is natuurlijk het juiste om te doen, maar u moet deze oproep niet letterlijk nemen en aannemen dat u niet moet beginnen met de ontwikkeling van het ontwerp voordat alle inhoud klaar is.

Inhoud moet continu worden gemaakt en besproken, zowel in de fase van het maken van een responsief website-ontwerp als na de voltooiing ervan! Zoals de beroemde ontwerper Cennydd Bowles het uitdrukte: "design en inhoud moeten hand in hand gaan." Ze moeten elkaar aanvullen.

De strategie “Content structure first” is een heel andere zaak. Allereerst moet u precies de missie van de site definiëren, wat deze naar de wereld probeert te communiceren. En pas dan goed nadenken over de structuur van de inhoud, de creatiemethoden, het type en het doel van elk element, terwijl het tegelijkertijd de gebruiker is die op de voorgrond moet worden geplaatst.

U moet een voorbereide strategie hebben, waardoor u elke gebruiker in elke fase van zijn reis op uw bron van de nodige inhoud zult voorzien. Uw sitestructuur moet gebaseerd zijn op onderzoek naar het gedrag en de behoeften van uw doelgroep.

Als u uw inhoud goed structureert in de vroege stadia van websiteontwikkeling, kunt u deze in de toekomst gemakkelijk overzetten naar andere platforms en apparaten. Het kan natuurlijk geen kwaad om een ​​voorbeeld van responsief ontwerp te hebben - een sjabloon waar u zich door zult laten leiden.

Neem de tijd om te schetsen en een prototype te maken

Beslissen welke machtigingen voor responsief ontwerp moeten worden gebruikt, moet beginnen met het maken van een georganiseerde lay-out - schetsen, die in de toekomst gemakkelijk te schalen zal zijn.

De verscheidenheid aan apparaten met hun mogelijkheden, resoluties en schermformaten betekent een groot aantal lay-outs. Het maken van een schets zal de basis leggen voor een toekomstig prototype van het project. Met zijn hulp kun je verschillende ideeën ter discussie stellen, ruwe schetsen maken, die de basis zullen vormen van het skelet van de site.

Nadat de schets klaar is, kunt u doorgaan met het maken van een werkende conceptversie van de site of HTML-sjabloon. Dit proces wordt prototyping genoemd en omvat minimaal visueel ontwerp om de interactie en functionaliteit te verbeteren.

Deze strategie helpt je om je hele benadering van responsive design te heroverwegen. In plaats van "mobiele sites" en "websites" te ontwikkelen, gaat u zich nu concentreren op het ontwikkelen van flexibele systemen met een reeks regels die de levering van inhoud en de levering ervan regelen, afhankelijk van de context.

Ik hoop dat dit artikel nuttig was voor zowel ervaren als beginnende webontwerpers.

En tot slot, het traditionele afscheidswoord: maak de site nuttig, handig en vertrouwd, ongeacht het apparaat waarop deze wordt bekeken. Tot de volgende keer, vrienden!

P.S.: heb jij je al geabonneerd op onze blogupdates?

Moderne trends en benaderingen in webontwikkeling

Leer het snelle groei-algoritme helemaal opnieuw bij het bouwen van een site

Iedereen heeft het over responsive webdesign. Maar betekent dit dat iedereen begrijpt waar het voor is?

Responsive design gaat niet alleen over het ontwikkelen van websites voor mobiele apparaten, het gaat over het aanpassen van lay-outs aan verschillende schermformaten (viewports).

In deze zelfstudie bespreken we de basisprincipes achter responsive webdesign voor een beter begrip van deze techniek. Vervolgens gaan we een responsive website maken die goed schaalt op zowel grote als kleine schermen. Responsive webdesign is erg populair geworden bij steeds meer mensen die mobiele apparaten gebruiken zoals iPhone, iPad, BlackBerry en andere smartphones en tablets met internettoegang.

Het is belangrijk om te begrijpen dat de site niet moet worden gebouwd voor een specifieke desktop of mobiel apparaat. Belangrijk hierbij is de mogelijkheid van de lay-out om zich aan te passen aan verschillende formaten.

Frustratie van de gebruiker

Sommige mensen denken dat het normaal is voor de gebruiker om te bezuinigen op functionaliteit en inhoud te verwijderen die zij als irrelevant beschouwen. Maar hoe weet je zeker dat de informatie die je hebt afgekapt of naar de secundaire pagina hebt overgebracht, niet de inhoud is die voor mij het belangrijkst is?!

Ten eerste moet u begrijpen dat responsief ontwerp niet alleen over mobiel ontwerp gaat. Ten tweede kost het ontwikkelen van een goede responsive website veel tijd en moeite, niet alleen de hulp van mediaquery's. Met een enorm en groeiend aantal webapparaten, is het erg belangrijk om uw website een kans te geven om de gebruikerservaring effectief te faciliteren.

Voor een responsieve website kunnen we dezelfde code gebruiken voor zowel desktop als mobiel. Dit is handig omdat we de inhoud niet voor elk apparaat apart hoeven aan te passen. Maar veel websites verbergen hun inhoud als onnodig voor mobiele gebruikers. Hierbij zijn er twee problemen:

• Ten eerste bestraft het mobiele gebruikers die op de site browsen effectief.
• Ten tweede betekent verborgen stijlen in CSS niet dat de inhoud niet wordt geladen. Dit kan een enorme impact hebben op de prestaties, vooral voor mensen met een slechte connectiviteit.

Daarom is de beste benadering voor het ontwerpen van een website om eerst het ontwerp van mobiele of kleine apparaten te overwegen. Op deze manier kunt u zich concentreren op de belangrijkste informatie die uw website moet leveren. En dan, indien nodig, kunt u voorwaardelijke laadmethoden gebruiken, waarbij uw lay-outrasters, grote afbeeldingen en mediaquery's bovenop uw bestaande kleine schermontwerp worden geplaatst.

Stap voor stap handleiding

Voor deze tutorial hebben we een website gemaakt die perfect schaalt tussen grote en kleine schermen. Je slaat alle content op, op alle schermformaten. En met behulp van mediaquery's wordt de navigatie voor kleine apparaten overgeschakeld van horizontale naar verticale weergave.

Het belangrijkste element van flexibiliteit in responsief ontwerp is de vloeiende lay-outbreedte. Het enige dat u hoeft te doen, is een wrapper, inhoud en kolombreedten maken die zich aanpassen aan verschillende apparaatbreedten. Dit is niets nieuws, maar het is nu belangrijker dan ooit. Om het eenvoudig te houden, maken we een vloeiende pagina die bestaat uit een navigatie, een hoofdafbeelding en twee kolommen die plaats bieden aan positionering op apparaten van verschillende groottes. We hebben ook respond.min.js toegevoegd, waarmee mediaquery's kunnen werken in IE6-8.

Basis HTML-structuur:

Als het op CSS aankomt, is het een goed idee om de maximale breedte in te stellen, het zal voorkomen dat de site wordt geschaald op grote schermen, maar het zal niet voorkomen dat de pagina's kleiner worden. Een van de belangrijkste problemen bij het overschakelen van vaste breedte naar vloeiend zijn afbeeldingen. In CSS is er een eenvoudige oplossing voor dit probleem. Stel de breedte van de afbeelding in op 100%. Voeg ook automatisch toe voor de hoogte van de afbeeldingen om geplette afbeeldingen in Opera en Safari op kleine schermen te voorkomen:

/ * Lay-out * / #wrapper (breedte: 96%; max-breedte: 920px; marge: auto; opvulling: 2%;) #main (breedte: 60%; marge-rechts: 5%; zwevend: links;) opzij (breedte: 35%; zwevend: rechts;) / * Logo H1 * / koptekst h1 (hoogte: 98px; breedte: 216px; zwevend: links; weergave: blok; achtergrond: url (afbeeldingen / sllogo.png) 0 0 nee- herhalen; tekst-inspringing: -9999px;) / * Navigatie * / header nav (float: rechts; margin-top: 40px;) header nav li (display: inline; margin-left: 15px;) header nav ul li a ( tekstdecoratie: geen; kleur: # 333;) #skipTo (weergave: geen;) #skipTo li (achtergrond: #ccc;) / * Hoofdafbeelding * / #banner (zwevend: links; marge-onder: 15px; breedte : 100% ;) #banner img (breedte: 100%; hoogte: auto;)

Uw afbeelding wordt over de volledige breedte op het bovenliggende element weergegeven en krimpt mee. Zorg ervoor dat uw afbeeldingen, maximale breedte, de maximale breedte van hun container niet overschrijden.

Het gebruik van grote afbeeldingen kan de laadtijden beïnvloeden. Daarom is er voor kleine schermen een responsieve methode voor afbeeldingen, die de grootte van het scherm van de gebruiker bepaalt en een kleinere / grotere afbeelding produceert, afhankelijk van wat nodig is. Deze methode is nog steeds moeilijk ideaal te noemen, maar het is nog steeds het overwegen waard.

Hoofdnavigatie wisselen

De belangrijkste reden waarom u de navigatie moet wijzigen, is de minimalisering die optreedt, wat kan leiden tot onleesbare en moeilijke toetsaanslagen. Door deze methode te gebruiken, maakt u het leven van de gebruiker gemakkelijker. U kunt in de code ook zien dat we wijzigingen hebben aangebracht in de secties #main en side om ze in één kolom te combineren.

/ * Mediaquery's * / @mediascherm en (max-breedte: 480px) (#skipTo (display: block;) header nav, #main, side (float: left; clear: left; margin: 0 0 10px; width: 100% ;) header nav li (marge: 0; achtergrond: #ccc; display: block; margin-bottom: 3px;) header nav a (display: block; padding: 10px; text-align: center;)

U zult merken dat op sommige mobiele apparaten uw website automatisch krimpt om op dit scherm te passen. Dit moment wordt een probleem wanneer we de schermgrootte moeten vergroten om door onhandige inhoud te navigeren.

Om ervoor te zorgen dat mediaquery's volledig effect hebben, moet een typische mobiele, geoptimaliseerde, responsieve site zoiets als het volgende bevatten:

De eigenschap width bepaalt de grootte van de viewport. Het kan worden ingesteld op een specifiek aantal pixels, breedte = 960, of een waarde voor de apparaatbreedte, de breedte van het scherm in pixels op een schaal van 100%. De eigenschap initial-scale bepaalt de schaal wanneer de pagina voor het eerst wordt geladen. de eigenschappen voor maximale schaal, minimale schaal en door de gebruiker schaalbare eigenschappen bepalen hoe gebruikers de pagina kunnen schalen (groter/kleiner).