Ramverk för responsiv design : En jämförelse mellan Bootstrap och Foundation

Abstract

Då smarttelefoner, pekdatorer och smart tv:n kom till marknaden, blev en programmerares arbete mycket mera utmanande. Det innebär att det finns allt fler skärmstorlekar som kan kopplas till webben. För detta har det utvecklats responsiv design och olika ramverk som stöder responsiv design. I detta examensarbete kommer jag att ytligt gå igenom vad responsiv design är och vad ramverk är. Efter att dessa två termer är förklarade kommer jag att jämföra de två mest använda ramverk i dagens läge, Bootstrap och Foundation. Jag kommer att gå djupare in på vad båda ramverken är, hur och när de utvecklades med några exempel på hur de ser ut och fungerar. För att få reda på vilkendera är bättre, kommer jag att jämföra deras egenskaper och utförlighet. Till slut kommer jag att presentera skillnaderna mellan Bootstrap och Foundation, samt för- och nackdelar med dessa ramverk.

Kun älypuhelimet, tabletit ja älytelevisiot tulivat markkinoille, muuttui ohjelmoijien teh-tävät paljon haastavammaksi. Tämä tarkoittaa sitä, että internetiin on kytkettävissä enemmän kuin yksi näyttökoko. Ongelman ratkaisemiseksi on kehitetty responsiivinen suunnittelu ja sen toimintaa tukevia erilaisia puitteita. Tässä työssä käyn pintapuolisesti läpi mitä responsiivinen suunnittelu tarkoittaa ja mitä sen toimintaa tukevia ohjelmointi-pohjia on. Kun nämä asiat on käsitelty, aion vertailla kahta tällä hetkellä eniten käytettyä ohjelmointipohjaa, joita ovat Bootstrap ja Foundation. Syvemmin käsittelen, mitä mo-lemmat ohjelmointipohjat käytännössä ovat, sekä miten ja milloin ne on kehitetty. Tar-kastelussa käytän joitakin esimerkkejä siitä, miltä ne näyttävät ja miten ne toimivat. Sel-vittääkseni kumpi aiemmin mainituista pohjista on parempi, aion vertailla niiden ominai-suuksia ja yksityiskohtia. Lopuksi esittelen ohjelmointipohjien erot, hyödyt ja haitat.

As smart phones, tablets and smart TV’s came to the market, it made a programmer's task much more challenging. This means that there are more screen sizes that can be connect-ed to the web. For this, responsive design and frameworks that supports responsive de-sign were developed. In this thesis, I will superficially go through what responsive design is and what frameworks are. After I have explained what these two terms are, I will con-tinue by comparing the two most widely used frameworks today, Bootstrap and Founda-tion. I will dive deeper into what both frameworks are, how and when they were devel-oped and show some examples of how they look and function. To find out which of them is better, I will compare their features and details. At the end of this thesis, I will present the differences, the advantages and disadvantages of Bootstrap and Foundation.