Share
Når tabletter og smarte telefoner først begynte å dukke opp, utviklet mange utgivere tydelig separate nettsteder, eller i det minste tydelig genererte HTML-kode trær, for å tilpasse opplevelsen for besøkende på forskjellige enheter. Det var sikkert løsninger som kom fram for å gjøre det lettere, for eksempel dette mobile WordPress-temaplugget:
Men for å virkelig gi en solid opplevelse for besøkende på alle enheter, trengte de fleste prosjekter duplikat eller tredelt design, koding og testing.
Konseptet med responsivt webdesign forsøkte å forene kode treet, eliminere kodegafler, og gi en enklere tilnærming til å gi en høyverdig brukeropplevelse på tvers av enheter. I begynnelsen trengte det litt eksperimentering og litt tidlig kompetanse, men i dag er det blitt vanlig. Det er et testament til orientering rundt DRY engineering.
Når jeg lanserte mitt personlige WordPress-nettsted, var det fortsatt litt av et sprang - og mange nettsteder ble utført med ulike kvalitetsnivåer for din besøkendes opplevelse..
Twitters åpen kildekodeutgave av Bootstrap bidro enormt til å forandre responsiviteten i webdesign. Sannsynligvis, som jeg, kjører du et responsivt tema på nettstedet ditt og er kjent med de generelle konseptene for dynamisk presentasjon. Men vet du hvordan responsivt webdesign fungerer under hetten? Vet du hvordan du bygger noe lydhør fra grunnen? Vil du lære mer?
I denne opplæringen oppfordrer vi deg til å sjekke ut Teleriks nyeste hvite papir om responsivt webdesign (RWD). Må-kjenne teknikker for å bygge HTML5 Apps for hvilken som helst skjermstørrelse, som du kan laste ned gratis akkurat nå, gir en enestående detaljert guide for å svare på disse spørsmålene og hjelpe deg med å komme opp til fart.
Det er mange grunner til at lydhør webdesign har gått fra å bli kalt en trend for å være synonymt med webens beste praksis. Det er en rask og kostnadseffektiv måte å tjene en skreddersydd opplevelse på for desktop og mobile webbrukere. Du kan bruke ditt eksisterende ferdighetssett, har en kodebase, ett sett med nettadresser og ett designsprog.
Hvitt papir lærer deg hva du må vite om lydhør web praksiser, slik at du kan bygge programmer for hvilken som helst skjermstørrelse. Det lærer deg hvordan du:
I denne veiledningen vil jeg bare gi deg en kort oppsummering av hva hvitboken tilbyr. Også, jeg deltar i diskusjonene nedenfor. Hvis du har et spørsmål eller et emneforslag, vennligst legg inn en kommentar eller tweet på meg @ reifman eller send meg en e-post direkte.
Her er noen av de områdene hvite papiret skal lære deg om.
Medieforespørsler er en del av CSS3, og de er det som gjør responsivt webdesign mulig.
I hovedsak hjelper medieforespørsler nettleseren å fortelle betingelsene i CSS-koden din, hvordan du stiler, gjemmer eller avslører elementer av innhold.
Her er et eksempel på den minste enhetstørrelsen på opptil en med en bredde større enn 768 px:
/ * Basestil for små enheter små og oppe * / .hero-tekst font-size: 22px; / * For stor og opp * / @media bare skjerm og (min bredde: 768px) .hero-text font-size: 48px;
Populære rammer som Bootstrap, Foundation og Telerik RadPageLayout gjør omfattende bruk av medieforespørsler for å lage sine kraftige rutenettsystemer.
Ved hjelp av medieforespørsler i koden din, kan du konstruere stilark med grensesnitt som svarer fluidly til enheter - dynamisk justere hva og hvordan brukeren ser innholdet ditt basert på enheten og bredden på nettleseren.
Syntaxen kan variere mellom rammebetingelser, men det generelle konseptet er det samme. Hver enhetsstørrelse har en tilsvarende mediesøk og stilegenskaper som skaper ønsket layouteffekt. Disse medieforespørrelsene er referert til som bruddpunkter. Bootstrap identifiserer sine bruddpunkter som xs (ekstra liten), sm (liten), md (med), lg (stor). Disse refererer til enhetens størrelse.
Her er noen Bootstrap-eksempler, og hva de kan gjøre som på forskjellige enheter:
Øverst til venstre er små enheter og mindre tabletter, øverst til høyre er mellomstore enheter. Lavere er større enheter og stasjonære datamaskiner.
Et annet vanlig konsept er den grunnleggende innholdsbeholderen. Beholderelementet er det ytre elementet i oppsettet. Hensikten er å skape hvit mellomrom mellom oppsettet og kanten av nettleservinduet.
Vitboken viser også deg responsivt webdesign instruerer innhold til å utvide eller kontrakt basert på den besøkende visningsstørrelse:
Jeg tror at valg av standarder er utrolig viktig i vellykket programvareutvikling. Det hjelper lagene å kommunisere og tillater nye mennesker å komme raskt opp. Det gjør det enklere for folk å kjenne sine ferdigheter i standardteknologi. Og det gjør det enklere å oppgradere sikkerhet, ytelse og funksjoner over tid, spesielt når du bruker open source-teknologier.
Å velge en standard rammeverk i responsivt webdesign kan gjøre en stor forskjell for prosjektets suksess eller fiasko. Telerik-hvitt papir går deg gjennom fordeler og ulemper ved en av de mest populære, Bootstrap:
Bootstrap tilbyr best i klassen funksjoner som et solid responsivt grid, mobil første design, CSS hjelper klasser, adaptive JavaScript komponenter og mye mer. Gitteret er som standard et standard 12 kolonnegrid med en enkel syntaks for å lage layouter som støtter flere skjermstørrelser.
Vitboken fremhever også Zurb Foundation. Det er et open-source rammeverk som utviklet seg fra Bootstrap.
Stiftelsen er fullpakket med avanserte funksjoner som passer for lag med erfarne utviklere, spesielt de som bruker Sass.
Hvitt papir går også inn i en rekke avanserte emner:
Uten å gå for langt, gir det de fleste av oss en veldig detaljert introduksjon av de viktigste aspektene du trenger å vite.
Jeg håper jeg har fascinert deg nok til at du vil lære mer. Som prosjektleder som regelmessig forvalter mennesker med kompetanse i disse problemene, fant jeg dette til å være en super, lett forståelig guide til lydhør webdesign og hvordan det fungerer.
Vil du dykke inn? Besøk Teleriks vitboks samling og last ned Må-kjenne teknikker for å bygge HTML5 Apps for hvilken som helst skjermstørrelse nå.
Disse responsive rammene er viktige utgangspunkt og inkluderer brukergrensesnittkomponenter for å få prosjektet startet. Komponentene inneholder vanligvis de grunnleggende funksjonene som trengs for å operere og bygge prototyper. Men dine mer avanserte og funksjonelle applikasjoner krever mer robuste brukergrensesnittfunksjoner. Snart er du ute etter en responsiv webkompatibel brukergrensesnitt.
Telerik Kendo brukergrensesnittet har et responsivt rutenett, diagrammer, planlegger og flere komponenter som fungerer sømløst med ethvert lydhørt webdesign rammeverk som du bruker. Det er laget av vår sponsor som opprettet RWD-hvittpapiret ovenfor.
Jeg vil bare gi deg en rask visuell gjennomgang av hva du kan forvente fra Kendo brukergrensesnittet:
Å bygge avanserte interaktive grid kontroller er aldri lett. Kendo brukergrensesnitt gir et kraftig, fleksibelt nett ut av boksen:
Det er en tidsplan (eller kalender) visning:
Kendo brukergrensesnitt inkluderer innebygde diagrammer:
Og det er en funksjonsrik, lett konfigurerbar editor:
Faktisk er det et bibliotek fullt av 73 flere UI-widgets å legge til på:
I utgangspunktet er det to ting for deg å gjøre:
Jeg håper du er fascinert av hva Teleriks HTML5-whitepaper kan tilby (og ved Kendo UI Framework). Vær så snill å poste dine erfaringer nedenfor, samt spørsmål og kommentarer. Du kan også tweet på meg @ reifman eller email meg direkte, og bla gjennom min Envato Tuts + instruktør side for å se andre opplæringsprogrammer jeg har skrevet.
Accentsconagua