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.

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.