Oblikovanje spletišča

Pri oblikovanju spletišča stremimo k preprosti oblikovni podobi, ki naj ne vsebuje nepotrebnih odvečnih elementov. Ob obisku spletne strani zaznamo najprej obliko in šele nato vsebino, zato je zelo pomembna izbira in kombinacija barv, pisave in postavitev grafičnih elementov.

Glavno vodilo pri oblikovanju spletišča bo odzivnost spletnih strani. Da bi vedeli, kaj je odzivnost, kaj nam omogoča in kako jo implementiramo, je potrebno najprej poznati tipe postavitev strani in vedeti, kako se obnašajo na različnih napravah. Postavitve ločimo po tem, kako se stran prilagaja različnim širinam brskalnika ali postavitvi naprave (pokončno ali ležeče). Glede na to ločimo štiri večje tipe:

• Statična postavitev strani ali postavitev s fiksno širino je postavitev s fiksno določeno širino, ki se ne spreminja. Pred prihodom mobilnih naprav je bila to standardna postavitev. Tak način postavitve je nepredvidljiv, saj lahko brskalniki to postavitev prikažejo na različne načine, kot npr. preveliko stran porežejo in prikažejo možnost premikanja ali pa jo skrčijo ter omogočijo približevanje določenih delov, ki jih uporabnik želi.
• Fleksibilna postavitev strani uporablja relativne merske enote namesto fiksnih. Najpogosteje so to odstotki, lahko pa so tudi enote em. Postavitev strani se navadno prilagaja celotni širini. Pomanjkljivost te postavitve je preveliko raztezanje vsebine, če je širina brskalnika zelo široka, ali natlačenost, če je širina zelo ozka.
• Adaptivna ali odzivna postavitev strani se delno prilagaja različnim širinam. Tako kot pri statični postavitvi so elementi fiksnih širin, vendar se s pomočjo CSS medijskih poizvedb prilagodijo prelomnim točkam. CSS medijske poizvedbe omogočajo, da elementu spremenimo lastnosti pri določni prelomni točki širine strani.
• Odzivna postavitev strani je najbolj prilagodljiv tip postavitve. Za velikosti elementov se uporabljajo relativne merske enote (npr. odstotki). Pri izgradnji strani z odzivno tehniko najprej oblikujemo vsebino, prilagojeno za najmanjše naprave (mobilni zasloni), nato pa pri večji širini na tabličnih in osebnih računalnikih najdemo način, kako razširiti postavitev in elemente. Prednosti takega načina oblikovanja sta hitrost in izvedba mobilnih spletnih strani, saj so mobilne naprave pogosto priključene na počasnejče internetne povezave in so nekoliko manj zmogljive pri izvajanju CSS medijskih poizvedb.

Bootstrap

Za oblikovanje in postavitev spletnih strani izberemo brezplačni odprtokodni spletni okvir Bootstrap. Bootstrap vsebuje predloge za tipografijo, obrazce, gumbe, navigacijo in druge komponente vmesnika, ki temeljijo na HTML in CSS, ter izbrane razširitve JavaScript. Bootstrap podpira odzivno postavitev spletnih strani, ki omogoča, da se spletišče samodejno prilagaja ločljivosti zaslona naprave s katero brskamo. Bootstrap temelji na mrežnem sistemu 12 stolpcev, ki ga uporabimo za oblikovanje in postavitev spletnih strani.

Tipografija in barve

Ustrezno pisavo izberemo na spletni strani Google Fonts.

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

font-family: 'Roboto', sans-serif;