Echt eenvoudig responsief ontwerp
Het is geen geheim dat velen geloven dat responsief internet de toekomst is. Het creëren van een responsieve site betekent dat deze zich kan aanpassen aan de vele verschillende browsers en grootten die beschikbaar zijn. Als ik zeker wil weten dat mijn website die ik op mijn desktop heb gemaakt, kan worden bekeken op een tablet met minium scrolling en zoomen, ben ik geïnteresseerd in het maken van een responsive site.
Een reden waarom responsieve sites populair zijn geworden is omdat het gewoon logisch is. Het is goedkoper dan het aanmaken van een of meer extra sites voor mobiele telefoons en tablets. Het zorgt ook voor een consistente kijkervaring tussen apparaten en desktopschermen. Het is niet leuk om de grootte van je venster te vergroten of horizontaal te scrollen om een hele website te zien.
Hoewel het creëren van responsieve webontwerpen eenvoudiger wordt, zijn er enkele manieren om het nog sneller te laten werken. Dankzij enkele CSS en HTML kunnen we deze code rechtstreeks in onze sites coderen. Andere elementen vereisen een beetje meer werk. Hoe dan ook, we hebben een lijst bedacht om u te helpen uw responsieve site samen te stellen met minimale gedoe en maximale resultaten.
jQuery-plug-ins
Isotoop
Isotoop is een jQuery-plug-in die claimt magische lay-outs te maken die anders niet door CSS en HTML kunnen worden gemaakt. Het heeft de mogelijkheid om elementen in een container opnieuw te rangschikken, zodat ze in de container passen als deze van grootte verandert. U kunt Isotoop ook gebruiken om items per categorie en dergelijke te filteren en sorteren.
Breakpoints.js
Breakpoint is gemaakt met ontwikkelaars en ontwerpers in gedachten. Het is een plug-in waarmee u onderbrekingspunten voor verschillende browserformaten kunt maken. Wanneer uw browser wordt aangepast naar een van die formaten, kunnen de elementen in het scherm passen.
FitText.js
Dit is een van mijn favoriete jQuery-plug-ins omdat het voor lettertypen is. Veel te vaak houden mensen in ontvankelijk webontwerp niet rekening met het feit dat de koppen responsief moeten zijn in plaats van in een bepaalde ruimte te worden geplet. FitText stelt u in staat om dat te doen, maar vergeet niet om het alleen te gebruiken voor koppen!
Response.js
Als je het idee van Breakpoint.js leuk vindt maar meer maatwerk wilt, is Response.js het antwoord. Het is echt geweldig voor degenen die jQuery beter kennen dan CSS en HTML en moeten responsieve websites maken. U gebruikt uw breekpunten, maar er is zoveel meer maatwerk, zoals apparaatgrootte, pixelrantsoenen en de mogelijkheid om verschillende bronnen voor verschillende formaten te laden.
TinyNav.js
TinyNav is een lichtgewicht jQuery-invoegtoepassing waarmee u menu-items kunt wijzigen met behulp van lijsten om in vervolgkeuzemenu's te veranderen wanneer de grootte van de browser wordt gewijzigd. U kunt de formaten opgeven en welke menu's worden gewijzigd. Het is niet zo breed in functie, maar het is zeer effectief voor wat het doet.
Populaire kaders en systemen
Responsief rastersysteem
Dit systeem beweert geen boilerplate of framework te zijn, maar slechts een systeem om uw ontwerpen responsive te maken. Het lijkt een van de meest flexibele omdat het je niet beperkt tot een bepaalde grootte of een bepaalde grootte. Ze gebruiken verschillende CSS-klassen die kunnen zweven en hun eigen kolommen kunnen maken.
Golden Grid-systeem
De GGS is ook een systeem en geen 'raamwerk'. Ze noemen zichzelf graag een beginpunt of richtsnoer voor degenen die graag een bepaald aantal rasters gebruiken in hun webontwerp. Je krijgt 18 kolommen op het scherm, maar 16 voor gebruik in je ontwerp. U maakt uw eigen breedtes en goten om te gebruiken en gaat in wezen vanaf daar.
1140 rastersysteem
Een tijdje lang gebruikten veel ontwerpers webontwerpen die 960px breed waren. Toen werd dat te klein en ze gingen omhoog. Nu worden er veel ontwerpen ontwikkeld met een breedte van 1140px. Met dit 1140-rastersysteem kunt u twaalf kolommen maken voor gebruik in een breed webontwerp.
Twitter Bootstrap
Bootstrap is een van de meest populaire frameworks die beschikbaar zijn. Het is een 12-raster-raamwerk dat zichzelf bruikbaar heeft gemaakt als cross-browser (inclusief Internet Explorer 7) en dat responsief kan worden gebruikt op draagbare apparaten. Het wordt geleverd met verschillende stylingcomponenten, typografie en JavaScript om te gebruiken en creëert slanke, intuïtieve sites.
SimpleGrid
SimpleGrid neemt het idee van rasters en vereenvoudigt het. Bij de meeste rastersystemen en frameworks hebt u deze onbekende klassen en onbekende kolommen. Eenvoudig raster bevat klassen die aangeven welke kolommen eerste, middelste en laatste zijn. Bovendien kunt u verschillende 'slots' aan de kolommen toevoegen, zodat het lijkt alsof er meer kolommen zijn. Het is een heel eenvoudig en duidelijk kader.
Andere responsieve tools
Responsive Web Design Sketch Sheets
Net als elke ontwerper of ontwikkelaar, schetst u waarschijnlijk uw ontwerpen voordat u ze daadwerkelijk gaat maken. Hopelijk wel. Als dat niet het geval is, moet u misschien beginnen met het gebruik van deze RWD-schetsbladen. Ze hebben verschillende apparaat- en desktopformaten, zodat u alles kunt plannen.
Responsive Design Sketchbook
Als je het idee van het schetsen op papier leuk vindt, maar al je krabbels bij elkaar wilt hebben, kun je overwegen om het responsieve ontwerpschetsboek te krijgen. Het wordt geleverd met 50 pagina's, spiraalgebonden met verschillende schermformaten op elke pagina. Alle rasters en wiskunde zijn al voor je klaar, dus dit is een geweldig hulpmiddel voor beginners en experts in responsief ontwerp.
Stijltegels
Dit is een leuke kleine hulpbron voor webontwerpers, of ze nu op zoek zijn naar iets voor responsief ontwerp of niet. Het is een PSD waarmee u de essentie van een website kunt krijgen door koppen (typografie), logo's, kleuren en andere elementen toe te voegen. De reden waarom dit werkt voor responsief webontwerp is omdat het geen dimensies impliceert, alleen een digitaal idee zonder beperkingen.
Responsieve rekenmachine
Er is heel wat wiskunde in het creëren van pixel perfecte ontvankelijke ontwerpen betrokken. Het is ook noodzakelijk dat je wiskunde correct is, omdat je te maken krijgt met verschillende percentages, breedten en browserformaten. Om te helpen, hier is een rekenmachine die u de juiste wiskunde en de CSS geeft om mee te helpen.
Conclusie
Het is noodzakelijk dat we kennis nemen van wat het responsieve web aan het doen is. Veel klanten willen hun sites beschikbaar hebben voor verschillende apparaten en het is alleen maar voordeliger om responsieve sites te maken. Bovendien helpen de meeste van uw frameworks en andere bronnen voor responsief ontwerp echt bij het cultiveren van georganiseerde en hoogwaardige standaardwebsites.
Wat zijn je favoriete manieren om responsieve ontwerpen te starten? Hebben we een bron gemist waar u op vertrouwt? Laat het ons weten in de comments.