Change search
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • Other style
More styles
Language
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf
Responsiv webbdesign: en komparativ studie om responsiv fluid och adaptiv webbdesign
University West, School of Business, Economics and IT, Division of Media and Design.
University West, School of Business, Economics and IT, Division of Media and Design.
2020 (Swedish)Independent thesis Basic level (university diploma), 5 credits / 7,5 HE creditsStudent thesisAlternative title
Responsive web design : A comparative study about responsive fluid and adaptive web design (English)
Abstract [en]

Today, responsiveness on a website is a must since people use all possible devices to reach a website. It can range from mobiles, tablets, laptops and desktops to smart TVs and game consoles. In this report, we have done a comparative study with experiments to compare two techniques that can be used to create responsive web. Responsive fluid web design that in a fluid/compliant way adapts the elements of the website to the width of the screen and adaptive web design which, with the help of media queries, creates a more "jumpy" design that can change the layout at specific breakpoints/ resolutions. The purpose of the report has been to see how they differ in adaptability, number of lines of code, file size and load times. We have tested by creating two different layouts, a simpler blog page and a slightly more advanced portfolio page, see Appendix 1. We first created these with only responsive fluid techniques to then apply media queries in the second test to improve the layout where it "breaks". The results showed that the adaptive technique was better at adapting the entire layout to different units, it also had better load times but higher number of lines with code and therefore also larger file size compared to the responsive fluid side. Our conclusion is that media queries are still needed to a great extent to help fix the layout in specific places, but that new functions of the grid systems can lead to that media queries is going to be used in the future only to create features on specific units more than to control the layout.

Abstract [sv]

Idag är responsivitet på en hemsida ett måste då människor använder alla möjliga enheter för att nå en hemsida. Det kan var allt fån mobiler, tablets, laptop och desktop till smartTV och spelkonsoler. Vi har i denna rapport gjort en komparativ studie med experiment för att jämföra två tekniker som kan användas för att skapa responsiv webbdesign. Responsiv fluid webbdesign som på ett flytande/följsamt sätt anpassar elementen på hemsidan efter bredden på skärmen och adaptiv webbdesign som med hjälp av media queries skapar en mer "hoppig" design som kan ändra layout vid specifika brytpunkter/upplösningar. Syftet med rapporten har varit att se hur de skiljer sig åt i frågor som anpassningsbarhet, antal rader kod, filstorlek samt laddningstider. Vi har testat genom att skapa två olika layouter, en enklare bloggsida och en lite mer avancerad portfoliosida, se Bilaga 1. Dessa skapade vi först med enbart responsiva fluid tekniker för att i andra testet lägga på media queries för att förbättra layouten där den "går sönder". Resultaten visade att den adaptiva tekniken var bättre på att anpassa hela layouten till olika enheter, den hade även bättre laddningstider men högre radantal med kod och därför även större filstorlek jämfört med den responsiva fluid sidan. Vår slutsats är att media queries fortfarande behövs i stor utsträckning för att kunna hjälpa till att fixa layouten på specifika ställen men att nya funktioner av gridsystemen kan leda till att media queries i framtiden mer kommer användas för att skapa funktioner på specifika enheter mer än att styra layouten.

Place, publisher, year, edition, pages
2020. , p. 38
Keywords [en]
web design, responsive, fluid, adaptive, media queries, adaptability, load times, file size, layout
Keywords [sv]
webbdesign, responsiv, adaptiv, media queries, anpassningsbarhet, laddningstider, filstorlek, layout
National Category
Information Systems, Social aspects
Identifiers
URN: urn:nbn:se:hv:diva-15662Local ID: EXB340OAI: oai:DiVA.org:hv-15662DiVA, id: diva2:1455990
Subject / course
Informatics
Educational program
Webmaster
Supervisors
Examiners
Available from: 2020-08-18 Created: 2020-07-30 Last updated: 2020-08-18Bibliographically approved

Open Access in DiVA

No full text in DiVA

By organisation
Division of Media and Design
Information Systems, Social aspects

Search outside of DiVA

GoogleGoogle Scholar

urn-nbn

Altmetric score

urn-nbn
Total: 4308 hits
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • ieee
  • modern-language-association-8th-edition
  • vancouver
  • Other style
More styles
Language
  • de-DE
  • en-GB
  • en-US
  • fi-FI
  • nn-NO
  • nn-NB
  • sv-SE
  • Other locale
More languages
Output format
  • html
  • text
  • asciidoc
  • rtf