Innhold
- 1. Bred nettleser- og enhetsdekning
- 2. Berøringsvennlige skjemainnganger og UI-widgets
- 3. Responsiv webdesignvennlig
- Ny panel-widget
- Responsive tabeller
- Responsivt rutenett
- 4. Oppsett og temamotor
- 5. Navigasjonsmodell for Ajax-sider
- Tips: last inn nye sider umiddelbart (ingen lastindikator)
- Nettlevering for alle
Med utbredelsen av berøringsskjerm på telefoner, nettbrett og bærbare datamaskiner, står vi overfor et presserende behov for å bygge berøringsvennlige nettsteder. Ikke bare det, men eiere av nettsteder må sørge for at innholdet deres kan vises av et stadig økende, mangfoldig sett med enheter. Det er der jQuery Mobile kommer inn. JQuery Mobile-rammeverket er i stand til å forbedre nettsteder ved å legge til berøringsvennlige skjemainnganger, mer effektiv sideinnlasting og bredere enhetsstøtte ved bruk av progressiv forbedring.
Jeg har lenge vært talsmann for jQuery, men var ikke med en gang overbevist om at jQuery Mobils tilnærming var den rette. Jeg bestemte meg for å undersøke nærmere ved å snakke med skaperne av jQuery Mobile, Scott Jehl og Todd Parker fra Filament Group. Jeg spurte dem hvorfor jQuery Mobile oppfører seg slik den gjør, og som et resultat trakk fem viktige ting ut som jQuery Mobile gjør for å hjelpe deg med å bygge mer berøringsvennlige nettsteder som fungerer over et bredt spekter av nettlesere og enheter:
- Bred nettleser- og enhetsdekning - ved å bruke progressiv forbedring, kan nettstedet ditt sees av det største antallet nettlesere og enheter.
- Berøringsvennlige skjerminnganger og UI-widgets - skjemainngangene forbedres for å være berøringsvennlige, inkludert tillegg av et sett berøringsvennlige UI-widgets.
- Responsiv webdesign klar - jQuery Mobile er et 'mobile-first' rammeverk, ikke 'bare mobile'.
- Oppsett og temamotor - svært utvidbart og tilpassbart tema og layoutmotor.
- Ajax-navigasjonsmodell for siden - last inn nye sider raskere ved hjelp av Ajax og HTML5 pushstate i stedet for full sideoppdateringer.
La oss dykke ned i hver av disse fem grunnene:
1. Bred nettleser- og enhetsdekning
'Don't break the web' har vært jQuery Mobile's mantra. Det store løftet på nettet var at hvem som helst, hvor som helst i verden, kunne få tilgang til innhold ved å skrive inn en URL eller klikke på en lenke.
jQuery Mobile er det eneste store UI-rammeverket som er i tråd med at alle i verden kan få tilgang til innhold via en URL eller lenke. jQuery Mobile omfavner begrepene på nettet og jobber med det, ikke mot det. Den omfatter progressiv forbedring der den leverer grunnleggende HTML til enheter som ikke kan håndtere CSS og Ajax, og forbedrer deretter enhetene som støtter den.
2. Berøringsvennlige skjemainnganger og UI-widgets
Hvis du noen gang har prøvd å merke av i en ikke-mobilvennlig form, vet du hvilken smerte det kan være å måtte zoome inn og ut for å treffe dårlig utformede formelementer. Du vil sørge for at skjemaelementene og UI-widgetene fungerer godt med berøring. Touch er nå på bærbare datamaskiner og stasjonære datamaskiner, så det er nå fullstendig unnskyldelig å lage nettsteder som ikke er designet for å støtte angrepet av nye berøringsdyktige enheter som treffer markedet. jQuery Mobile er designet først (men fungerer fortsatt bra med en mus), slik at du får store, tykke trykkmål som er fingervennlige for alle formelementene og UI-widgetene.
jQuery Mobile forbedrer skjemaene dine automatisk for å bli berøringsvennlige.Avkrysningsbokser er pakket inn i en veldig sjenerøs etikett for å skape en fin trykk-sone, så det er lett å trykke på den tiltenkte avmerkingsboksen. Tekstområder er problematiske på mobil når du går forbi det tildelte tekstområdet (du må rulle med to fingre for å se innhold i et rullbart tekstområde), så jQuery Mobile vokser automatisk tekstområder slik at brukeren enkelt kan se innholdet de har skrevet inn på alle tider.
Mange typer lett utformede og forbedrede formelementer finnes i jQuery Mobile, som glidebryteren, avkrysningsruten og radioapparater, søkeinngang og utvalgte menyer. Hvert av disse formelementene kommer også med en alternativ 'mini' -versjon, som er ideell for å sette inn i topp- og bunntekstelementer på siden din (for eksempel et mini-valgelement for navigering).
jQuery Mobile har også widgets som vedvarende verktøylinjer, knapper, dialogbokser, og min personlige favoritt er den nye popup-widgeten, som lar deg popup hver type innhold der du utløser det. Dette er nyttig for å vise skjemaer på siden, dialoger, bilder, kart og video osv. Flere widgets blir lagt til med hver versjon av jQuery Mobile, som alle er berøringsvennlige og fungerer på tvers av en rekke enheter og nettlesere.
3. Responsiv webdesignvennlig
Du har alltid vært i stand til å utvikle responsive nettsteder på toppen av jQuery Mobile fordi det er et mobil-første-rammeverk ... IKKE bare mobil. Og i 1.3-versjonen av jQuery mobile blir det gitt mye mer fokus på responsive webdesignfunksjoner.
Ny panel-widget
Kjenner du de menyene som glir ut fra siden? Populært av Facebooks mobilapplikasjon, og dette brukergrensesnittmønsteret er veldig kjent for de fleste brukere på mobil. Vis panelene i handling.
Responsive tabeller
Tabeller kan bytte til en stablet presentasjon av etikett / datastil med smale skjermbredder. jQuery Mobile kaller denne tabellen for reflow.
Responsivt rutenett
Rutenettene til jQuery Mobile består av enkle rutenettblokker som kan stables oppå hverandre når de vises på mindre skjermer.
4. Oppsett og temamotor
jQuery Mobile ser på din data-* attributter i HTML-en din og forbedrer den med atferd og stil. For eksempel ved å søke data-role = ”listview” til dine ikke-ordnede lister, blir CSS-klasser automatisk injisert i listene dine, slik at det ser ut som en mobilisert liste. Og hvis det er lenker i listeelementene dine, vil den legge til pilen på listen for å vise at du kan klikke for å gå til en ny side ved å berøre det aktuelle elementet.
De data-* attributter gir deg grunnleggende formatering og struktur, men alt i jQuery Mobile er valgfritt, og CSS-klassene er utvidbare, så du er ikke låst inn i standardtemaet.
Det første du bør gjøre for å begynne å tilpasse applikasjonen din, er å starte med jQuery Mobile Themeroller. Det er så lett for å lage dine egne temafarger ved å dra og slippe farger fra fargepaletten rett på elementet du styler. Themeroller har til og med integrert Adobes Kuler-verktøy, som gir de beste brukerrangerte fargevalgene å velge mellom.
I eksemplet ovenfor har jeg bygget et 'A' og 'B' tema. jQuery Mobile har muligheten til å rekursivt bruke temaene dine til elementer ved hjelp av datatema Egenskap. Hvis jeg ville at siden min skulle bruke standardtemaet 'A' og skjemaet mitt til å bruke 'B' -temaet, ville jeg bare bruke data-tema = ”b” til skjemaelementet mitt, og alle elementene i skjemaet blir automatisk stylet med ’B’-temaet.
5. Navigasjonsmodell for Ajax-sider
I stedet for å laste inn hele siden, ser jQuery Mobile etter lenker lokale til domenet du er på, og henter det nye sideinnholdet med Ajax. Når en bruker klikker på en lenke, blir innholdet på den nye siden lastet den inn i en ny div og overgikk deretter til gjeldende visningsport.
La oss si at du er på index.html og deretter klikker du på en lenke til side.html og lenken til side.html har følgende markering:
a href = "page.html" data-transition = "slide"> Link / a>
Merk: dataovergang attributt her er ikke påkrevd, dette er bare en demonstrasjon av å endre sideovergangsanimasjonen til å skyve i stedet for standard overgang for fade-side. Det er mange andre sideoverganger innebygd i jQuery mobile fra en enkel fade til en mer kompleks, flytovergang.
Hvis nettleseren du bruker støtter HTML5 pushstate, vil URL-adressen i nettleservinduet bli oppdatert til yourdomain.com/page.html når den nye siden er ferdig med å gli inn. Dessuten vises en indikator for spinnende lasting mens den nye siden lastes inn for å gi brukeren tilbakemelding om at lenken ble truffet.
Den største fordelen med denne måten å laste inn sider på er at du ikke trenger å initialisere alle JavaScript- og CSS-forespørsler på den andre siden. Selv om disse eiendelene lastes fra hurtigbufferen, er det besparelser på utførelsestid på mobile enheter.
Når den første siden lastes inn med jQuery Mobile, er alle skriptene og stilene dine allerede initialisert på enheten din, slik at vi ikke trenger å gjøre det igjen når du laster inn en ny side. Det eneste som trengs for å gjengi en ny side er det nye HTML-fragmentet. Med denne metoden for lasting av sider vil du ende opp med raskere etterfølgende sideforespørsler som er viktige for å utvikle en flott mobilopplevelse.
Les mer på jQuery Mobils side-navigasjonsmodell.
Tips: last inn nye sider umiddelbart (ingen lastindikator)
Det er et par måter du kan få til å laste inn nye sider enda raskere ... øyeblikkelig. Den første måten er at hvis du vet at brukeren sannsynligvis besøker en bestemt side neste, kan du legge til i forhåndshenting dataattributt til koblingene dine for å få jQuery Mobile til å laste dem inn etter at den nåværende siden er lastet inn.
a href = "page.html" data-prefetch> Link / a>
Dette vil lastes inn den nye siden lydløst i bakgrunnen etter at vinduet er lastet inn.
Den andre måten er å endre strukturen på siden og legge inn sider på den aktuelle siden. Vær forsiktig med dette, fordi det vil øke din første nyttelast og ikke være tilgjengelig direkte via URL. Men med å skape separat divs med unike ID-er og datarolleside (flersidestruktur), vil de nye sidene dine umiddelbart lastes inn når du klikker på en lenke. Bare vær sikker på at disse sidene er på samme DOM-nivå som hovedsiden din.
div id = "newpage" data-role = "page"> Ny side / div>
Koble deretter til den innebygde siden med en hash og side-ID på din nåværende side.
a href = "# newpage"> Vis ny side / a>
Dette vil laste inn sideinnholdet inne i div med id ny side.
Med disse to metodene vil alt nytt sideinnhold være tilgjengelig med en gang, og det skal ikke vises noen lasteindikator.
Den nye sidens navigasjonsmodell gitt av jQuery Mobile, jobber med nettet for å få nye sider til å lastes enda raskere enn tradisjonelle helsideslast ved å bare laste inn fragmentet av HTML som du trenger for å gjengi nye sider, og gir deg også noen få måter å få denne prosessen til å virke øyeblikkelig for brukeren.
Nettlevering for alle
jQuery Mobile er et eksempel på at nettet lever opp til sitt løfte om at alle skal ha samme tilgang til gratis og offentlig innhold lagt ut på nettet, uavhengig av hvilken enhet de bruker. Det er ikke bare for mobil, det er 'mobile-first', IKKE 'mobile-only', så det kan brukes som en base for responsiv webdesign. Alle de flotte berøringsvennlige forminngangene og widgetene er fullt tema og fungerer bra uansett hvilken enhet (mobil eller stasjonær).
For informasjon og dykking i hvert av disse punktene mer grundig, sjekk ut foredraget mitt på YouTube, med tittelen 'jQuery Mobile, Web Delivery for ALL'.
