Skalanleg vefhönnun gerir það betur!

31.03. 15Soffía Kristín Þórðardóttir

Hugtakið skalanleg vefhönnun (e. "responsive web design") eða skalanlegir vefir er notað um vefsíður sem lagast að breidd vafrans eða skjásins sem þær birtast í. Sumir vilja fremur tala um sveigjanlega vefhönnun sem er ágætis hugtak. Enn aðrir nota snjallvefir eða snjallir vefir en í mínum huga er skalanleg vefhönnun aðeins einn mikilvægur eiginleiki snjallra vefja og veflausna. Í þessari grein verður notast við hugtakið skalanleg vefhönnun eða skalanlegur vefur.

Samræmd upplifun milli tækja

Kostir skalanlegrar vefhönnunar eru margir en þeir allra helstu eru að:

  • framsetning efnis er sérsniðin fyrir notendur eftir tækjum
  • notendur þurfa ekki að vita slóðina fyrir mobile vefinn
  • óþarfi er að þysja inn til að lesa smátt letur
  • hver síða í vefrénu hefur aðeins eina slóð sem virkar í öllum tækjum og er aðgengileg leitarvélum
  • auðveldara er að deila efni vefsins á milli mismunandi tækja t.d á samfélagsmiðlum

Efnið þarf að njóta sín í öllum tækjum

Mikilvægur þáttur notendaupplifunar á vefsíðum er að efni vefsins fái að njóta sín í mismunandi tækjum hvort sem það er á litlum skjá snjallsíma eða risastórum skjá með hárri upplausn. Skalanleg vefhönnun snýst því að stórum hluta um að hanna innihald vefsíðna. Efnið og innihald vefsins er jafnframt oft ein stærsta áskorunin þegar kemur að því að endurhanna vefi og gera þá skalanlega. Verkefnið verður viðameira eftir því sem vefurinn er stærri og efnismeiri.

Vel skipulagt efni skalast betur

Efni vefsíðna er af ýmsum toga. Texti skalast almennt séð vel en myndir, töflur og sérhæfð virkni sem þarf sitt pláss getur reynst vandasamt að koma fyrir á litlum skjám.

Þá er oft best að endurhugsa virknina frá grunni og tileinka sér svokallaða ‘mobile first’ aðferðarfræði sem miðar að því að útfæra virknina fyrst fyrir smærri tæki og skala hana svo upp með flóknari birtingarmynd eftir því sem skjárinn er stærri.

Ýmsar lausnir eru í boði til að skala myndir með breidd vefsins og til að tryggja að notendur séu ekki að hlaða inn óþarflega þungum myndum. Flestar þessar lausnir eru skammt á veg komnar en unnið er að því að innleiða staðlaða virkni fyrir vefsíður til að auðvelda þessi mál.

Ekki meira WYSIWYG

Við innleiðingu á skalanlegri vefsíðu er mikilvægar en oft áður að aðskilja útlit vefsins frá innihaldi. Útliti vefsíðna er iðulega stýrt með CSS en mörg vefumsjónarkerfi bjóða upp á notkun s.k. WYSIWYG* ritla til að stílgera efni og þeir valda oft fleiri vandamálum en þeir leysa.

Skalanleg vefsíða sem inniheldur fastar stærðir á töflum, myndum eða myndböndum í tiltekinni breidd sem hefur verið harðkóðuð í gegnum WYSIWYG ritil mun fljótt spilla fyrir skalanleika vefsíðunar og sprengja efnið út fyrir gluggann.

Skalanlegar vefsíður kalla á breytt vinnubrögð vefumsjónarfólks. Huga þarf meira að strúktúr efnisins og hvernig það muni birtast notandanum á mismunandi skjástærðum. Öll betri vefumsjónarkerfi ættu að bjóða upp á ritil sem hentar fyrir innsetningu á skalanlegu efni. Virkni þeirra á fyrst og fremst að hjálpa fólki að stíla efnið út frá skipulagi efnisins en ekki útliti þess t.d. bjóða upp á að merkja millifyrirsagnir, atriðalista og greinarskil í texta.

Skalanleg vefhönnun komin til að vera

Það getur verið viðamikið verkefni að breyta hefbundnum vef og aðlaga allt innihald vefsins þannig að hann virki vel í stærðum sjalltækja. Einnig getur verið snúið að aðlaga efnið fyrir risaskjái sem hafa mun hærri upplausn en hefðbundir vefir hafa verið hannaðir fyrir hingað til.

Við höfum tekist á við allnokkur slík verkefni hér hjá TM Software og reynslan segir okkur að það að hanna nokkur sniðmát sem eiga að henta öllu efninu er sjaldnast fullnægjandi. Yfirleitt þarf að skoða einstaka efnisíður og aðlaga þær sérstaklega. Það skal þó hafa í huga að ekkert verkefni er óyfirstíganlegt og mikilvægast er að hefja undirbúninginn og taka fyrstu skrefin í þá átt að gera vefinn skalanlegan.

Skalanleg vefhönnun er sannarlega komin til að vera og er nú sjálfsögð krafa í vefverkefnum hvort sem um er að ræða nýja vefi eða endurhönnun á eldri vefum. Þegar lagt er af stað í slíkt verkefni er mikilvægt að hafa í huga að það er ekki nægjanlegt að hanna fallega umgjörð um efnið heldur er nauðsynlegt að huga vel að efninu og innihaldinu sjálfu.

Snjallsímar og spjaldtölvur hafa náð gríðarlegri dreifingu á skömmum tíma og það er líklegra en hitt að flóra tækja með vefvöfrum muni aukast enn frekar í nánustu framtíð. Það eru því áfram krefjandi tímar framundan við hönnun og efnisuppbyggingu vefja sem styðja sístækkandi flóru tækja. Við hjá Veflausnum TM Software hlökkum til að takast á við þessar áskoranir og tækifæri.

*WYSIWYG er skammstöfun fyrir "What you see is what you get" (í. það sem þú sérð er það sem þú færð).

Höfundur

Soffía Kristín Þórðardóttir
 

Soffía Kristín Þórðardóttir

Soffía er forstöðumaður Veflausna TM Software. Hún hóf störf hjá TM Software í febrúar 2006 og hefur lengst af starfað sem ráðgjafi og verkefnastjóri vefverkefna fyrir viðskiptavini á borð við Icelandair, Íslandsstofu, Glitni, Íslandsbanka, Símann og fleiri.

Soffía bloggar um allar hliðar veflausna, hlutverk vefstjórans, vefumsjón, efnisumsýslu, vefmælingar og markaðssetningu á Netinu. 

Soffía var í stjórn SVEF frá 2008-2011.

Verið velkomin á póstlistann okkar