Den første ting, som de fleste designere overvejer, når de bygger deres webside, er hvad løsning at designe til. Hvad dette virkelig svarer til, er at beslutte, hvor bredt dit design skal være. Der findes ikke længere noget som en standardwebsite bredde.
Hvorfor overveje opløsning
I 1995 var standard 640 pixel-by-480 pixel skærme de største og bedste tilgængelige skærme. Dette betød, at webdesignere fokuserede på at skabe sider, der så godt ud i webbrowsere, maksimeret på en 12 '' til 14 '' skærm i den opløsning.
Disse dage udgør 640 x 480 opløsningen mindre end 1 procent af de fleste webstrafik. Folk bruger computere med meget højere opløsninger inklusive 1366-by-768, 1600-by-900 og 5120-by-2880. I mange tilfælde fungerer design til en skærm på 1366 x 768.
Todya, de fleste har store bredskærmsskærme, og de maksimerer ikke deres browservindue. Så hvis du beslutter at designe en side, der ikke er mere end 1366 pixels bred, vil din side sandsynligvis se godt ud i de fleste browservinduer, selv på store skærme med højere opløsninger.
Browserbredde
Et ofte overset problem, når man beslutter bredden på en webside, er hvor stor dine kunder holder deres browsere. Specifikt maksimerer de deres browsere i fuld skærmstørrelse, eller holder de dem mindre end fuldskærm?
Når du har taget højde for kunder, der maksimerer eller ikke, skal du tænke på browsergrænserne. Hver webbrowser bruger en rullebjælke og grænser op til siderne, der krymper den ledige plads fra 800 til omkring 740 pixels eller mindre på 800 x 600 opløsninger og ca. 980 pixels på maksimerede vinduer ved 1024 x 768 beslutninger. Dette kaldes browser krom og det kan tage væk fra det anvendelige rum til dit sidedesign.
Sider med fast eller flydende bredde
Den faktiske numeriske bredde er ikke det eneste, du skal tænke på, når du designer dit websteds bredde. Du skal også beslutte, om du har en fast bredde eller væskebredde. Med andre ord, vil du indstille bredden til et bestemt tal (fast) eller til en procentdel (væske)?
Fast bredde
Sider med fast bredde er nøjagtigt som de lyder. Bredden er fastgjort til et bestemt nummer og ændrer sig ikke, uanset hvor stor eller lille browseren er. Denne tilgang kan være god, hvis du har brug for, at dit design ser nøjagtigt det samme ud, uanset hvor bredt eller snævert dine læsers browsere er, men denne metode tager ikke højde for dine læsere. Personer med browsere, der er smallere end dit design, skal rulle vandret, og folk med brede browsere har store mængder tom plads på skærmen.
For at oprette sider med fast bredde skal du bruge bestemte pixelnumre til bredderne på dine sidedelinger.
Flydende bredde
Sider med flydende bredde (undertiden kaldet sider med fleksibel bredde) varierer i bredde afhængigt af hvor bredt browservinduet er. Denne strategi bringer design, der fokuserer mere på kunder. Problemet med sider med flydende bredde er, at de kan være vanskelige at læse. Hvis den scanlængde af en tekstlinje er længere end 10 til 12 ord eller kortere end 4 til 5 ord, kan det være svært at læse. Dette betyder, at læsere med store eller små browservinduer har problemer.
Brug procenter eller for at oprette sider med fleksibel bredde ems til bredderne på dine sideafdelinger. Bliv fortrolig med CSS maks. bredde ejendom. Denne egenskab giver dig mulighed for at indstille en bredde i procent, men derefter begrænse den, så den ikke bliver så stor, at folk ikke kan læse den.
CSS-medieforespørgsler
Den bedste løsning i disse dage er at bruge CSS-medieforespørgsler og responsivt design til at oprette en side, der tilpasser sig bredden af browseren, der ser den. Et responsivt webdesign bruger det samme indhold til at oprette en webside, der fungerer, uanset om du ser det med 5120 pixels i bredden eller 320 pixels i bredden. Siderne i forskellig størrelse ser anderledes ud, men de indeholder det samme indhold. Med medieforespørgslen i CSS3 svarer hver modtagende enhed forespørgslen med sin størrelse, og stilarket tilpasser sig den pågældende størrelse.