Når du designer dit websted, er det vigtigt at sikre, at det ser godt ud på enhver enhed, uanset skærmstørrelse og form. Responsive websteder er designet til at se godt ud på alle slags moderne enheder som computere, telefoner, tablets, tv'er, wearables og endda bilskærme. For at gøre et websted lydhørt skal du ændre din CSS- og HTML -kode for automatisk at ændre størrelsen på dets elementer afhængigt af specifikke forhold. Denne wikiHow lærer dig, hvordan du planlægger og implementerer grundlæggende responsivt webdesign.
Trin
Metode 1 af 3: Planlægning af responsivt design
Trin 1. Find ud af, hvordan dit publikum bruger dit websted
I disse dage gør de fleste mennesker, der surfer på internettet, det fra mobiltelefoner og tablets. For at et websted skal være responsivt, skal du sikre, at det vises korrekt, uanset hvor det bliver set. Hvis tid og penge er afgørende, skal du fokusere på de typer enheder, der er mest populære hos dine brugere (hvis disse oplysninger er tilgængelige), og hvordan de bruger dit websted. Find ud af ved hjælp af din analysesoftware eller en anden form for forskning:
- Hvilken slags enheder bruger de oftest til at se webstedet med særlig opmærksomhed på mobiltelefon/tablet/computermærker og skærm-/opløsningsstørrelser.
- Hvilke browsere er mest populære hos dine brugere. Hvad angår globale statistikker, er Google Chrome den mest populære webbrowser på verdensplan, men Safari er et tæt andet sted.
- Hvordan dine besøgende bruger dit websted, f.eks. Hvor meget tid de bruger på at se det, hvor de ser det, og hvilket indhold der er mest populært. Dette kan hjælpe dig med at afgøre, hvilken type indhold der er vigtigt at inkludere, og som kan udelades.
Trin 2. Design forskellige layout til forskellige enheder
Du kan bruge en kombination af CSS og JavaScript til at registrere en brugers enhed såvel som dens muligheder (uanset om den understøtter Java, Flash osv.) Og vise en bestemt version af dit websted i overensstemmelse hermed. CSS -medieforespørgsler er særligt nyttige til at bestemme enhedens størrelse/opløsning.
Trin 3. Redegør for forskellige former for interaktioner
Din besøgende kan interagere med dit websted ved hjælp af en mus, et tastatur, en berøringsskærm eller endda en skærmlæser til synshandicappede. I betragtning af dette bør dit websted reagere på museklik, tastaturetaster (Tab, Enter, Return osv.) Og fingeraftryk på skærmen.
Hover-over effekter virker ikke med noget undtagen en mus. I stedet for at bruge disse effekter kan du bruge kræve, at den besøgende klikker på en knap eller et ikon for at vise det, der tidligere blev vist på en musemarkør
Trin 4. Overvej at bruge et Content Management System (CMS)
En let måde at sikre, at dit webstedsdesign er lydhørt, er at bruge et CMS med et forudbygget responsivt tema. Ved hjælp af et CMS som Joomla, Drupal eller Wordpress kan du sikre, at dit websted ser godt ud på alle enheder uden at skulle kode de responsive elementer selv. Kontakt din webhostingudbyder for at se, hvilke CMS -værktøjer der er tilgængelige med din service.
Trin 5. Brug online -værktøjer til at teste dit websted
Nu hvor responsivt webdesign er steget i popularitet, er der en række gratis værktøjer, du kan bruge til at teste dit websted. Hvis du allerede har kodet dit websted, kan du bruge disse værktøjer til at teste, hvordan det ser ud under forskellige forhold, så du ved, hvor du skal forbedre responsiviteten:
- Mobilvenlig test fra Google: Lader dig vide, om dit websted fungerer lige så godt på mobile enheder som på computerskærme.
- resizeMyBrowser: Giver dig mulighed for at se dit websted i forskellige opløsninger.
- Ansvarlig: Viser dit websted på forskellige enhedsskærme i forskellige layout (sidelæns eller højre side opad).
Metode 2 af 3: Gør sidelayoutet responsivt
Trin 1. Overvej en gratis, responsiv stilarkramme
En ramme er et forudskrevet sæt HTML, CSS og/eller JavaScript, som du kan bruge som et skelet til dit websted. Rammer er alle testet og optimeret til at fungere med alle browsere, så alt hvad du skal gøre er at indsætte dit indhold, tilføje dine medier og farvepræferencer og udgive dit websted. Nogle populære rammer er:
- Bootstrap
- Skelet
- Fundament
Trin 2. Indstil visningsporten med et metatag
Hvis du ikke bruger en ramme, vil du starte med det vigtigste aspekt ved kodning af et responsivt websted: Viewport. Viewporten er den del af webstedet, der er synlig for brugeren. Nøglen til at få dit websted vist korrekt uanset skærmstørrelse er at skalere visningsportens størrelse i META -tagget. For at gøre dette skal du inkludere dette tag øverst på hver side på webstedet:
Trin 3. Angiv tekststørrelsen i forhold til visningsporten
Når dit visningsport er indstillet, skaleres teksten på din side, så den passer til skærmen. Dog kan skrifttyper blive vist for store eller for små, hvis deres størrelser ikke er angivet i forhold til visningsporten. Du kan gøre dette ved at definere skriftstørrelsen som en bestemt procentdel af visningsporten med vw -enheden. Dette eksempel fortæller H1 -overskrifterne at vise med 10% af viewportens bredde, uanset dens størrelse:
wikiHow
Trin 4. Brug medieforespørgsler til at vise forskellige stilarter til forskellige skærmstørrelser
Medieforespørgsler giver dig mulighed for at vælge, om visse CSS -elementer skal vises afhængigt af skærmstørrelse. Du kan angive specifikationerne for din medieforespørgsel i din CSS -fil. I dette eksempel bliver kroppens baggrundsfarve rød, hvis brugerens skærmstørrelse er 480px eller større:
wikiHow
@media-skærm og (min. bredde: 480px) {body {baggrundsfarve: aqua; }}
Metode 3 af 3: Gør billeder lydhøre
Trin 1. Brug egenskaben CSS -bredde til at skalere billeder
I stedet for at angive bredden af billedet til en bestemt mængde pixels (f.eks. 500px), skal du bruge en procentdel (f.eks. 100%), så billedet ser på bredden på dets overordnede og justerer derefter. Indstilling af et billeds bredde til 100% tvinger billedet til at skalere op og ned afhængigt af størrelsen på seerens skærm. For at gøre dette in-line:
Trin 2. Brug egenskaben max-width til at begrænse skalering af billedets faktiske størrelse
Hvis du bruger egenskaben bredde i det foregående trin til at skalere et billede til 100%, vokser eller krymper billedet til at passe 100% af beholderen, uanset størrelsen. Det betyder, at hvis billedet er på den mindre side, vil det skalere op større end dets originale størrelse og udseende af mindre kvalitet. For at forhindre, at dette sker, skal du bruge maks. Bredde til at indstille billedets maksimale skaleringsstørrelse til 100% (dets faktiske størrelse). Sådan gør du:
Trin 3. Brug HTML -billedelementet til at vise forskellige billeder på forskellige skærmstørrelser
Hvis du vil oprette billeder i brugerdefineret størrelse til visning på skærme i forskellige størrelser, kan du angive, hvilke fotos der skal vises i din HTML-kode. Opret billeder i forskellige størrelser, og brug derefter denne kode som et eksempel til at angive, hvilket billede der skal bruges på 600px og 1500px bredde skærme:
