• Articles
• admin

Når vi lanserer nyere prosjekter, er det lett å glemme å oppdatere eldre blogger og nettsteder. I denne artikkelen vil jeg presentere 30 solide ideer du raskt kan implementere for å gjøre nettstedet ditt så mye mer brukervennlig. Ikke alle av dem er basert utelukkende på front-end design. Jeg vil også diskutere populære HTML5-kodingsteknikker som kan hjelpe webparsere og edderkopper å kategorisere dataene dine på riktig måte.

Ikke alle nettsteder trenger å bli oppdatert, og ikke med alle teknikker tilgjengelig i dette innlegget. Disse ideene er her for å få utviklere tenker i form av design og hvordan å lage nettsteder ser penere. Det er nå enklere enn noen gang å bygge skalerbare responsive nettstedoppsett som ser bra ut på en hvilken som helst digital skjerm, så la oss komme ned til å pusse opp nettstedene våre.

1. UX Testing

jeg er skyldig i ikke alltid å kjøre tester på nettstedet mitt, men når det er mulig, er dette en av mine favorittaktiviteter. Du kan lære så mye om typiske brukerinteraksjoner ved å studere hvordan de spiller med nettstedet ditt. Brukeropplevelsesstudier kan utføres utelukkende gjennom verktøy Som Google Analytics, eller ved hjelp av andre 3.parts ressurser.

de potensielle fordelene du kan finne er enorme. Brukeropplevelsestesting er nyttig for webutviklere å lære hvilke områder av nettstedet deres som er irriterende, ødelagte eller kan forbedres. Vurder å bruke ikke bare digitale verktøy, men også dine venner og kolleger. Å lytte til noen ekte menneskelig tilbakemelding på nettstedet ditt kan gi resultater du ikke kunne få gjennom en dataskjerm.

2. Mellomrom

vi kan tenke på mellomrom som mengden plass mellom elementene på siden din. Noen brukere vil ikke ha noe imot et trangt oppsett hvis de allerede er vant til dette. Men vurder målgruppen din, og vurder hvor mange av dem som ikke er like datakyndige som den yngre generasjonen.

du kan bestemme områder som trenger ekstra avstand gjennom split A/B-Tester og beholde tilbakemeldinger fra brukerne. Eller bare vinge det og se hva du kan komme opp med!

3. Web Fonts

Dynamiske web fonts tillate designere å bygge websider uten å være begrenset til de typiske skriftfamilier. Denne trenden har blitt stadig mer populær nå som de fleste gjennomsnittlige Internett-brukere er på en anstendig DSL / T1 / Fiberoptisk tilkobling. Inkludert referanser til 3rd party font stilark vil ikke lenger produsere store lag I DL hastigheter.

Muligens den beste leverandøren av skrifter er Gjennom Google Webfonts. Du kan få tilgang til programmet selv Om Du ikke har En Google-Konto, selv om det er fordeler å registrere. Hele installasjonsprosessen tar bare 3 trinn, og du kan ha egendefinerte Google fonts kjører på nettstedet ditt i løpet av minutter.

4. CSS3 Shadows

Når jeg snakker om å bruke skygger for å forbedre oppsettet ditt, refererer jeg faktisk til to forskjellige egenskaper. Den stadig populære box-shadow er veldig kult for divs og bokser i oppsettet ditt. Legge denne effekten på beholderen, wrapper, eller indre side bokser vil gi en slankende 3-D effekt til websiden din.

Men DET er også verdt å vurdere css3 text-shadow-egenskapen for typografi som hopper av siden. Apple er et av de første selskapene som tungt implementerer tekstskygger rundt deres layout. Du kan bygge en skremmende effekt ved å legge til tekstskygger som er motsatt fargen på skriftene dine (hvite skygger for mørk tekst, svarte skygger for lys tekst).

5. Teksturer & Gjenta Mønstre

Det er mange nettsteder som kan få ved å bare bruke standard fargevalg. Men for å få nettstedet ditt til å skille seg ut fra mengden, kan du vurdere å legge til teksturer og gjenta fliser i bakgrunnen. En av de kuleste gratis webapps Er Noise Texture Generator som kan kjøres på alle nettlesere.

bare velg BG farge og mengden av støy du vil bruke, så dette programmet vil skape et flislagt bakgrunnsbilde dynamisk. Hvis du leter etter mønstre og fliser, vil jeg anbefale Subtile Mønstre. De har en stor samling av brukbare teksturer som du kan laste ned gratis.

6. CSS3 Gradient Bakgrunner

Mens Vi diskuterer bakgrunner, bør jeg ta opp DE stadig populære CSS3-gradientene. Disse gir webutviklere en enorm fordel å holde Dem ut Av Adobe Photoshop for webbakgrunner. Og disse graderinger kan fungere på mer enn bare kroppen, brukes på navigasjonsfelt og bunntekst og andre viktige områder i oppsettet.

7. Boostrap

Twitters Bootstrap er ganske muligens den største frontend UI rammeverk for webutviklere. Dette inkluderer knapper, skjemainnganger, koblinger, kolonner og tonnevis av andre forhåndsformaterte sideobjekter. Den vanligste bruken For Bootstrap er innenfor destinasjonssider for nye applikasjoner.

men open source-utviklere bruker Også Bootstrap når de bygger demosider for biblioteker, plugins eller mini-skript de publiserer.

Jeg føler At Bootstrap har vokst til en så stor grad at Den kan brukes på et hvilket som helst nettsted i disse dager. Men utviklere som finner den største fordelen bruker Bootstrap som en rask erstatning for å rulle ut sine egne UI design. Vurder dette frontend-biblioteket neste gang du lanserer en nettside med et enkelt konkret formål: destinasjonsside, produktdemo, mobilappwebside, etc.

Relatert:

• Komme I Gang Med Twitter Bootstrap
• Bootstrap 201: Modal Vindu Plugin

8. HTML5 Kickstart

De fleste webutviklere har ennå ikke hørt OM HTML5 Kickstart opprettet av 99Lime. Dette er en annen frontend UI bibliotek som fokuserer mer på fin design estetikk enn vanlige HTML5 oppsett. Men det er kodeeksempler for å generere begge i spader. Du kan velge mellom sett med forhåndsbestemte elementer som gradient knapper og rullegardinmenyer. Jeg vil ikke si dette har samme popularitet Som Bootstrap,men så igjen hva gjør?

hvis du har tid og tålmodighet vil jeg anbefale bare å gi dette biblioteket en rask testkjøring. Bygg en liten sandkasse layout og se om du liker standard følelsen av hvert UI element. Kickstart er absolutt ikke for hvert prosjekt, men det kan være en stor tidsbesparende når fanget i et bind.

9. jQuery UI

Animasjoner Og glidere og falming elementer er vanligvis kjører av jquery biblioteket. Dette er det vanligste Open source JavaScript-biblioteket for frontend-utviklere, men det har også et følgesvennbibliotek jQuery UI. Utviklere overse dette, tenker det kan ikke gi veldig mye i retur for den ekstra KB.

men inkludert UI-biblioteket betyr at du kan oppdatere easing – anropet for dynamiske sideanimasjoner. Dette betyr at du kan tilpasse jquery animasjon type for noen dropdown menyer, falming elementer, rulle lysbildeserier, og alt annet dynamisk.

den jqueryui nettstedet har en lettelser demo side der du kan teste ut de mange varianter og se om du liker noen spesifikke animasjonstyper.

Relatert:

• Hvordan Style Jquery Ui Trekkspill
• Volumkontroller Med jQuery UI Slider
• Tilpasse og Tema jQuery UI Datepicker
• Dra Og Slipp med jQuery UI Sorterbar

10. Ekstravagante Bg Bilder

det finnes utallige nettsteder i dag som har utnyttet fullskjerm bakgrunnsbilde effekt. Hvis du kan finne en høyoppløselig bildeprøve som vil se bra ut som et bakgrunnsbilde, kan denne teknikken være verdt å legge til i oppsettet ditt. Store bakgrunner gjør en utmerket jobb med å fange brukerens oppmerksomhet, samtidig som det innebærer sjangeren til nettstedet ditt.

hvis du leter etter en rask løsning sjekk ut jquery Backstretch plugin. Dette krever bare en enkelt linje med kode for dine nye bakgrunner å skalere riktig og responsivt ved hjelp av en hvilken som helst oppløsning. Men for utviklere som er imot JavaScript-metoder, anbefaler JEG CSS3 fullpage image technique lagt ut PÅ CSS-Triks.

11. Menyikoner

for å trekke mer oppmerksomhet fra besøkende kan det være verdt å inkludere et lite ikonsett på nettsiden din. Standard menykoblinger er ofte nok til å fungere skikkelig og hjelpe brukerne å navigere mellom sider.

men Jeg er ofte imponert over å se tilpassede ikoner designet for hver menylink. Du kan finne tonnevis av gratis ikonsett som vil se perfekt ut i toppnavigasjon, sidebar eller bunntekstområde.

12. Oppdatert Fargevalg

jeg mener egentlig ikke å endre ditt overordnede fargeskjema, men mer som å legge til nye farger i den. Etter å ha kjørt samme layout i måneder etter måneder er det fint å oppdatere mindre områder og fange gjenta besøkende ved overraskelse.

noen elementer av interesse kan omfatte ankerkoblinger, overskrifter, bakgrunner og verktøylinjer. Vurder å bruke elektroniske verktøy som Fargeskjema Designer for å forbedre banen din.

13. Forbedret Nettleserstøtte

det er vanskelig å bygge et nettsted som støttes fullt ut av alle de store eldre nettleserne. Selv om svært få mennesker kjører Internet Explorer 6, vises det fortsatt i Noen Av Mine Google Analytics-rapporter. Utviklere som leter etter ideer, kan vurdere å gjøre en liten prøveversjon av nettlesertester.

de viktigste mainstream nettlesere inkluderer den nyeste versjonen av Ie9, Mozilla Firefox, Opera, Chrome, Safari, og muligens Camino/Seamonkey. Men Internet Explorer 6-8 er også fortsatt mye brukt blant bedrifter og eldre datarom. Du kan kjøre raske gjengivelsestester ved hjelp av ietester-programvaren. På samme måte har IE8 en utviklerverktøymodus der du kan bytte til eldre gjengivelsesmotorer for feilsøking.

14. Tilpasset Typografi

du kan oppleve at dine gamle layouter fortsatt bruker tekststiler effektivt, men dette er ikke alltid tilfelle. Jeg føler at stor typografi vil passe inn i layouter mye lettere. For ikke å nevne det er lettere å lese og vil ta opp mer plass på større skjermoppløsninger.

ideen om «montert typografi» er styling tekst slik at den passer godt i ditt nettsted. Du kan gå gjennom noen få sider og oppdatere disse stilene om 10-15 minutter.

15. Sosiale Medier Deling

Nå er jeg sikker på at de fleste utviklere er kjent med delingsmerkene som brukes i populære sosiale nettverk nettsteder. Facebook, Twitter, Reddit, Pinterest, Dzone og mange andre eksterne nettverk gir koder du kan legge inn på nettstedet ditt. Deretter kan besøkende dele linken din på disse nettverkene uten å måtte forlate nettstedet ditt.

på noen blogger eller nettmagasiner vil du legge merke til at disse merkene følger deg med å rulle nedover siden. Dette er en utmerket teknikk siden du kan ofte ha dem svever like utenfor kroppen området der de ikke blokkerer noe viktig innhold. Jeg anbefaler også å bla gjennom vårt innlegg på sosiale medier verktøylinjer som kan ha en lignende effekt.

16. Brukerdiskusjon

hvis du kjører ET CMS som WordPress eller Drupal, har du muligheten til å inkludere kommentarskjemaer som standard. Men når du oppretter statiske nettsider, må du sette opp ditt eget databasesystem for å etterligne denne funksjonaliteten. Men med økningen i åpen kildekode teknologi utviklere kan nå implementere bedre løsninger som Disqus.

Ved hjelp av denne metoden er du ikke stadig arbeider med å rydde opp spam og søppel fra diskusjonsområdet. Brukere som ikke allerede har En Disqus konto kan raskt koble ved hjelp av populære sosiale nettverk profiler, eller registrering rett fra siden din. Selv WordPress-brukere som er lei Av Akismet, kan bytte ved Hjelp Av Disqus Comment System plugin.

17. Utvide Bunntekstområdet

de fleste mindre nettstedoppsett vil være svært konservative med bunntekstdelen. Dette kan inkludere noen grunnleggende opphavsrett info og noen hovedside linker. Men moderne webdesigntrender støtter ideen om store bunntekster med mange metakoblinger.

Disse er ofte sett i oppstart og store bedriftsnettsteder med mye tilleggsinformasjon. Absolutt ikke prøv å tvinge dette til et oppsett der det ikke hører hjemme, men det er verdt å tenke på om å åpne opp et større bunntekstområde kan forbedre nettstedet ditt.

18. Responsify Images

Dynamiske flytende og responsive nettsidebilder har blitt en trend i seg selv. Det er nå nesten latterlig å fortsatt ha bildene satt på faste bredder, bryte ut av beholderen wrapper som vinduer er endret. Den vanligste teknikken er å bruke width: 100% VED HJELP AV CSS på alle img-elementer.

men du kan også vurdere noen andre åpen kildekode-metoder som kan være nyttige i et bind. ResponsiveImg er en slik jquery plugin med en svært liten filstørrelse. Bare ta med dette på siden din og kjør enkeltlinjekoden som målretter mot alle bildene på siden. Dette er et utmerket tillegg til mobile oppsett som fortsatt bruker desktop – basert innhold.

19. Meny Tilgjengelighet

jeg vil ikke si at dette er noe du bør hele tiden prøve å oppdatere i layoutene dine, men det er noe som utviklere og designere ikke får riktig første gang. Jeg føler det er verdt å se tilbake på navigasjonssystemene dine og brainstorming hvis det er noen bedre måter å implementere undermenylinkene på.

Sidefelt og innholdsområder vil ofte holde trekkspillmenyer siden det er nok plass vertikalt. Men tenk på horisontale navigasjonsfelt med rullegardinmenyer eller skyve undermenyer. Så lenge menylinkene dine er raske og enkle å få tilgang til, bør det ikke være noen problemer blant brukerbasen din.

20. Semantiske Mikroformater / Mikrodata

Mikroformater og Den nyere Mikrodata-spesifikasjonen brukes til å utvide metadata i HTML-koden. Disse attributtene gir ekstra informasjon om innholdet ditt og hvordan det relaterer seg til annet innhold på siden. Og til slutt hjelper disse resultatene Google med Å bestemme nettstedets rangering for individuelle søkeord, og i andre motorer som Bilde-og Videosøk.

den mest støttede dokumenterte versjonen av Mikrodata kalles Schema.org. deres nettsted gir all informasjon du trenger for å gå tilbake og redigere HTML-innholdet ditt med semantisk skjema markup. Denne Skjemasyntaksen støttes og støttes av alle de store søkemotorene, og vil trolig utvikle seg til fremtiden for semantisk metadatadesign.

21. Omorganisere Nav Linker

for noen nettsteder, kjører på fast innhold navigasjon kan ikke være et reelt problem. Men jeg har funnet i noen større business nettsteder eller porteføljer at visse navigasjonskoblinger er gitt for mye forrang. Og på samme måte er det noen elementer som sjelden kan bli funnet! Ta deg tid til å bla gjennom nettstedet ditt og oppfør deg som om du var en annen besøkende.

Vurder hvilke lenker du er mest interessert i, og eventuelt eventuelle koblinger du vil se lagt til. Disse kan inkludere en kort historie om nettstedet ditt, informasjon om teamet, kontaktinformasjon, personvern, pressemeldinger, etc. Det kan også bidra til å samle tilbakemeldinger fra brukerne og se om det er sammenhenger mellom deres ønsker og etterspørsel etter nye eller oppdaterte sider.

22. Tilbake Til Toppen Link

hvis nettstedet ditt publiserer svært lange sider med innhold, er dette et must-have-element i oppsettet ditt. Rulle tilbake Til toppen linker kan bli funnet nesten overalt i disse dager. Brukere tror ikke å treffe Hjem-tasten, og det kan være irriterende å rulle helt opp igjen. Den beste plasseringen for denne lenken flyter sammen med beholderen din, eller sitter rett i bunnteksten som vi har implementert På Hongkiat.

23. Tilpass kode / pre Tags

når du først oppretter et nettsted stilark mange utviklere vil overse de typiske sideelementer. Overskrifter og avsnitt er svært vanlig, men hva med pre koder eller inline kode koder? Disse brukes til å innkapsle forhåndsformatert kildekode syntaks som du ville se i en tekst / NFO fil. Noen nettsteder har ikke behov for disse elementene, men det er fortsatt ansett som god praksis å ha dem stylet bare i tilfelle.

24. Legge Til Bildebredde / Høydeattributter

nå kan denne oppgaven lett ta en stund, avhengig av hvor mange bilder du må gå gjennom. Men hvis du finner bilder på nettstedet ditt uten en definert bredde/høyde, kan det være verdt å oppdatere dem.

Vanligvis vises bilder som mangler disse attributtene som en 1×1 px firkant før de lastes i sin helhet. Dette vil føre til at nettsidene og rullefeltet hopper når nye bilder lastes inn. Igjen vil dette ikke være nyttig for alle, men det er verdt å merke seg som en quick fixer i noen tilfeller. OG DET er FORTSATT CSS teknikker for responsive bilder ved hjelp av faste attributter.

25. JavaScript Notifications

enhver utvikler som har jobbet I JavaScript, vet om de typiske dialogboksene. Du kan sette opp en varselboks som gir brukeren EN OK-knapp, bare vise informasjon. Men det er også bekreftelsesvarsler med ja / nei-knapper sammen med hurtigboksen som ber om brukerinngang.

Alle disse kan tilpasses ved hjelp av alertify.js. Dette er en svært liten åpen kildekode-bibliotek for å designe dine egne frontend alert bokser. Det er veldig raskt å sette opp og lett å tilpasse hvis du trenger å matche dine EGNE CSS stiler.

26. Responsive Media Queries

Dette kan ikke virke som en rask bit kode å legge til, men det tar egentlig ikke mye tid i det hele tatt. Responsive spørringer kan legges inn i din eksisterende stilark eller lagt inn i en ny responsive.css-dokument. Uansett kan du raskt sette opp gjentatte stiler for å håndtere ulike skjermstørrelser fra skjermer, tabletter og smarttelefoner.

Responsive spørringer trenger ikke alltid å svare fullt ut på oppsettet ditt. Noen ganger kan disse bare skjule biter av innhold, for eksempel det langstrakte sidepanelet eller den større bunnteksten. Du kan da vise en fullt responsiv mini bunntekst som opprinnelig er skjult i skrivebordet layout. Du kan lære mer om media spørringer i vår samling av responsive web tutorials.

27. Affiliate Linker

det vil alltid være lignende nettsteder online bygge innhold relatert til ditt felt. Det er svært sjelden nye ideer blir opprettet; de fleste av dem er avleggere og parodier fra eksisterende innhold. Men i stedet for å snu nettet til en konkurranse hvorfor ikke skape en vennlig atmosfære? Hvis du har ekstra plass i oppsettet sende ut noen e-post til relaterte nettsteder i din nisje (søk På Google) ber om å affiliate.

du kan utveksle lenker og bidra til å bringe hverandre trafikk. Dette åpner dører for nye brukere å finne nettstedet ditt mye raskere, og for å se at du er inkludert i fellesskapet av andre nettsteder også. Pluss å få tilbakekoblinger fra nettsteder med autoritet I Google kan bare hjelpe domenets troverdighet.

28. Ikonbaserte Skrifter

Nylig leste jeg en artikkel om 24ways som diskuterte ikonfonter og dataattributter. Dette fikk meg til å tenke på fremtiden for webdesign og hvordan HTML / CSS har dramatisk påvirket frontend koding. Ikonbaserte skrifter er perfekte for en rekke årsaker, inkludert navigasjonsmenyer,bestilte / uordnede lister og til og med grunnleggende sideinnhold.

Mange av disse skriftene kan raskt legges inn på nettstedet ditt ved hjelp @font-face. Dette betyr at du ikke trenger å stole på en 3dje parts tjeneste som Typekit for hosting skrifter. Det betyr også en mer semantisk design stil i stedet for bare Å bruke PNG ikoner.

29. Bildeboksskygger

hvis du vil beholde besøkende på siden din lenger, må du tilby noe ekte kvalitetsinnhold. Dette kan allerede være tilfelle for nettstedet ditt, men hvis stilene dine er blid, vil folk se andre steder. Atmosfære og estetikk er stor i god webdesign.

jeg anbefaler å bygge en rask bildeklasse som bryter en kant rundt sidebildene dine. Dette kan inkludere en liten boks skygge sammen med grenser og polstring, også. Noe for å hjelpe bildene hoppe av skjermen og skiller seg ut i avsnitt med tekst.

30. Alternative Stilark

Vurder alle de forskjellige mediestilene du må inkludere når du bygger et enkelt nettstedoppsett. Dette må se bra ut på stasjonære skjermer, bærbare datamaskiner, tabletter og muligens til og med smarttelefoner. Og ikke glem projeksjon og utskriftsmedier, som ikke alltid støttes.

hvis du har et stort publikum som bruker disse obskure typer medier, anbefaler jeg styling dine egne alternative stilark. Disse kan merkes basert på medietype som print.css, eller lagt inn i eksisterende stilark. Hvis det er nok etterspørsel, vil dine besøkende være evig takknemlig. Og det tar ærlig talt ikke mye tid å redigere standard nettstedoppsettet for vanlige skrivere.

Final Thoughts

Kreative designere og spesielt frontend webutviklere vil forhåpentligvis finne noen nyttige teknikker blant denne listen. De fleste av disse ideene bør ikke ta mer enn 1-2 timer å implementere, mens mange kan oppnås på så lite som 15-30 minutter.

Revurdering av nettstedoppsettene dine og oppdatering med nye trender fra tid til annen er ofte en god ide, spesielt med nyere versjoner AV CSS3-egenskaper som tillater innfødte nettleserskygger, animasjoner og avrundede hjørner. Dette er en utmerket samling av ideer verdt et blikk hvis du har behov for noen raske oppdateringer.

I Tillegg hvis du har spørsmål eller ideer om artikkelen gjerne dele med oss i innlegget diskusjon området.