• Articles
• admin

som vi lancere nyere projekter, er det let at glemme alt om at opdatere ældre blogs og hjemmesider. I denne artikel vil jeg præsentere 30 solide ideer, du hurtigt kan implementere for at gøre din hjemmeside lige så meget mere brugervenlig. Ikke alle er udelukkende baseret på front-end design. Jeg vil også diskutere populære HTML5-kodningsteknikker, som kan hjælpe internetparsere og edderkopper med at kategorisere dine data korrekt.

ikke alle hjemmesider skal opdateres, og ikke med alle tilgængelige teknikker i dette indlæg. Disse ideer er her for at få udviklere til at tænke med hensyn til design og hvordan man får hjemmesider til at se pænere ud. Det er nu nemmere end nogensinde før at bygge skalerbare responsive hjemmeside layouts, der ser godt ud på enhver digital skærm, så lad os komme til ned til sprucing op vores sites.

1. Test

jeg er skyldig i ikke altid at køre test på min hjemmeside lanceringer, men når det er muligt, er dette en af mine yndlingsaktiviteter. Du kan lære så meget om typiske brugerinteraktioner ved at studere, hvordan de spiller med din hjemmeside. Brugeroplevelsesundersøgelser kan udelukkende udføres gennem værktøjer som Google Analytics eller ved hjælp af andre 3.parts ressourcer.

de potentielle fordele, du kan finde, er enorme. Brugeroplevelsestest er nyttigt for udviklere at lære, hvilke områder af deres hjemmeside der er irriterende, ødelagte eller kan forbedres. Overvej at bruge ikke kun digitale værktøjer, men også dine venner og kolleger. Lytte til nogle reelle menneskelige feedback på din hjemmeside kan give resultater, du ikke kunne få gennem en computerskærm.

2. Mellemrum

vi kan tænke på mellemrum som mængden af plads mellem elementer på din side. Nogle brugere har ikke noget imod et trangt layout, hvis de allerede er vant til dette. Men overvej din målgruppe, og overvej, hvor mange af dem der ikke er så computerlitterære som den yngre generation.

du kan bestemme områder, der kræver ekstra afstand gennem split A/B-test og fastholde brugerfeedback. Eller bare vinge det og se, hvad du kan komme op med!

3.

dynamiske skrifttyper giver designere mulighed for at bygge hjemmesider uden at være begrænset til de typiske skrifttypefamilier. Denne tendens er blevet mere og mere populær nu, da de fleste gennemsnitlige internetbrugere har en anstændig DSL/T1/fiberoptisk forbindelse. Inkludering af henvisninger til 3.parts skrifttypestileark producerer ikke længere større forsinkelse i dine DL-hastigheder.

muligvis den bedste udbyder af skrifttyper er via Google. Du kan få adgang til applikationen, selvom du ikke har en Google-konto, selvom der er frynsegoder ved registrering. Den fulde installationsprocessen tager kun 3 trin, og du kan have brugerdefinerede Google fonts kører på din hjemmeside inden for få minutter.

4. CSS3 skygger

når jeg taler om at bruge skygger til at forbedre dit layout, henviser jeg faktisk til to forskellige egenskaber. Den stadigt populære boks-skygge er virkelig cool for divs og kasser i dit layout. Tilføjelse af denne effekt på din container, indpakning eller indvendige sidebokse vil give en slankende 3D-effekt til din hjemmeside.

men det er også værd at overveje CSS3-tekstskygge-egenskaben til typografi, der springer ud af siden. Apple er et af de første virksomheder, der kraftigt implementerer tekstskygger rundt omkring i deres layout. Du kan opbygge en skræmmende effekt ved at tilføje tekstskygger, der er modsat farven på dine skrifttyper (hvide skygger til mørk tekst, sorte skygger til lys Tekst).

5. Teksturer & gentagende mønstre

der er masser af hjemmesider, som kan få ved blot at bruge standard farveskemaer. Men for at få din hjemmeside virkelig skiller sig ud fra mængden, kan du overveje at tilføje teksturer og gentage fliser i din baggrund. En af de fedeste gratis apps er støj tekstur Generator, som kan køre på enhver bro.ser.

bare vælge bg farve og mængden af støj, du vil bruge, så er denne app vil skabe en flisebelagt baggrundsbillede dynamisk. Hvis du leder efter mønstre og fliser, vil jeg anbefale subtile mønstre. De har en enorm samling af brugbare teksturer, som du kan hente gratis.

6. CSS3 Gradient baggrunde

mens vi diskuterer baggrunde, bør jeg bringe de stadigt populære CSS3 gradienter op. Disse giver internetudviklere en enorm fordel ved at holde dem ude af Adobe Photoshop til internetbaggrunde. Og disse gradienter kan arbejde på mere end bare kroppen, anvendt på navigationslinjer og sidefødder og andre vigtige områder i dit layout.

7. Boostrap

kvidres Bootstrap er muligvis den største frontend UI-ramme for internetudviklere. Dette inkluderer knapper, formularindgange, links, kolonner og masser af andre forudformaterede sideobjekter. Den mest almindelige anvendelse til Bootstrap er inden for destinationssider til nye applikationer.

men open source-udviklere bruger også Bootstrap, når de bygger demosider til de biblioteker, plugins eller mini-scripts, de udgiver.

jeg føler, at Bootstrap er vokset i så massiv grad, at det kan anvendes på enhver hjemmeside i disse dage. Men udviklere, der finder den største fordel, bruger Bootstrap som en hurtig erstatning for at udrulle deres egne UI-design. Overvej dette frontend-bibliotek næste gang du lancerer en hjemmeside med et enkelt konkret formål: destinationsside, produktdemo, mobilapps hjemmeside osv.

relateret:

• Kom godt i gang med kvidre Bootstrap
• Bootstrap 201: modal vindue Plugin

8. HTML5 Kickstart

de fleste internetudviklere har endnu ikke hørt om HTML5 Kickstart oprettet af 99Lime. Dette er et andet frontend UI-bibliotek, der fokuserer mere på flot designæstetik end almindelige HTML5-layouts. Men der er kodeprøver til generering af begge i Spar. Du kan vælge mellem sæt af forudbestemte elementer som gradient knapper og rullemenuer. Jeg vil ikke sige, at dette har den samme popularitet som Bootstrap, men så igen hvad gør?

hvis du har tid og tålmodighed vil jeg anbefale bare at give dette bibliotek en hurtig testkørsel. Byg et lille sandkasselayout, og se om du nyder standardfølelsen fra hvert UI-element. Kickstart er bestemt ikke for hvert projekt, men det kan være en stor tidsbesparende, når fanget i et bind.

9. Ui

animationer, skydere og falmende elementer kører normalt fra biblioteket. Dette er det mest almindelige open source JavaScript-bibliotek for frontend-udviklere, men det har også et ledsagende bibliotek. Udviklere overser dette og tænker, at det ikke kan give meget til gengæld for den ekstra KB.

men inklusive UI-biblioteket betyder, at du kan opdatere easing – opkaldet til dynamiske sideanimationer. Det betyder, at du kan tilpasse animationstypen til alle rullemenuer, Falmende elementer, rulleskøjter og alt andet dynamisk.

hjemmesiden har en lempende demo-side, hvor du kan teste de mange variationer og se, om du kan lide nogen specifikke animationstyper.

relateret:

• hvordan man Style Jespersi UI harmonika
• Volume Controller med Jespersi Ui Slider
• tilpasning og tema jespersi Ui Datepicker
• træk og slip med Jespersi UI Sorterbar

10. Ekstravagante BG billeder

der er utallige hjemmesider i dag, som har udnyttet fullscreen baggrundsbillede effekt. Hvis du kan finde en højopløsningsbilledprøve, der ser godt ud som baggrundsbillede, kan denne teknik være værd at tilføje til dit layout. Store baggrunde gør et fremragende stykke arbejde med at fange din brugers opmærksomhed, mens de også antyder genren på din hjemmeside.

hvis du leder efter en hurtig løsning, skal du tjekke backstretch plugin. Dette kræver kun en enkelt linje kode for dine nye baggrunde til at skalere korrekt og responsivt ved hjælp af enhver opløsning. Men for udviklere, der er imod JavaScript-metoder, anbefaler jeg CSS3 fullpage-billedteknikken, der er lagt ud på CSS-Tricks.

11. Menuikoner

for at få mere opmærksomhed fra besøgende kan det være umagen værd at medtage et lille ikonsæt på din hjemmeside. Standard menulinks er ofte nok til at fungere korrekt og hjælpe brugerne med at navigere mellem sider.

men jeg er ofte imponeret over at se tilpassede ikoner designet til hvert menulink. Du kan finde masser af gratis ikonsæt, der ser perfekt ud i dit topnavigations -, sidebjælke-eller sidefodsområde.

12. Opdateret farveskema

jeg mener faktisk ikke at ændre dit overordnede farveskema design, men mere som at tilføje nye farver til det. Efter at have kørt det samme layout i måneder efter måneder er det rart at opdatere mindre områder og fange gentagne besøgende overraskende.

nogle emner af interesse kan omfatte ankerlinks, overskrifter, baggrunde og værktøjslinjer. Overvej at bruge onlineværktøjer som Color Scheme Designer til at forbedre din bane.

13. Forbedret bro. ser Support

det er svært at opbygge en hjemmeside, som er fuldt understøttet af alle de store arv bro.Serere. Selvom meget få mennesker kører Internetudforsker 6, vises det stadig i et par af mine Google Analytics-rapporter. Udviklere, der leder efter ideer, kan overveje at lave en lille prøve af bro.ser-test.

de mere vigtige mainstream bro.sere omfatter den seneste udgivelse af IE9, Opera, Chrome, Safari, og muligvis Camino/SeaMonkey. Men Internetudforsker 6-8 bruges også stadig i vid udstrækning blandt virksomheder og ældre computerlaboratorier. Du kan køre hurtige gengivelsestest ved hjælp af ietester-programmet. Tilsvarende IE8 har en udviklere værktøj tilstand, hvor du kan skifte til ældre rendering motorer til debugging.

14. Monteret typografi

du kan opleve, at dine gamle layout stadig bruger tekstformater effektivt, men det er ikke altid tilfældet. Jeg føler, at stor typografi vil passe ind i layouts meget lettere. For ikke at nævne det er lettere at læse og vil tage mere plads på Større skærmopløsninger.

ideen om “monteret Typografi” er styling tekst, så det passer LUN i din hjemmeside. Du kan gennemgå et par sider og opdatere disse stilarter på 10-15 minutter.

15. Deling af sociale medier

nu er jeg sikker på, at de fleste udviklere er bekendt med de delingsmærker, der bruges på populære sociale netværkssider. Facebook, Reddit, Pinterest og mange andre eksterne netværk giver koder, du kan integrere i din hjemmeside. Derefter kan besøgende dele dit link på disse netværk uden at skulle forlade din hjemmeside.

på nogle blogs eller internetmagasiner vil du bemærke, at disse badges følger dig med at rulle ned på siden. Dette er en fremragende teknik, da du ofte kan få dem til at svæve lige uden for kropsområdet, hvor de ikke blokerer for noget vigtigt indhold. Jeg anbefaler også at gennemse vores indlæg på sociale medier værktøjslinjer, som kan have en lignende effekt.

16. Brugerdiskussion

hvis du kører et CMS som f.eks. Men når du opretter statiske hjemmesider, skal du opsætte dit eget databasesystem for at efterligne denne funktionalitet. Men med stigningen i open source-teknologi kan udviklere nu implementere bedre løsninger som f.eks.

ved hjælp af denne metode, du er ikke konstant beskæftiger sig med oprydning spam og junk fra diskussionsområdet. Brugere, der ikke allerede har en Facebook-konto, kan hurtigt oprette forbindelse ved hjælp af populære sociale netværksprofiler, eller tilmelding direkte fra din side. Selv brugere, der er syge af Akismet kan skifte ved hjælp af disks kommentar system plugin.

17. Udvid sidefoden område

de fleste mindre hjemmeside layouts vil være meget konservativ med den nederste sidefod sektion. Dette kan omfatte nogle grundlæggende oplysninger om ophavsret og et par links til hovedsiden. Men moderne designtendenser understøtter ideen om store sidefødder med masser af meta links.

disse ses almindeligvis i startups og store virksomheds hjemmesider med masser af yderligere oplysninger. Bestemt ikke forsøge at tvinge dette ind i et layout, hvor det ikke hører hjemme, men det er værd nogle overvejelser, hvis åbning af en større sidefod område kan forbedre din hjemmeside oplevelse.

18. Responsify billeder

dynamisk væske og responsive hjemmeside billeder er blevet en trend i sig selv. Det er nu næsten latterligt at stadig have dine billeder indstillet i faste bredder og bryde ud af containerindpakningen, når vinduerne ændres. Den mest almindelige teknik er at anvende width: 100% ved hjælp af CSS på alle img-elementer.

men du kan også overveje nogle andre open source metoder, som kan vise sig nyttige i et bind. ResponsiveImg er et sådant plugin med en meget lille filstørrelse. Bare inkludere dette i din side og køre single-line kode rettet mod alle billeder på siden. Dette er en fremragende tilføjelse til mobile layouts, der stadig bruger desktop-baseret indhold.

19. Menu tilgængelighed

jeg vil ikke sige, at dette er noget, du konstant skal prøve at opdatere i dine layouts, men det er noget, som udviklere og designere ikke får ret Første gang. Jeg føler, at det er værd at se tilbage på dine navigationssystemer og brainstorming, hvis der er bedre måder at implementere undermenulinks på.

sidebjælker og indholdsområder holder ofte harmonikamenuer, da der er plads nok lodret. Men tænk på vandrette navigationslinjer med rullemenuer eller glidende undermenuer. Så længe dine menulinks er hurtige og nemme at få adgang til, bør der ikke være nogen problemer blandt din brugerbase.

20. Semantiske mikroformater/mikrodata

mikroformater og den nyere mikrodataspecifikation bruges til at udvide metadata inde i din HTML-kode. Disse attributter giver ekstra oplysninger om dit indhold, og hvordan det relaterer til andet indhold på siden. Og i sidste ende hjælper disse resultater Google med at bestemme din hjemmesides rang for individuelle søgeord og inden for andre motorer som billed-og videosøgning.

den mest understøttede dokumenterede version af mikrodata kaldes Schema.org. deres hjemmeside indeholder alle de oplysninger, du skal bruge til at gå tilbage og redigere dit HTML-indhold med semantisk skema markup. Denne Skemasyntaks understøttes og understøttes af alle de store søgemaskiner og vil sandsynligvis udvikle sig til fremtiden for semantisk metadatadesign.

21. Omarrangere Nav Links

for nogle hjemmesider, kører på fast indhold navigation kan ikke være et reelt problem. Men jeg har fundet i nogle større business hjemmesider eller porteføljer, at visse navigation links er givet for meget forrang. Og på samme måde er der nogle ting, som sjældent kan findes! Tag dig tid til at gennemse din hjemmeside og opføre dig som om du var en anden besøgende.

overvej hvilke links du er mest interesseret i, og muligvis eventuelle links, som du gerne vil se tilføjet. Disse kan omfatte en kort historie af din hjemmeside, oplysninger om holdet, kontaktoplysninger, privatlivets fred, pressemeddelelser, etc. Det kan også hjælpe med at indsamle brugerfeedback og se, om der er sammenhænge mellem deres ønsker og efterspørgsel efter nye eller opdaterede sider.

22. Tilbage til toppen Link

hvis din hjemmeside udgiver meget lange sider med indhold, så er dette et must-have element i dit layout. De rulle tilbage til toppen links kan findes næsten overalt i disse dage. Brugere tror ikke at ramme Home-tasten, og det kan være irriterende at rulle helt op igen. Den bedste placering for dette link flyder langs din container, eller sidder lige i sidefoden, som vi har implementeret på Hongkiat.

23. Tilpas kode / pre Tags

når først at skabe en hjemmeside stylesheet mange udviklere vil overse de typiske sideelementer. Overskrifter og afsnit er meget almindelige, men hvad med pre tags eller inline kode tags? Disse bruges til at indkapsle præformateret kildekodesyntaks, som du ville se i en tekst/NFO-fil. Nogle hjemmesider har ikke behov for disse elementer, men det er stadig betragtes som god praksis at have dem stylet just in case.

24. Tilføjelse af Billedbredde / Højdeattributter

nu kan denne opgave let tage et stykke tid, afhængigt af hvor mange billeder du skal gennemgå. Men hvis du finder billeder på din hjemmeside uden en defineret bredde/højde, kan det være værd at opdatere dem.

typisk vises billeder, der mangler disse attributter, som en 1 til 1 stk.firkant, før de indlæses fuldt ud. Dette vil få dine hjemmesider og rullebjælke til at hoppe, når nye billeder indlæses. Igen vil dette ikke være nyttigt for alle, men det er værd at bemærke som en hurtig løsning i nogle tilfælde. Og der er stadig CSS-teknikker til responsive billeder ved hjælp af faste attributter.

25. JavaScript-meddelelser

enhver udvikler, der har arbejdet i JavaScript, kender til de typiske dialogbokse. Du kan opsætte en advarselsboks, der giver brugeren en OK-knap, bare vise oplysninger. Men der er også bekræftelsesadvarsler med ja/nej-knapper sammen med promptboksen, der beder om brugerinput.

alle disse kan tilpasses ved hjælp af alertify.js. Dette er et meget lille open source-bibliotek til design af dine egne frontend-advarselsbokse. Det er meget hurtigt at opsætte og let at tilpasse, hvis du har brug for at matche dine egne CSS-stilarter.

26. Responsive medieforespørgsler

dette virker måske ikke som en hurtig smule kode at tilføje, men det tager virkelig ikke meget tid overhovedet. Responsive forespørgsler kan tilføjes i din eksisterende stilark eller tilføjet til en ny lydhør.css-dokument. Uanset hvad kan du hurtigt opsætte tilbagevendende stilarter til at håndtere forskellige skærmstørrelser fra skærme, tablets og smartphones.

Responsive forespørgsler behøver ikke altid at fuldt responsify dit layout. Nogle gange kan disse bare skjule bits af indhold, såsom din aflange sidebjælke eller større sidefod. Du kan derefter vise en fuldt lydhør mini sidefod, som oprindeligt er skjult i skrivebordet layout. Du kan lære mere om medieforespørgsler i vores samling af responsive tutorials på nettet.

27. Affiliate Links

der vil altid være lignende hjemmesider online bygning indhold relateret til dit felt. Der skabes meget sjældent nye ideer; de fleste af dem er offshoots og parodier fra eksisterende indhold. Men i stedet for at gøre internettet til en konkurrence, hvorfor ikke skabe en venlig atmosfære? Hvis du har den ekstra plads i dit layout sende et par e-mails til relaterede hjemmesider i din niche (Søg Google) beder om at affiliate.

du kan udveksle links og hjælpe med at bringe hinanden trafik. Dette åbner døre for nye brugere til at finde din hjemmeside meget hurtigere, og at se, at du er inkluderet i Fællesskabet af andre hjemmesider samt. Plus at få backlinks fra hjemmesider med autoritet i Google kan kun hjælpe dit domænes troværdighed.

28. Ikonbaserede skrifttyper

for nylig læste jeg en artikel på 24 måder, der diskuterede ikonskrifttyper og dataattributter. Dette fik mig til at tænke på fremtiden for internetdesign og hvordan HTML/CSS dramatisk har påvirket frontend-kodning. Ikonbaserede skrifttyper er perfekte af en række årsager, herunder navigationsmenuer, bestilte/uordnede lister og endda grundlæggende sideindhold.

mange af disse skrifttyper kan hurtigt tilføjes til din hjemmeside ved hjælp af @font-face. Dette betyder, at du ikke behøver at stole på en 3.partstjeneste som Typekit til hosting af dine skrifttyper. Det betyder også en mere semantisk designstil snarere end blot at bruge PNG-ikoner.

29. Billedboksskygger

hvis du vil holde besøgende på din side længere, skal du tilbyde noget ægte kvalitetsindhold. Dette kan allerede være tilfældet for din hjemmeside, men hvis dine stilarter er intetsigende, vil folk se andre steder. Atmosfære og æstetik er enorm i godt design.

jeg anbefaler at opbygge en hurtig billedklasse, der ombryder en kant omkring dine sidebilleder. Dette kan omfatte en lille boks skygge sammen med grænser og polstring, også. Alt for at hjælpe dine billeder med at hoppe ud af skærmen og skille sig ud i tekstens afsnit.

30. Alternative Stylesheets

overvej alle de forskellige medier stilarter, du skal medtage, når du bygger en enkelt hjemmeside layout. Dette skulle se godt ud på stationære skærme, bærbare computere, tablets og muligvis endda smartphones. Og glem ikke projektion og trykte medier, som ikke altid understøttes.

hvis du har et stort publikum, der bruger disse uklare medietyper, anbefaler jeg at style dine egne alternative stilark. Disse kan mærkes baseret på medietypen, såsom print.css, eller tilføjet i dine eksisterende stilark. Hvis der er nok efterspørgsel, vil dine besøgende være evigt taknemmelige. Og det ærligt tager ikke en hel masse tid til at redigere din standard hjemmeside layout til almindelige printere.

Endelige tanker

kreative designere og især frontend-udviklere vil forhåbentlig finde nogle nyttige teknikker blandt denne liste. De fleste af disse ideer bør ikke tage mere end 1-2 timer at gennemføre, mens mange kan opnås på så lidt som 15-30 minutter.

det er ofte en god ide at revurdere dine hjemmesidelayout og opdatere med nye trends fra tid til anden, især med nyere udgivelser af CSS3-egenskaber, der tillader indfødte bro.serskygger, animationer og afrundede hjørner. Dette er en fremragende samling af ideer, der er et overblik, hvis du har brug for nogle hurtige opdateringer.

derudover, hvis du har spørgsmål eller ideer om artiklen, er du velkommen til at dele med os i postdiskussionsområdet.