Share
Toen tablets en smartphones voor het eerst opdoken, ontwikkelden veel uitgevers duidelijk gescheiden websites, of op zijn minst duidelijk gegenereerde HTML-codestructuren, om de ervaring voor bezoekers op verschillende apparaten aan te passen. Er zijn zeker oplossingen naar voren gekomen om het gemakkelijker te maken, zoals deze mobiele plug-in voor WordPress-thema:
Maar om echt een solide ervaring te bieden voor bezoekers op alle apparaten, waren de meeste projecten dubbel uitgevoerd of drievoudig ontworpen, gecodeerd en getest.
Het concept van responsief webontwerp probeerde de codestructuur te verenigen, codevork te verwijderen en een eenvoudigere benadering te bieden voor het bieden van een gebruikerservaring van hoge kwaliteit op verschillende apparaten. In het begin was het een beetje experimenteren en wat vroege expertise vereist, maar vandaag is het mainstream geworden. Het is een bewijs van oriëntatie rond DRY-engineering.
Toen ik mijn persoonlijke WordPress-site lanceerde, was het kiezen van responsief ontwerp nog steeds een kleine stap vooruit - en veel sites presteerden met verschillende kwaliteitsniveaus voor de ervaring van uw bezoeker.
De open-source versie van Bootstrap van Twitter hielp transformeren van reactievermogen in webdesign enorm. Waarschijnlijk, net als ik, heb je een responsief thema op je website en ben je bekend met de algemene concepten van dynamische presentatie. Maar weet u hoe responsief webdesign werkt onder de motorkap? Weet je hoe je van begin af aan iets responsiefs kunt opbouwen? Wil je meer weten??
In deze zelfstudie moedigen we u aan om Telerik's nieuwste whitepaper over responsive web design (RWD) te bekijken. Must-know-technieken voor het bouwen van HTML5-apps voor elke schermgrootte, die u nu gratis kunt downloaden, biedt een uitstekend gedetailleerde gids om deze vragen te beantwoorden en u te helpen op snelheid te komen.
Er zijn veel redenen waarom responsief webontwerp geen trend is geworden maar synoniem is voor best practices op het web. Het is een snelle en kosteneffectieve manier om een op maat gemaakte ervaring te bieden aan desktop- en mobiele internetgebruikers. U kunt uw bestaande vaardighedenset gebruiken, één codebasis, één set URL's en één ontwerptaal.
In het whitepaper leer je wat je moet weten over responsieve internetpraktijken, zodat je apps kunt bouwen voor elke schermgrootte. Het leert je hoe je:
In deze zelfstudie geef ik u een korte samenvatting van wat het whitepaper biedt. Ook neem ik deel aan de onderstaande discussies. Als je een vraag of een suggestie voor een onderwerp hebt, plaats dan een reactie of tweet naar mij @ reifman of e-mail me direct.
Hier zijn enkele van de gebieden waarover het witboek u zal leren.
Mediaquery's maken deel uit van CSS3 en maken een responsief webontwerp mogelijk.
In essentie helpen mediaquery's de browser om conditionals in uw CSS-code te vertellen hoe u elementen van content kunt stijlen, verbergen of onthullen.
Hier is een voorbeeld voor de kleinste apparaatgrootte op maximaal één met een breedte van meer dan 768 px:
/ * Basistijl voor kleine apparaten klein en hoger * / .hero-tekst font-size: 22px; / * Alleen voor groot en op * / @media-schermen en (min-width: 768px) .hero-text font-size: 48px;
Populaire frameworks zoals Bootstrap, Foundation en Telerik RadPageLayout maken uitgebreid gebruik van mediaquery's om hun krachtige rastersystemen te creëren.
Met behulp van mediaquery's binnen uw code kunt u stylesheets samenstellen met rasters die vloeiend reageren op apparaten - dynamisch aanpassen wat en hoe de bezoeker uw inhoud ziet op basis van hun apparaat en de breedte van hun browser.
De syntaxis kan variëren tussen frameworks, maar het algemene concept is hetzelfde. Elke apparaatgrootte heeft een overeenkomstige mediaquery en stijleigenschappen die het gewenste lay-outeffect creëren. Deze mediaquery's worden breakpoints genoemd. Bootstrap identificeert zijn breekpunten als xs (extra klein), sm (klein), md (med), lg (groot). Deze verwijzen naar de apparaatgrootte.
Hier zijn enkele Bootstrap-voorbeelden en wat ze zouden kunnen weergeven op apparaten van verschillende grootte:
Linksboven zijn kleine apparaten en kleinere tablets, rechtsboven zijn middelgrote apparaten. Lager is grotere apparaten en desktops.
Een ander veelgebruikt concept is de container voor basisinhoud. Het containerelement is het buitenste element van de lay-out. Het doel is om een witte ruimte te creëren tussen de lay-out en de rand van het browservenster.
Het whitepaper geeft ook aan dat u met responsief webontwerp de inhoud laat uitbreiden of inkrimpen op basis van de weergavegrootte van de bezoeker:
Ik geloof dat het kiezen van standaarden ongelooflijk belangrijk is in succesvolle softwareontwikkeling. Het helpt teams communiceren en stelt nieuwe mensen in staat om snel op snelheid te komen. Het maakt het mensen gemakkelijker om hun vaardigheden in standaardtechnologieën te leren kennen. En het maakt het upgraden voor beveiliging, prestaties en functies op den duur gemakkelijker, vooral wanneer open-sourcetechnologieën worden gebruikt.
Het kiezen van een standaardkader in responsief webontwerp kan een groot verschil maken voor het succes of de mislukking van uw project. In het witboek van Telerik kunt u de voor- en nadelen van een van de populairste, Bootstrap bekijken:
Bootstrap biedt de allerbeste functies, zoals een solide reagerend raster, mobiel eerste ontwerp, CSS-helperklassen, adaptieve JavaScript-componenten en nog veel meer. Het raster is standaard een standaardraster van 12 kolommen met een eenvoudige syntaxis voor het maken van lay-outs die meerdere schermformaten ondersteunen.
Het witboek benadrukt ook Zurb Foundation. Het is een open-source framework dat is geëvolueerd van Bootstrap.
Foundation zit boordevol geavanceerde functies die geschikt zijn voor teams met ervaren front-end ontwikkelaars, met name zij die Sass gebruiken.
Het witboek gaat ook in op een aantal geavanceerde onderwerpen:
Zonder al te ver te gaan, geeft het de meesten van ons een zeer gedetailleerde introductie van de belangrijkste aspecten die je moet weten.
Ik hoop dat ik je genoeg heb geïntrigeerd dat je meer wilt leren. Als projectmanager die regelmatig mensen met expertise in deze problemen leidt, vond ik dit een super, gemakkelijk te begrijpen gids voor responsief webontwerp en hoe het werkt.
Wil je erin duiken? Bezoek de White Paper-verzameling van Telerik en download Must-know-technieken voor het bouwen van HTML5-apps voor elke schermgrootte.
Deze responsieve frameworks zijn belangrijke uitgangspunten en omvatten UI-componenten om uw project te starten. De componenten bevatten meestal de basisfuncties die nodig zijn voor het bedienen en bouwen van prototypen. Uw meer geavanceerde en feature-complete applicaties vereisen echter robuustere gebruikersinterfacemogelijkheden. Binnenkort ben je op zoek naar een responsieve webcompatibele gebruikersinterface.
De Telerik Kendo UI heeft een responsief raster, grafieken, scheduler en meer componenten die naadloos aansluiten op elk responsief webontwerpraamwerk dat u gebruikt. Het is gemaakt door onze sponsor die het bovenstaande RWD-whitepaper heeft gemaakt.
Ik wil u alleen een snelle visuele rondleiding geven over wat u van de Kendo UI kunt verwachten:
Het bouwen van geavanceerde interactieve rasterbesturing is nooit eenvoudig. Kendo UI biedt een krachtig, flexibel raster uit de doos:
Er is een schema (of kalenderweergave):
Kendo UI bevat ingebouwde grafieken:
En er is een feature-rich, gemakkelijk configureerbare editor:
In feite is er een bibliotheek vol met 73 extra UI-widgets om toe te voegen:
In principe zijn er op dit moment twee dingen die je moet doen:
Ik hoop dat je geïntrigeerd bent door wat de HTML5 whitepaper van Telerik kan bieden (en door het Kendo UI Framework). Geef hieronder uw ervaringen op, evenals vragen en opmerkingen. Je kunt ook tweeten naar mij @reifman of mij rechtstreeks een e-mail sturen, en bladeren op de instructeurspagina van Envato Tuts + om andere tutorials te zien die ik heb geschreven.
Accentsconagua