Mukautuva verkkosuunnitelu

Abstract

Joustavarakenteiset verkkosivut, eli päätelaitteen näytön tai selainikkunan koon mukaan asettuvat CSS-rakenteet voivat olla tyylimäärityksiltään taloudellisia vähentäessään monien eri päätelaitekohtaisten CSS-tyylimääritysten tarvetta. Ohjeet eri elementtien CSS-tyylimäärityksille löytyvät eri lähteistä. Näiden ohjeiden kokoaminen yhteen antaa keinot toteuttaa verkkosivuilla tehokkaamman päätelaitteille ja selainikkunaan mukautuvan CSS-määrittelyn. Huomioimalla suunnittelussa verkkosivujen sisällössä käytetyimpien elementtien asettelun ja niiden suhteet ympäröiviin rakenteisiin pystytään vaikuttamaan siihen miten eri päätelaitteet piirtävät sisältöä näytöille. Lisäksi suunnittelussa on hyvä huomioida kosketusnäyttöjen vaatimuksia. Todennäköisintä on että CSS-määrittelyssä joudutaan käyttämään pikseli-, em- ja prosenttiperustaista määrittelyä toimivimman rakenteen saavuttamiseksi. Rakenteellisesti toimivimmat verkkosivut, joita on miellyttävä käyttää sekä kosketusnäytöillä, että hiiriohjauksella, ovat pystysuuntaisia ja ne hyödyntävät JavaScript- ja jQuery-liitännäisiä.

Web sites with liquid layout structures can lessen the need of specific CSS-definitions for multiple terminals. Liquid layout means CSS-structures which can observe the size of browser window or terminals monitor. The notes for sizing and giving proper values for different elements used in web design can be found from many different sources. By collection these notes one can improve CSS-definitions and in result write better CSS Putting weight on the most basic elements of the web pages and defining properly the distances and margins of these elements it is possible to determine how different kind of terminals render the content to the screen. As a designer It is also important to consider the requirements of touch screen devices. It is recommended that the CSS-definitions use a pixel, em, and the percentage-based definition in the structure to achieve the best structure. Structurally functional websites which are comfortable to use with touch screens or mouse are built vertically and they use JavaScript- and jQuery-plugins.