Change search
CiteExportLink to record
Permanent link

Direct link
Cite
Citation style
  • apa
  • harvard1
  • 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
Varför är det en hamburgare i det högra hörnet?: En analys av CSS ramverk
Jönköping University, School of Engineering, JTH, Computer Science and Informatics.
Jönköping University, School of Engineering, JTH, Computer Science and Informatics.
2017 (Swedish)Independent thesis Basic level (degree of Bachelor), 10 credits / 15 HE creditsStudent thesisAlternative title
Why is there a hamburger in the right hand corner? (English)
Abstract [en]

Purpose – The purpose of this report is to find out which frameworks and methods are most popular and most widely used, as well as web developers' views on the hamburgermenu.

Method – In order to answer the questions in our report we used the methods quantitative statistical processing, quantitative analysis of data collected via survey and qualitative interviews with web developers. The study was conducted to find out which frameworks and methods are most popular and used most, as well as how web developers look at the hamburgermenu. This was done by analyzing the popularity and usage of different frameworks as well as interviewing web developers who work with it daily.

Findings – The results of the report are based on the data collected through the processing of the statistics, the analysis of the survey, and the interviews performed. The result shows which frameworks are most popular and those that are most used. The following list shows the ranking:

Most popular:

  1. Bootstrap
  2. Semantic UI
  3. Materialize
  4. Material Design Lite
  5. Foundation

Most used:

  1. Bootstrap
  2. Foundation
  3. Materialize
  4. Material Design Lite
  5. Semantic UI

The results of the interviews showed that most of the web developers interviewed used a framework when they created a website, either an existing or one of their own. It was also a practice to use the same framework in the company, although the way it was used was different from developer to developer. All developers had a mobile-first thought in mind, although it was not always a priority.

It was also found in the study that everyone had a basic idea behind the choice of framework, but only one who had performed a study on which one would suit them best.

All web developers interviewed thought that the hamburger menu was boring and bad from a user experience perspective. But everyone also agreed that because it is so widely used and has been for a couple of years, users have learned what it means and therefore fulfills its purpose.

Implications – The use of the results is primarily linked to individuals or companies that work with web development, but can also be used by private individuals. For the report's primary target group, the results will give an increased understanding of the most used framework and an increased understanding of why these are used. Private individuals can use the result in the same way.

Limitations – The limitations we receive in this study are that we cannot make any conclusions about companies and web developers in other parts of the country using the same framework or methods as the local ones we interviewed. Nor can we make any conclusions about why Bootstrap is the most popular and most widely used framework. We can only speculate why with the empirical we gathered through the interviews.

A major limitation is also the lack of interviews when we only got answers from 6 of the 10 companies we contacted, of whom 4 would like to participate in the interview. More general conclusions could have been drawn if more companies had been interviewed.

Keywords – Framework, Web Development, Responsive Web Design, Interaction Design, User Experience, Bootstrap, Foundation, Materialize, Material Design Lite, Semantic UI

Abstract [sv]

Syfte – Syftet med denna rapport är att ta reda på vilka ramverk och metoder som är populärast och mest använda, samt webbutvecklares syn på hamburgermenyn.

Metod – För att besvara frågeställningarna används metoderna kvantitativ bearbetning av statistik, kvantitativ analys av data insamlad via survey samt kvalitativa intervjuer med webbutvecklare. Studien genomfördes för att ta reda på vilka ramverk och metoder som är populärast och används mest, samt hur webbutvecklare ser på hamburgermenyn. Detta gjordes genom att analysera olika ramverks popularitet och användande samt att intervjua webbutvecklare som arbetar med det dagligen.

Resultat – Rapportens resultat är baserat på den data som samlats in genom bearbetningen av statistiken, analysen av survey, samt de intervjuer som utfördes. Resultatet visar vilka ramverk som är populärast samt vilka som används mest. Följande lista visar rangordningen:

Populärast:

  1. Bootstrap
  2. Semantic UI
  3. Materialize
  4. Material Design Lite
  5. Foundation

Mest använt:

  1. Bootstrap
  2. Foundation
  3. Materialize
  4. Material Design Lite
  5. Semantic UI

Resultatet av intervjuerna visade att majoriteten av de webbutvecklare som intervjuades använde ett ramverk när de skapade en hemsida, antingen ett existerande eller ett eget skapat. Det var också praxis att använda samma ramverk i företaget, även om sättet man arbetade med det kunde skilja sig från utvecklare till utvecklare. Samtliga utvecklare hade ett mobile-first tänk i åtanke, även om det inte alltid prioriterades.

Det framgick även i studien att samtliga hade en grundtanke bakom valet av ramverk, men det var endast en som faktiskt hade utfört en undersökning om vilket som skulle passa dem bäst.

Samtliga webbutvecklare som intervjuades tyckte att hamburgermenyn var tråkig och dålig ur ett användarupplevelseperspektiv. Men samtliga tyckte även att eftersom den används så brett och har gjort i ett par år så har användare lärt sig vad den innebär och fyller därför sitt syfte.

Implikationer – Resultatets användningsområden är främst kopplade till personer eller företag som arbetar med webbutveckling men kommer även att kunna användas av privatpersoner. För rapportens primära målgrupp kommer resultatet att ge en ökad förståelse för vilka ramverk som används mest samt en ökad förståelse för varför dessa används. Privatpersoner kan använda resultatet på samma sätt.

Begränsningar – Begränsningarna som vi får i denna studie är att vi inte kan dra några slutsatser om företag och webbutvecklare i andra delar av landet använder sig av samma ramverk eller metoder som de lokala vi intervjuat. Vi kan heller inte dra några slutsatser om varför Bootstrap är det mest populära och mest använda ramverket. Vi kan endast spekulera om varför med hjälp av den empiri vi samlat in via intervjuerna.

En stor begränsning är även bristen av intervjuer då vi endast fick kontakt med 6 av de 10 företag som vi kontaktade, varav 4 stycken ville ställa upp på att delta i intervju. Fler generella slutsatser hade kunnat dras om fler företag hade ställt upp på intervjuer.

Nyckelord – Ramverk, Webbutveckling, Responsiv webbdesign, Interaktionsdesign, Användarupplevelse, Bootstrap, Foundation, Materialize, Material Design Lite, Semantic UI

Place, publisher, year, edition, pages
2017. , 38 p.
Keyword [en]
Framework, Web Development, Responsive Web Design, Interaction Design, User Experience, Bootstrap, Foundation, Materialize, Material Design Lite, Semantic UI
Keyword [sv]
Ramverk, Webbutveckling, Responsiv webbdesign, Interaktionsdesign, Användarupplevelse, Bootstrap, Foundation, Materialize, Material Design Lite, Semantic UI
National Category
Media Engineering Other Engineering and Technologies not elsewhere specified
Identifiers
URN: urn:nbn:se:hj:diva-37409ISRN: JU-JTH-IKA-1-20170057OAI: oai:DiVA.org:hj-37409DiVA: diva2:1144347
Subject / course
JTH, Informatics
Supervisors
Examiners
Available from: 2017-10-18 Created: 2017-09-26 Last updated: 2017-10-18Bibliographically approved

Open Access in DiVA

fulltext(977 kB)11 downloads
File information
File name FULLTEXT01.pdfFile size 977 kBChecksum SHA-512
93e4dfac1fe742e626c4cc137bb02657e97611c16c8ed5125590243f05e451cb21aa78d43ec9a672d0d7b4aa4d485d9a04cf15079b6d359b820f3fb5c12ee870
Type fulltextMimetype application/pdf

By organisation
JTH, Computer Science and Informatics
Media EngineeringOther Engineering and Technologies not elsewhere specified

Search outside of DiVA

GoogleGoogle Scholar
Total: 11 downloads
The number of downloads is the sum of all downloads of full texts. It may include eg previous versions that are now no longer available

urn-nbn

Altmetric score

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

Direct link
Cite
Citation style
  • apa
  • harvard1
  • 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