Responsief ontwerp of mobiele versie. Schermresolutie aanpassen

Termen als responsief en adaptief ontwerp worden gebruikt De laatste tijd vaak genoeg. Het blijkt dat deze twee concepten voor sommige mensen vrijwel identiek zijn. In dit artikel zullen we het hebben over wat responsief en adaptief ontwerp is en wat het verschil daartussen is.

Vanaf het moment tabletcomputers en smartphones beschikbaar zijn geworden voor het grote publiek, worden websites steeds vaker bekeken via aanraakgestuurde apparaten met kleine schermen. Veel internetbronnen bleken volstrekt ongeschikt voor gebruik door de eigenaren van dergelijke apparaten.
Er verschenen er twee fundamenteel verschillende benaderingen tot het maken van websites voor mobiele toestellen: Adaptief webdesign en Responsive webdesign. Laten we ze allemaal afzonderlijk bekijken en vervolgens hun toepassingen en functies vergelijken.

Responsive webdesign (RWD) is een benadering voor het creëren van een ontwerp waarbij een website is ontworpen om het eenvoudigste gebruik te garanderen: gemakkelijke weergave van de site met een minimum aan formaatwijzigingen en onnodig scrollen - op de meest uiteenlopende apparaten. Responsief ontwerp heeft de volgende kenmerken:

• Bij het maken van een responsief ontwerp worden alleen HTML en CSS gebruikt - zonder JavaScript-verbindingen om de “responsiviteit” van ontwerpelementen te bepalen.
• Een responsieve lay-out bepaalt hoe website-elementen eruit zullen zien verschillende apparaten Oh; deze elementen worden echter niet verborgen/vervangen door andere, en hun gedrag, evenals de functies die ze uitvoeren, veranderen niet.
• Drie basisprincipes van responsive design:
• opstelling van alle elementen erin modulair raster;
• alle lay-outelementen en mediabestanden (inclusief afbeeldingen) zijn “flexibel” - hun afmetingen zijn afhankelijk van de schermgrootte;
• werken met mediaquery's - een CSS3-module waarmee u kunt specificeren verschillende stijlen(of zelfs stylesheets) afhankelijk van de schermresolutie, schermgrootte en andere kenmerken.
• Responsief ontwerp wordt gemaakt met behulp van responsieve markup (niet te verwarren met responsief ontwerp). Adaptieve lay-out betekent dat er op de site verschillende stijlen worden gemaakt, opties voor het rangschikken van elementen op een modulair raster en verschillende opties voor stijlen van ontwerpelementen. Deze opties vervangen elkaar naarmate de schermgrootte verandert en er bepaalde overgangspunten tussen worden gevormd verschillende soorten site-indeling/stijlen.
• Responsief ontwerp impliceert niet dat er met het objectmodel van elementen op de pagina wordt gewerkt, en evenmin impliceert het dat de hiërarchie/nesting van blokken en objecten wordt gewijzigd wanneer het type opmaak verandert.

Adaptief webontwerp (AWD) is een ontwerp dat verschillende site-indelingen of lay-outs manipuleert om het beste gebruik op specifieke, vooraf bepaalde apparaten en schermresoluties te garanderen.

• Wanneer adaptief ontwerp site-elementen kunnen worden verborgen of vervangen door andere; Het gedrag en de functionaliteit van individuele website-elementen kunnen veranderen.
• Responsief ontwerp maakt uitgebreid gebruik van JavaScript om het gedrag en de functionaliteit van objecten op een site te controleren.
• Adaptief ontwerp vereist het werken met het objectmodel van elementen op de pagina en omvat het wijzigen van hun hiërarchie/nesten op verschillende apparaten.
• Het is niet nodig om hetzelfde uiterlijk van de site en dezelfde functionaliteit in verschillende browsers te garanderen. Het is mogelijk om nieuwe technologieën te gebruiken die niet worden ondersteund door oudere versies van programma's - omdat het ontwerp, zoals hierboven vermeld, zich aanpast aan bepaalde types apparaten.

In RuNet zijn de concepten responsief en adaptief ontwerp vrijwel identiek aan elkaar. Het is de moeite waard om te begrijpen dat deze benaderingen voornamelijk verschillen in de taken waarvoor ze worden gebruikt.

Responsieve markup en responsief ontwerp zijn totaal verschillende dingen. Adaptieve website-indeling omvat het veranderen van de stijlen van elementen op verschillende apparaten en wordt gebruikt in responsief ontwerp. Adaptief ontwerp is een aparte benadering voor het ontwerpen en creëren van de front-end van websites.

Er zijn verschillende belangrijke aspecten waarin responsieve en adaptieve ontwerpen fundamenteel verschillen:
Websitesnelheid. Een site die is gemaakt volgens de principes van adaptief ontwerp kan meerdere keren sneller worden geladen, omdat de gebruiker alleen die delen van het ontwerp van de server hoeft te downloaden die nodig zijn om de site op zijn apparaat te laten werken. Bij responsive design zal de gebruiker gedwongen worden te wachten tot alle stijlen en afbeeldingen zijn geladen, ongeacht het apparaat dat de bezoeker gebruikt.
Complexiteit van ontwikkeling. Het maken van een website met adaptief ontwerp vereist een hoger professioneel niveau van de ontwikkelaar. Met name gedegen ervaring met JavaScript.
SEO-aspect. Het gerucht gaat dat Google responsieve websites veel meer accepteert dan adaptieve websites.

In de praktijk komt Responsive design vrij vaak voor, in tegenstelling tot adaptief design. Dat is duidelijk: de eerste is immers gemakkelijker te implementeren en te beheersen. De meeste sjablonen die op marktplaatsen worden verkocht, zijn responsief en niet adaptief.
Adaptief ontwerp wordt vaker toegepast bij serieuze en multifunctionele producten. De meest voor de hand liggende voorbeelden: in mobiele versie Vkontakte-netwerk, e-mail van Google.

P.S. Als u goed oplet, zult u merken dat de lay-out van onze site een voorbeeld is van responsive design. Om dit te verifiëren, probeert u op uw computer de breedte van het browservenster te wijzigen. U zult merken hoe de lay-outstijl van de site geleidelijk verandert in een mobiele weergave.

Meer recentelijk, letterlijk tien jaar geleden, lieten webontwerpers zich bij het maken van websites leiden door een bepaalde gemiddelde schermbreedte van de monitoren van gebruikers. Aanvankelijk was de meest voorkomende resolutie 800*600, daarna groeide deze uit tot 1024*768. Op internet kun je de volgende woorden tegenkomen: “De site is geoptimaliseerd voor die en die resolutie.” Met de toename van het aantal schermformaten is het populair geworden Rubberen lay-out sites, waarover ik schreef in Dankzij dit type lay-out was het mogelijk om sites op monitoren met verschillende resoluties te bekijken.

Echter, binnen afgelopen jaren De rubberen lay-out is niet langer een “wondermiddel”. Aan de ene kant verschenen monitoren met enorme schermformaten, aan de andere kant vond er een mobiele revolutie plaats: het aantal verbindingen met internet van mobiele apparaten (laptops, smartphones, tablets) werd groter dan het aantal desktopcomputers. Mobiel verkeer groeit en er is behoefte om de site correct op schermen weer te geven groot nummer verschillende apparaten. Het maatbereik is te breed.

Als de site er op kleine schermen slecht uitziet, verlaat de bezoeker deze eenvoudigweg, neemt het verkeer af en worden gedragsfactoren verergerd.

Om te controleren hoe uw site eruitziet wanneer deze wordt bekeken verschillende apparaten, kunt u de Screenfly-service gebruiken. Om dit te doen, voert u het siteadres in en selecteert u het gewenste apparaat uit een vrij grote lijst. Dit kan een desktopcomputer of tablet zijn verschillende types en mobiele telefoons. U kunt de schermoriëntatie wijzigen van liggend naar staand en omgekeerd.

Hoe het probleem van normale websiteweergave op verschillende apparaten oplossen? Er zijn twee uitwegen:

• Gebruik twee versies van de site, de reguliere versie voor desktop computers en mobiel.
• Gebruik responsief ontwerp.

Welke van deze opties moet worden toegepast, is uiteraard aan de eigenaar of klant van de site. Als de site lang geleden is gemaakt en een handgetekend ontwerp heeft dat deel uitmaakt van het merk, dan is het misschien de moeite waard om er een mobiele versie van te maken en de oude te laten staan. Bij nieuwe websites kies je uiteraard voor een responsive design.

Wat voor soort ontwerp is dit en hoe verschilt het van rubber?

Het rubberen sjabloon verandert niet van structuur wanneer de schermbreedte verandert, maar verandert alleen de afmetingen. Een webpagina heeft bijvoorbeeld drie kolommen: aan de linkerkant staat een menu met een breedte van 25% van de vensterbreedte, in het midden is de inhoud – 50%, aan de rechterkant is een zijbalk – 25%. Met een vensterbreedte van 1000 px hebben ze respectievelijk een grootte van 250, 500 en 250 px, wat heel normaal is. Maar als u een mobiele telefoon gebruikt met een klein scherm van 320 px breed, worden de kolommen kleiner tot 80, 160, 80 px en worden ze onleesbaar.

Wat is de oplossing? Het gaat om het radicaal veranderen van de webpagina. Deze verandering bestaat uit het feit dat na een geleidelijke afname van de breedte van de kolommen de paginastructuur opnieuw wordt opgebouwd - deze wordt uitgerekt tot één kolom. Maar dit is niet het enige verschil.

• Past zich aan de schermgrootte en -oriëntatie aan, van grote desktopmonitors tot mobiele telefoons.
• Pas het formaat van afbeeldingen aan bij het wijzigen van de schermresolutie. Zelfs op sites met een ‘vloeiend’ ontwerp veranderen de afbeeldingsformaten niet, en bij een bepaalde schermbreedte horizontale streep scroll om ze te bekijken. Bij gebruik van responsief ontwerp ‘passen’ afbeeldingen zich ook aan de schermgrootte.
• Onbelangrijke sjabloonelementen verwijderen. Ze kunnen zijn als decoratieve elementen en software die niet werkt op mobiele apparaten.
• Hoge downloadsnelheid. De snelheid van mobiel internet is nog steeds relatief laag, en hiermee moet rekening worden gehouden bij het ontwikkelen van een website die is ontworpen voor weergave op mobiele apparaten.
• Gebruik is relatief grote knoppen. Mobiele apparaten maken gebruik van aanraakinvoer en bij het ontwikkelen van het ontwerp moet rekening worden gehouden met de afwezigheid van een cursor.
• Werken met mobiele functies, zoals geolocatie.

Dit ontwerp is gebaseerd op met behulp van CSS mediavragen Dankzij deze verzoeken worden eerst de parameters bepaald van het apparaat dat de bezoeker gebruikt, en afhankelijk van deze keuze wordt de juiste stijl verbonden, dat wil zeggen dat bij adaptief ontwerp één site wordt gebruikt met een reeks stijlen voor verschillende apparaten. Als een bezoeker bijvoorbeeld de site bezoekt met gewone computer, één stylesheet is verbonden en hij ziet een site met een grote kleurrijke header, horizontale menukaart, verschillende kolommen met inhoud, en bij gebruik van de iPad wordt een andere stijl toegepast, en in plaats van een enorme koptekst wordt een klein logo weergegeven, verandert het menu in een verticale lijst en wordt de inhoud in één kolom getrokken.

Is het mogelijk om een ​​bestaand websitesjabloon opnieuw te maken? adaptieve versie? Dat kan uiteraard als je voldoende kennis hebt van HTML en CSS. Maar als u een contentmanagementsysteem gebruikt - WordPress, Joomla!, Drupal, dan is het beter om nu een kant-en-klaar sjabloon te vinden adaptieve sjablonen er is veel ontwikkeld. Trouwens, in mijn artikel zou ik nu nog een item moeten toevoegen “Het sjabloon controleren op aanpassingsvermogen”.

We kunnen dus zeggen dat responsief ontwerp dat wel is momenteel is de modernste manier om websites te ontwikkelen en ondanks de relatieve complexiteit heeft het de toekomst. De vooruitgang staat niet stil, er verschijnen nieuwe, complexere apparaten, en software het wordt voor hen ook moeilijker.

Trouwens, ik kwam net opdagen unieke cursus Andrej Kudlaya. Gebruik makend van Bootstrap-framework, vandaag de dag kunt u een website maken met een mooi, prettig en professioneel ontwerp, en hoeft u geen professional te zijn op het gebied van lay-out. Met behulp van frameworks kan zelfs de meest beginner in het bouwen van websites een pagina opmaken, een website van één pagina of een landingspagina maken. Bovendien zal de site behoorlijk professioneel zijn en is de tijd die aan het maken ervan wordt besteed minimaal.

Dit is allemaal heel serieus, maar om even te pauzeren, stel ik voor om puzzels te maken en naar een ander schilderij van mijn landgenoot, People's Artist of Russia N.P.

Schrijf uw mening over responsief ontwerp in de opmerkingen.

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

In januari publiceerden we een artikel over responsief ontwerp “Responsive Web Design: wat het is en hoe het te gebruiken” ( Responsief webdesign: Wat is het en hoe gebruik je het). Responsief webontwerp krijgt nog steeds veel aandacht, maar gegeven hoe verschillend het is van traditionele website-ontwikkelingsmethoden, kan het onbetaalbaar complex lijken voor ontwerpers en ontwikkelaars die het nog niet hebben geprobeerd.

Om deze reden hebben we een overzicht samengesteld van bronnen die nuttig zijn bij het maken van responsieve websites. De beoordeling omvatte gedetailleerde handleidingen, benaderingen, hulpmiddelen en artikelen met daarin praktisch advies nodig om uw eigen responsieve website te maken.

Elliot Jay Stocks gaat gedetailleerd in op de methode voor het combineren van CSS-mediaquery's en CSS-overgangen. Het belangrijkste idee is dit: een responsieve website ontwikkelen met met behulp van media Bij zoekopdrachten wijzigt u voortdurend de breedte van uw browser om te zien hoe de site zich ermee gedraagt. Maar elke keer dat een van uw mediaquery's wordt verwerkt, is er een rigide overgang tussen stijlen zichtbaar (de eerste bijvoorbeeld voor desktops, de tweede voor tablets). Waarom zou u geen CSS-overgangen gebruiken om die harde overgangen met animatie glad te strijken?

Rubberafbeeldingen zijn een van de centrale thema’s in responsive webdesign. Het artikel van Ethan Marcotte geeft een gedetailleerd overzicht van hoe je ze kunt maken met behulp van het klassieke img-codefragment (max-width: 100%;), samen met alle benodigde details die je nodig hebt om aan de slag te gaan.

Om grote e-mails te bekijken is dit vaak nodig horizontaal scrollen, vooral als het bij de brief is gevoegd groot beeld. In dit onderzoek legt Campaign Monitor uit hoe e-mails kunnen worden geoptimaliseerd voor mobiel met behulp van Media Queries en worden verschillende nuttige technieken en codefragmenten aangereikt om in de praktijk te brengen.

Dit is een snelle en lichtgewicht Polyfill (een stukje code dat functionaliteit toevoegt die niet door de browser wordt ondersteund) gemaakt door Scott Jehl om de eigenschappen min-width en max-width van CSS3-mediaquery's in IE6-IE8 en hoger te ondersteunen.

Gebruik de informatie uit dit kleine hulpmiddel om een ​​responsieve website te maken.

Een hulpmiddel voor het snel maken van prototypen van responsief ontwerp. U kunt CSS ontwerpen voor een verscheidenheid aan populaire schermformaten, oriëntaties en browsers, of het nu gaat om telefoons (BlackBerry Torch, Google Nexus Eén, iPhone, Motorola Droid), tablets (BlackBerry Playbook, iPad, Samsung Galaxy Tab, Dell Streak), monitoren of tv's (720p, 1080p).

U kunt uw ontwerpresultaten rechtstreeks in uw browser bekijken en uw favoriete ontwikkeltools gebruiken, zoals Firebug. Probeer ook de alternatieve tool ScreenFly.

320 and Up is gebaseerd op een mobile-first-benadering, waarbij ontwerpen eerst voor de schermen van mobiele apparaten worden gemaakt en vervolgens worden uitgebreid voor tablets, desktops en andere apparaten. grote schermen. Het werkt goed als aanvulling op de HTML5-boilerplate en op zichzelf.

Dit zijn aanpasbare sjablonen voor het creëren van veelzijdige en krachtige functies mobiele webapplicaties. U krijgt cross-browser compatibiliteit voor klasse A-smartphones en goede ondersteuning voor oudere BlackBerry, Symbian en IE Mobile. En een groot aantal van verschillende optimalisaties voor mobiele browsers.

1140 CSS-raster geoptimaliseerd om te werken op schermen variërend van de grootte van mobiele apparaten tot 1280px brede monitoren. Dit is een eenvoudig en flexibel raster dat gebruik maakt van mediaquery's.

Dit CSS-framework is - goede basis voor het direct uit de doos ontwikkelen op kleine schermen (zoals telefoons) en kleine schermen (zoals tablets). met minimale inspanning. Daarnaast is er een generator waarmee u zelf een flexibel CSS-framework kunt maken.

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

FluidGrids is een modulaire rastergenerator die lay-outs met 6, 7, 8, 9, 10, 12 of 16 kolommen creëert.

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

Een vloeiend raamwerk met een focus op typografie.

Tiny Fluid Grid helpt u bij het maken van uw eigen vloeiende raster van 12, 16 of 24 kolommen, waarbij u de maximale en minimale breedte en het opvullingspercentage instelt.

Luke Wroblewski maakte aantekeningen over de presentatie van Ethan Marcotte over de toepassing van responsieve webontwerpprincipes om de website van een van de toonaangevende kranten te moderniseren. Ethan legt onder meer uit hoe hij de responsive webdesign-ontwerpmethodologie benadert en wat het prototypingproces is in de context van responsive webdesign.

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

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

De publicatie is een combinatie van filosofie en strategie voor accumulatie beste praktijken op het gebied van responsive design.

Een regelmatig bijgewerkte verzameling websites die mediaquery's gebruiken.

In aflevering 9 van The Big Web Show nodigden Jeffrey Zeldman en Dan Benjamin Ethan Marcotte uit om responsief ontwerp te bespreken.

Een uitstekende aanvulling op het artikel zou een blog zijn over responsief ontwerp, waarin ontwikkelaars hun ervaringen delen en recensies schrijven over responsieve tools.

Adaptieve lay-out verandert het pagina-ontwerp afhankelijk van gebruikersgedrag, platform, schermgrootte en apparaatoriëntatie en is een integraal onderdeel van moderne webontwikkeling. Hiermee kunt u aanzienlijk besparen en niet hoeven te tekenen nieuw ontwerp voor elke resolutie, maar wijzig de grootte en locatie van afzonderlijke elementen.

In dit artikel worden de belangrijkste elementen van de site besproken en hoe u deze kunt aanpassen.

In principe kun je apparaten in verschillende categorieën verdelen en voor elk afzonderlijk ontwerpen, maar dit zal te veel tijd kosten, en wie weet wat de normen over vijf jaar zullen zijn? Bovendien hebben we volgens de statistieken een hele reeks verschillende resoluties:

Het wordt duidelijk dat we niet voor elk apparaat afzonderlijk kunnen blijven ontwerpen. Maar wat moet je dan doen?

Dit is natuurlijk geen ideale manier, maar het elimineert meest problemen.

Ethan Marcotte heeft een eenvoudige sjabloon gemaakt die het gebruik van een responsieve lay-out demonstreert:

Op het eerste gezicht lijkt het misschien dat alles gemakkelijk is, maar dat is het niet. Kijk eens naar het logo:

Als u de hele afbeelding verkleint, worden de inscripties onleesbaar. Om het logo op te slaan, is de afbeelding daarom in twee delen verdeeld: het eerste deel (illustratie) wordt als achtergrond gebruikt, het tweede (logo) verandert proportioneel van grootte.

Het h1-element bevat een afbeelding als achtergrond en de afbeelding is uitgelijnd met de achtergrond van de container (header).

Het werken met afbeeldingen is een van de belangrijkste problemen bij het werken met responsive design. Er zijn veel manieren om het formaat van afbeeldingen te wijzigen, en de meeste zijn vrij eenvoudig te implementeren. Eén oplossing is om max-width in CSS te gebruiken:

Img (max-breedte: 100%;)

De maximale breedte van een afbeelding is 100% van de breedte van het scherm of browservenster, dus hoe kleiner de breedte, hoe kleiner de afbeelding. Houd er rekening mee dat max-with niet wordt ondersteund in IE, dus gebruik width: 100% .

De gepresenteerde methode is een goede optie voor het maken van adaptieve afbeeldingen, maar door alleen de grootte te wijzigen, laten we het gewicht van de afbeelding hetzelfde, wat de laadtijd op mobiele apparaten zal verlengen.

De techniek, geïntroduceerd door Filament Group, past niet alleen het formaat van afbeeldingen aan, maar comprimeert ook de resolutie van afbeeldingen op kleine schermen om het laden te versnellen.

Voor deze techniek zijn verschillende bestanden vereist die beschikbaar zijn op Github. Eerst nemen we het JavaScript-bestand ( rwd-images.js), bestand .htaccess En rwd.gif(beeldbestand). Vervolgens gebruiken we wat HTML om grote en kleine resoluties te associëren: eerst een kleine afbeelding met een voorvoegsel .R(om aan te geven dat de afbeelding responsief moet zijn), link dan naar de grote afbeelding met behulp van data-fullsrc:

Voor elk scherm breder dan 480 px wordt een afbeelding met een hogere resolutie geladen ( largeRes.jpg), en op kleine schermen wordt het geladen ( smallRes.jpg).

Op iPhone en iPod touch er is een bijzonderheid: een ontwerp gemaakt voor grote schermen wordt eenvoudigweg kleiner in een browser met een kleine resolutie zonder scrollen of extra mobiele lay-out. Afbeeldingen en tekst zijn echter niet zichtbaar:

Om dit probleem op te lossen, gebruikt u de metatag:

Als de initiële schaal gelijk is aan één, wordt de breedte van de afbeeldingen gelijk aan de breedte van het scherm.

Bij aanzienlijke wijzigingen in het paginaformaat moet u mogelijk de algehele indeling van de elementen wijzigen. Het is handig om dit via te doen apart bestand met stijlen of, efficiënter, via een CSS-mediaquery. Er zouden geen problemen moeten zijn, aangezien de meeste stijlen hetzelfde blijven en slechts een paar zullen veranderen.

U hebt bijvoorbeeld een hoofdstijlbestand dat #wrapper , #content , #sidebar , #nav specificeert, samen met kleuren, achtergrond en lettertypen. Als uw hoofdstijlen uw lay-out te smal, kort, breed of hoog maken, kunt u dit identificeren en nieuwe stijlen toevoegen.

stijl.css (hoofd):

/* Basisstijlen die worden overgenomen door het onderliggende stijlblad */ html,body( achtergrond... lettertype... kleur... ) h1,h2,h3() p, blockquote, pre, code, ol, ul () /* Structurele elementen */ #wrapper( breedte: 80%; marge: 0 auto; achtergrond: #fff; opvulling: 20px; ) #content( breedte: 54%; float: links; marge-rechts: 3%; ) # zijbalk-links( breedte: 20%; zwevend: links; marge-rechts: 3%; ) #zijbalk-rechts( breedte: 20%; zwevend: links; )

mobiel.css (kind):

#wrapper( breedte: 90%; ) #content( breedte: 100%; ) #sidebar-left( breedte: 100%; clear: beide; /* Extra stijlen voor het nieuwe ontwerp */ border-top: 1px solid #ccc ; margin-top: 20px; ) #sidebar-right( breedte: 100%; clear: beide; /* Extra stijl voor onze nieuwe lay-out */ border-top: 1px solid #ccc; margin-top: 20px; )

Op een breedbeeldscherm passen de linker- en rechterzijbalk mooi aan de zijkant. Op smallere schermen zijn deze blokken voor meer gemak onder elkaar geplaatst.

Laten we eens kijken hoe u CSS3-mediaquery's kunt gebruiken om responsieve ontwerpen te maken. min-with specificeert de minimale breedte van het browservenster of scherm waarop bepaalde stijlen worden toegepast. Als een waarde lager is dan min-width , worden de stijlen genegeerd. max-width doet het tegenovergestelde.

@mediascherm en (min.breedte: 600px) ( .hereIsMyClass ( breedte: 30%; zwevend: rechts; ) )

De mediaquery werkt alleen als de minimale breedte groter is dan of gelijk is aan 600 px.

@mediascherm en (max. breedte: 600px) ( .aClassforSmallScreens ( duidelijk: beide; lettergrootte: 1.3em; ) )

In dit geval is de klasse ( aKlasse voor kleine schermen) werkt als de schermbreedte kleiner dan of gelijk is aan 600 px.

Hoewel de minimale en maximale breedte van toepassing kunnen zijn op zowel de schermbreedte als de breedte van het browservenster, hoeven we mogelijk alleen met de apparaatbreedte te werken. Om bijvoorbeeld browsers te negeren die in een klein venster zijn geopend. Hiervoor kunt u min-device-width en max-device-width gebruiken:

@mediascherm en (max. apparaatbreedte: 480px) ( .classForiPhoneDisplay ( lettergrootte: 1.2em; ) ) @mediascherm en (min. apparaatbreedte: 768px) ( .minimumiPadWidth ( clear: beide; marge-onder : 2px effen #ccc;

Vooral voor iPad hebben mediaquery's de eigenschap oriëntatie, waarvan de waarden beide kunnen zijn landschap(horizontaal), of portret(verticaal):

@mediascherm en (oriëntatie: liggend) ( .iPadLandscape ( breedte: 30%; zwevend: rechts; ) ) @mediascherm en (oriëntatie: staand) ( .iPadPortrait ( helder: beide; ) )

U kunt ook mediaquerywaarden combineren:

@media scherm en (min-breedte: 800px) en (max-breedte: 1200px) ( .classForaMediumScreen ( achtergrond: #cc0000; breedte: 30%; zwevend: rechts; ) )

Deze code wordt alleen uitgevoerd voor schermen of browservensters tussen 800 en 1200 px breed.

U kunt als volgt een specifiek blad met stijlen voor verschillende mediaquerywaarden laden:

Als uw browser geen CSS3-mediaquery's ondersteunt, kunt u stijlen vervangen jQuery gebruiken:

$(document).ready(function())( $(window).bind("resize", resizeWindow); function resizeWindow(e)( var newWindowWidth = $(window).width(); // Als de breedte gelijk is minder dan 600 px, wordt een mobiel stylesheet gebruikt if(newWindowWidth< 600){ $("link").attr({href: "mobile.css"}); } else if(newWindowWidth >600)( // Als de breedte groter is dan 600 px, wordt het bureaubladstylesheet gebruikt $("link").attr((href: "style.css")); ) ) ));

De mogelijkheid om elementen te verkleinen en opnieuw in te delen zodat ze op kleine schermen passen, is geweldig. Maar dit is niet de beste optie. Mobiele apparaten hebben doorgaans een bredere reeks wijzigingen: vereenvoudigde navigatie, meer gerichte inhoud, lijsten of rijen in plaats van kolommen.

Dit is onze opmaak:

Inhoud linkerzijbalk | Inhoud rechterzijbalk

stijl.css (hoofd):

#content( breedte: 54%; zwevend: links; marge-rechts: 3%; ) #zijbalk-links( breedte: 20%; zwevend: links; marge-rechts: 3%; ) #zijbalk-rechts( breedte: 20 %; zwevend: links; ) .sidebar-nav( weergave: geen; )

mobiel.css (vereenvoudigd):

#content( breedte: 100%; ) #sidebar-left( weergave: geen; ) #sidebar-right( weergave: geen; ) .sidebar-nav( weergave: inline; )

Als de schermgrootte wordt verkleind, kunt u bijvoorbeeld een script of alternatief bestand met stijlen om de witruimte te vergroten of navigatie te vervangen voor meer gemak. Doordat u de mogelijkheid heeft om elementen te verbergen en weer te geven, de grootte van afbeeldingen, elementen en nog veel meer te wijzigen, kunt u het ontwerp aanpassen aan elk apparaat en scherm.

Van de auteur: Responsief website-ontwerp is een geheel nieuwe benadering van ontwerp die steeds meer aandacht krijgt, maar gezien de mate waarin deze verschilt van traditionele ontwikkelingsmethoden, kan het in eerste instantie onbetaalbaar lijken voor nieuwe webontwerpers en -ontwikkelaars. In dit artikel ga ik er enkele behandelen de belangrijkste punten gerelateerd aan de ontwikkeling en implementatie van responsive webdesign en maak uw leven, vrienden, een beetje gemakkelijker.

De klassieke aanpak voor het maken van een website ziet er ongeveer zo uit: een ontwikkelingsblok, een webontwerpblok, een lay-outblok, enz. De laatste paar jaar is alles echter dramatisch veranderd: de term ‘webdesign’ wordt geleidelijk terwijl ‘adaptief ontwerp’ zijn positie verraderlijk versterkt en geleidelijk verschuivingen teweegbrengt in het bewustzijn van specialisten.

Door over het algemeen Webdesign mag niet zo ondubbelzinnig worden opgevat, en de snelle ontwikkeling van adaptief ontwerp, dat als bijna een industriële standaard wordt beschouwd, heeft een hele carrousel van verschillende tools en platforms met zich meegebracht.

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

Dezelfde website moet er geweldig uitzien op laptops, smartphones, tablets, etc., ongeacht het gebruikte schermformaat en de gebruikte resolutie. Tegelijkertijd moet het voor gebruikers even gemakkelijk zijn om webpagina's voor alle formaten te bekijken, zonder de noodzaak om bijvoorbeeld afzonderlijke blokken uit te breiden om niets te missen de gewenste knop.

Vanwege het feit dat elk adaptief project individueel en iteratief is, is het vrij moeilijk om alle processen te analyseren om oplossingen voor alle situaties te bieden en de werkefficiëntie te verbeteren. Er zijn echter algemene succesvolle strategieën en technieken voor het implementeren, verbeteren en creëren van responsief websiteontwerp die in vrijwel elke situatie kunnen worden toegepast.

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

Luke Wroblewski's benadering van ontwikkeling wordt om drie redenen "Mobile First" genoemd:

de mobiele omgeving stelt u in staat zich te concentreren en zich te ontdoen van de rommel die ontstaat als gevolg van het "rommelen" van een grote hoeveelheid ruimte op het scherm;

De mobiele markt heeft de neiging zich in een razend tempo te ontwikkelen;

De mobiele omgeving wordt geassocieerd met vele mogelijkheden (camera, multi-touch gebaren, GPS, versnellingsmeter, geolocatie).

Sindsdien is webdesign gestaag in de richting van deze aanpak verschoven. Veel webontwerpers en webontwikkelaars denken eerst na over hoe ze een responsief ontwerp kunnen maken voor de mobiele versie van de site, en gaan vervolgens aan de slag met desktopontwikkeling.

De ‘Mobile First’-strategie begint met het creëren van de structuur en inhoud van een mobiele versie die werkt in internetomgevingen met lage snelheid, en beweegt zich richting belangrijke breekpunten met hogere snelheden. snelle verbinding, terwijl de vereenvoudigde versies worden verbeterd en geoptimaliseerd.

Moderne tendensen en benaderingen in webontwikkeling

Leer het algoritme voor snelle groei vanaf het begin bij het bouwen van websites

Dit zorgt voor een innovatieve en efficiënte werking van alle soorten apparaten. Website-ontwikkelaars richten zich op de behoeften van gebruikers, creëren geoptimaliseerde en snelle pagina's en besteden aandacht aan belangrijke inhoud. Overigens hanteert zelfs Google de ‘Mobile First’-aanpak.

Het doel van het creëren van responsief ontwerp is om de beste bruikbaarheid in elke context te bieden. Dit is een uitstekende gelegenheid om inhoud te analyseren en deze op alle soorten apparaten gemakkelijk toegankelijk en leesbaar te maken.

Velen die geen Mobile First-strategie gebruiken, geven de voorkeur aan een Content First-strategie. Dit is natuurlijk het juiste om te doen, maar je moet deze oproep niet letterlijk nemen en denken dat je pas moet beginnen met het ontwikkelen van een ontwerp als alle inhoud klaar is.

Er moet voortdurend inhoud worden gemaakt en besproken, zowel in de fase van het maken van een responsief websiteontwerp als na voltooiing ervan! Zoals de bekende ontwerper Cennydd Bowles zei: “design en inhoud moeten hand in hand gaan.” Ze moeten elkaar aanvullen.

De strategie ‘Contentstructuur eerst’ is een heel andere zaak. Allereerst moet je duidelijk zijn over de missie van de site, wat deze de wereld probeert te vertellen. En denk pas dan zorgvuldig na over de structuur van de inhoud, de creatiemethoden, de typen en het doel van elk element, terwijl de gebruiker op de voorgrond moet worden geplaatst.

U moet over een strategie beschikken die ervoor zorgt dat u elke gebruiker in elke fase van zijn reis op uw bron van de benodigde inhoud voorziet. De structuur van de site moet gebaseerd zijn op onderzoek naar uw gedrag en behoeften. doelgroep.

Als u uw inhoud in de beginfase van de ontwikkeling van de website goed structureert, kunt u deze in de toekomst eenvoudig overbrengen naar andere platforms en apparaten. Het kan natuurlijk geen kwaad om een ​​voorbeeld van responsief ontwerp als referentie voor u te hebben.

Beslissen voor welke resoluties responsief ontwerp moet worden gemaakt, moet beginnen met het creëren van een georganiseerde lay-out - schetsen, die in de toekomst gemakkelijk kan worden geschaald.

De verscheidenheid aan apparaten met hun mogelijkheden, resoluties en schermformaten betekent een groot aantal lay-outs. Het maken van een schets legt de basis voor een toekomstig prototype van het project. Het kan gebruikt worden om een ​​discussie ter sprake te brengen verschillende ideeën Maak ruwe schetsen die de basis zullen vormen voor het raamwerk van de site.

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

Deze strategie zal u helpen uw hele aanpak voor het creëren van responsief ontwerp te heroverwegen. In plaats van het ontwikkelen van “mobiele sites” en “websites”, zult u zich nu concentreren op het ontwikkelen van flexibele systemen met een reeks regels die bepalen hoe inhoud wordt geleverd en geleverd op basis van context.

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

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

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

Moderne trends en benaderingen in webontwikkeling

Leer het algoritme voor snelle groei vanaf het begin bij het bouwen van websites