Denna rapport redovisar för design- och utvecklingsprocessen i byggandet av en responsiv webbsida. Webbsidan skapades för användning av den blivande spelstudion Rocket Luncher Studios. Wordpress som CMS (Content Management System) har används som innehålls-hanteringssystem för att förenkla uppdatering av webbsidan av uppdragsgivaren själva. Webbsidan är kodad utifrån Luke Wroblewskis ”mobile-first”-tänk, vilket börjar med att fokusera designen på mindre skärmar för att sedan anpassa innehållet mot större skärmstorlekar. För att göra designen responsiv har de tre beståndsdelarna flexible grid, flexible images/media och media queries använts, utöver kodning i HTML, CSS, PHP och JavaScript. Resultatet av denna rapport blev en undersökning av design- och utvecklingsprocessen vid byggandet av en responsiv webbsida. Det praktiska i examensarbetet resulterade i en responsiv prototyp till en webbsida för en spelstudio. / This report describes the design and development process in building a responsive website. The website was created for the use of the intended game studio Rocket Lunches Studios. Wordpress has been used as a CMS (Content Management System) to simplify the updating of the website by the client themselves. The website is coded by thinking "mobile-first", which begins with the design focusing on smaller screens and then adapt the content on larger screen sizes. To make the design responsive the three components flexible grids, a flexible images / media and media query has been used, in addition to coding in HTML, CSS, PHP and JavaScript. The result of this report is a survey of the design and development process when building a responsive website. The practicality of the thesis resulted in a responsive prototype of a web page for a game studio.

Food waste has become a serious matter which negatively impacts the environment worldwide. This raises the issue of managing food waste more efficiently, which in many cases can be aided with technology, and there has been previous research suggesting possible solutions. On a household level, food waste could be better managed by providing individuals with visual representations or summaries of how much they waste, and hopefully motivating them to waste less. However, typicalcharts used for visualizing data often fail to motivate users. Abstract visualizations might have a better chance at doing so. The focus of this master thesis is to design and develop a responsive web application which helps users keep track of their food purchases. Using the application, users can create product lists and perform two actions on products: consuming and wasting. The app prototype aims to increase an individual’s motivation towards wasting less food by providing a virtual “tree” visualization with similar features to a real tree such as branches and leaves. However, instead of growing depending on its’ environment like a real tree would, this virtual “tree” representation would grow based on the user’s actions: subject to how much food is consumed or wasted, the virtual tree will grow further or gradually start withering. A user study was conducted which involved a questionnaire surveying the general attitudes and practices of the participants regarding their household food waste, which was sent to participants both before and after using the resulting prototype.This enabled for relevant comparisons to be made between the user attitudes before and after trying the prototype. Furthermore, at the end of study, two user groups could be identified: most active participants and less active participants. This classification was made based on the activity logs gathered from the application database, where “most active” refers to participants that used the application regularly during the evaluation period and “less active” means the participants with very little or no activity recorded in the database. A final questionnaire was developed in two variants for collecting user feedback, tailored for the two groups identified: most active participants and less active participants. These surveys were shared with a group of participants who had agreed on using the resulting prototype for a period of at least two weeks. The results of the user study suggested that users were positive to the concept of the prototype and most users showed a keen interest in future improvements of the application. It is hoped that this work makes a relevant contribution to the areas of household food waste management, digital inventories, and web technologies, specifically web applications.

Att göra webbsidor tillgängliga för olika sorters enheter är ett område som har uppstått i och med smartphonens utveckling. Mängden enheter har under de senaste åren ökat stort och det är inte längre endast laptops och datorer som används. Då enheternas skärmupplösning skiljer sig krävs en anpassning beroende på enhet för att ge en bra användarupplevelse. För att identifiera tillgängliga tekniker har en kvalitativ undersökning genomförts. Undersökningen består av en genomgång av utvald litteratur samt intervjuer med utvecklare på företagen Nethouse och Laget.se utförts. Detta för att inhämta information om användandet av tekniker, undersöka om det finns något framträdande tankesätt samt undersöka för- och nackdelar med teknikerna. Slutsatsen är att alla tekniker har sina användningsområden eftersom de har olika styrkor och svagheter. Resultatet från denna studie presenteras som en genomgång av de befintliga teknikerna och deras potentiella användningsområden för att vägleda valet av teknik. / Making web pages available for different types of devices is an area that has arisen with the development of smartphones. In recent years it has become a major increase in units and there are no longer only laptops and computers that are being used. Since there is a size difference between the different devices there is need for adjustment depending on the device to provide a good user experience. The study was carried out as a qualitative study to identify available technologies. A review of available literature and interviews with developers at the companies Nethouse and Laget.se was conducted to obtain information on the performance of the techniques, if there is any way of thinking and if there is advantages and disadvantages of the techniques. The conclusion is that all technologies have their uses as they have different strengths and weaknesses. The results from this study are presented as a review of the existing technologies and their potential uses to guide the choice of technology.

Denna uppsats redovisar en studie i hur en söktjänst på Internet kan kompletteras, antingen via en mobilapplikation eller genom en responsiv webbplats, för att underlätta användning via en smartphone. Fokus för undersökningen ligger på Riksarkivets söktjänst Nationell ArkivDatabas (NAD) som för tillfället inte är anpassad till mobila enheter. Vårt mål är även att undersöka hur inställningen ser ut för applikationer och responsiva webbplatser bland användare samt hur dessa åsikter skiljer sig mellan olika användarmålgrupper. Tillsammans med information från tidigare forskning har en studie utförs för att undersöka för- och nackdelar mellan appar respektive responsiva webbplatser. I våra undersökningar har vi valt att använda oss av två datainsamlingsmetoder: en kvantitativ webbenkät och semistrukturerade kvalitativa intervjuer, som komplement till varandra. Totalt nio intervjuer har gjorts med tre personer ur varje Riksarkivets huvudmålgrupper. En webbenkät har även publicerats på Riksarkivets och Stockholms stadsarkivs webbplatser. / This paper reports a study in how a search service on the Internet can be completed either through a mobile application or through a responsive website, to facilitate use on a smartphone. The focus of the study is on the National Archives' search service National Archives Database (NAD), which is not currently adapted to mobile devices. Our aim is also to investigate how the attitude looks for applications and responsive websites among users and how these views differ between user groups. Together with data from previous research, a study was conducted to examine the pros and cons between apps and responsive websites. In our investigations we have chosen to use two methods of data collection: a quantitative web survey and semi-structured qualitative interviews, to complement each other. A total of nine interviews were conducted with three members from each of National Archives' main target groups. An online survey has also been published on the National Archives and Stockholm stadsarkivs websites.

Digital technology is used today to help consumers in everyday life for example, webpage design and appearance for different devices such as computers, smartphones and tablets. Homepages for all devices can be based on a specific coding called "Responsive Web Design" (RWD).From a social and literary point of view, it appears that RWD in its current form has some problems while transitioning from computer displays to tablets and smartphones. Using the common base that RWD allows for equivalent design expression to different screen sizes should be created by all devices. Although this possibility exists today, there are often differences in navigation that can confuse the user. A consistent design expression facilitates the recognition of the navigation. Additionally, the user experience (UX) through the visual expression can enhance the experience of a webpage or medium used and thus create a whole.This study describes how users look at how the implementation of RWD affects two webpages main menu for computer and smartphone devices. The focus has been on studying the user experience in relation to visual expression. The problem is that RWD in different contexts means that visual expression may be less important and thus changing the user experience. With qualitative interviews, four informants have studied two webpages on both computer and smartphone and expressed their own thoughts. The result of the study shows that the differences between webpages on the computer and smartphone devices do not cause difficulties in the use, but if the similarities between the devices are the same, it creates a more positive user experience. / Digital teknik används idag för att hjälpa konsumenter i vardagen t.ex. hemsidors utformning och utseende för olika enheter så som dator, smartphone och läsplattor. Hemsidor för olika typer av enheter kan göras utifrån en specifik kodning som benämns “responsiv webbdesign” (RWD). Utifrån ett samhälls- och litteraturperspektiv framgår det att RWD i sin nuvarande utformning har en del problematik i övergången från dator till läsplattor och smartphones. Med hjälp av den gemensamma basen som RWD möjliggör för anpassning av samma designuttryck till olika skärmstorlekar ska ett konsekvent uttryck skapas genom alla enheter. Även om denna möjlighet finns idag är det ofta skillnader i navigeringen som kan förvirra användaren. Ett konsekvent designuttryck underlättar igenkänningen av navigationen. Till detta kan användarupplevelsen (UX) genom det visuella uttrycket förbättra upplevelsen av en hemsida eller det mediet som används och därmed skapa en helhet. Denna studie beskriver hur användare ser på hur implementeringen av RWD påverkar två hemsidors huvudmenyer för enheterna dator och smartphone. Fokuset har varit att studera användarupplevelsen i förhållande till det visuella uttrycket. Problemet är att RWD i olika kontext, medför att det visuella uttrycket kan få mindre betydelse, och då ändra användarupplevelsen. Med kvalitativa intervjuer har fyra informanter med sina egna tankar studerat två hemsidor på dator och smartphone. Resultatet i studien visar på att olikheter av hemsidor på enheterna dator och smartphone inte skapar svårigheter i användningen, men om likheten mellan enheterna är densamma skapar det en desto mer positiv användarupplevelse.

För att spara tid och ändå få en responsiv webbplats, kan med fördel ett responsivt front-end ramverk användas. Ett responsivt front-end ramverk kan använda olika angreppssätt: desktop-first och mobile-first. Påverkar front-end ramverkens angreppssätt (approach) något på en webbplats svarstider? Eller finns den stora betydelsen var webbplatsen renderar data, som hämtas från en databas? Ett experiment lämpar sig för att testa studiens hypotes. Utvärdering av studiens fyra olika webbapplikationer och analysering av mätningarna finns, för att få fram slutsatsen som är: Det finns ingen större skillnad mellan front-end ramverken, den stora betydelsen finns på val av rendering. Hypotesen motbevisas, då klientapplikationerna är snabbare än serverapplikationerna på alla plattformarna. Mätningar av svarstider finns och vid ett fortsatt arbete är det intressant bland annat också mäta batterimängden och plattformarnas minne. Implementera fler webbapplikationer, som använder andra front-end ramverk, där mätningarna kan exekveras på fler plattformar, webbläsare och scenarier.

We are inundated by a constant feed of media that responds and adapts in real time to the impulses of our psyches and the dimensions of our devices. Beneath the surface, this stream of information is directed by hidden, automated controls and steered by political agendas. The transmission of information has evolved into a spiral of entropy, and the boundaries between author, content, platform, and receiver have blurred. This reductive space of responsive media is a catalyst for immense political and cultural change, causing us to question our notions of authority, truth, and reality.

To a large extent, business-customer interactions are acted out on digital meeting places. When the possibilities for businesses to engage in face-to-face interactions decrease, relationship building and customer service becomes more of a challenge. Digital services are easily duplicated by competitors and with standardization of interfaces and products, customers tend to switch more frequently between providers. One area where the creation and maintenance of loyal customers appears to be highly relevant is the domain of e-banking. Studies have shown that by personalizing the experience for the user, customer loyalty can be enhanced. Existing methods of interface adaptation shifts the responsibility for the resulting user experience design from the designer to either the user or the system. However, research shows that handing over responsibility for the design to the user can damage the user experience. Furthermore, we argue that as long as computers cannot translate the meaning of what a human communicates, and understand the motivation that lies behind her actions, human designers and researchers need to own the responsibility for designing user experiences. Responsive web design differ from the concept of user responsiveness in the way that it is not truly responsive to the user but to the technical device that is used. Following a design science research methodology, this paper presents the development of a conceptual framework for user responsive user experience design (URUXD) that aims to strengthen the bond between user and provider by enabling a more relevant and personalized user experience. The conceptual framework introduces a way to design user responsive information systems that could be useful in domains where the user audience is large and diverse, as in the case of e-banking. A personalized user experience is enabled by transcending the current use of personas as design tools to also involve them in categorizing real-time users through the use of personas as mapping tools. Multiple persona sets are incorporated in the framework which gives the user experience designer the possibility of designing a holistic user experience for each persona set. The framework thus enables the incorporation of multiple GUI designs in an information system that is user responsive, without the risk of violating usability principles. / Interaktionen mellan företag och kund sker nuförtiden oftast på digitala mötesplatser. När möjligheten för företag att träffa kunden öga mot öga minskar blir det en utmaning att skapa nära affärsrelationer och förmedla bra kundservice. Med konkurrenter som enkelt kopierar digitala tjänster och med en standardisering av gränssnitt och tjänster tenderar kunder att oftare byta leverantör. Inom e-banking framstår därför skapande och upprätthållande av lojala kunder som högst relevant. Genom att personifiera användarupplevelsen kan kundlojaliteten förbättras. Befintliga metoder för gränssnittsadaption lämnar över ansvaret för den resulterande designen från designern till antingen användaren eller systemet. Men, om ansvaret för designen tilldelas användaren kan resultatet bli i en skadad användarupplevelse. Så länge datorer inte kan översätta meningen bakom vad en människa kommunicerar eller skapa en förståelse för en användares bakomliggande motivation till varför hen utför handlingar, måste mänskliga designers inneha ansvaret för designen av användarupplevelsen. Vidare skiljer sig responsiv webbdesign från konceptet användarresponsivitet i meningen att responsiv webbdesign inte är direkt responsiv mot användaren utan snarare mot den tekniska apparat som används. Genom att följa en design science forskningsmetodik utvecklades ett konceptuellt ramverk för design av användarresponsiva användarupplevelser (user responsive user experience design (URUXD)). Målet var att stärka bandet mellan användare och leverantör genom att möjliggöra en mer relevant och personifierad användarupplevelse. Det konceptuella ramverket introducerar ett sätt att designa användarresponsiva informationssystem vilket kan vara användbart i domäner där användargruppen är stor och heterogen, vilket är fallet för e-banking. En personifierad användarupplevelse möjliggörs genom att utöka det befintliga användningsområdet för designverktyget personas till att även inkludera dem som mappningssverktyg för att kategorisera användare i realtid. Multipla persona sets införlivas i ramverket vilket skapar möjlighet för designern att skapa en holistisk användarupplevelse för varje enskilt persona set. Det konceptuella ramverket möjliggör därigenom för multipla gränssnittdesigns för ett informationssystem som därmed blir användarresponsivt, utan att underminera principer för användbarhet.

Denna studie syftar till att utveckla tumregler för heuristisk utvärdering av typografi i responsiva gränssnitt. Genom att kombinera traditionella typografiska designprinciper med principer för responsiv webbdesign har tolv tumregler tagits fram. Dessa tumregler har i två heuristiska utvärderingar använts av grafiska designers och gränssnittsutvecklare. De båda grupperna har dessutom fått ge sin syn på upplevelsen av att använda tumreglerna. Tumreglernas förmåga att vägleda till hittade typografiska problem i två responsiva gränssnitt har analyserats och framförallt gränssnittsutvecklarnas resultat har varit i fokus, då målet varit att tumreglerna ska kunna fungera som ett verktyg för att skapa bättre design för gränssnittsutvecklare utan utbildning i ämnet. Resultatet har visat att trots att gränssnittsutvecklare inte hittade lika många problem som grafiska designers så hjälper tumreglerna ändå till att hitta problem. Detta indikerar att fler deltagare utan typografisk utbildning kan behövas för att komma upp i samma mängd hittade problem som en grupp med typografiskt utbildade deltagare. Resultatet visar också att utvärderingar av responsiva gränssnitt görs bäst genom att granska gränssnittet på flera enheter med varierande skärmstorlek. / This study aims to develop a set of heuristics for evaluating typography in responsive user interfaces. By combining traditional design principles for typography with principles for responsive web design, twelve heuristics has been created. This list of heuristics has been used by graphic designers and user interface developers in two heuristic evaluations. The heuristics ability to lead to finding typographic problems in two different responsive interfaces has been analyzed, and the results from the user interface developers has been in main focus, since the goal was to create a tool for developers with a lack of knowledge in typography to create interfaces with better design. The results has shown that even though developers struggle to find the samt amount of typography problems as graphic designers, the heuristics does help to find problem. Even so, this indicate that a heuristic evaluation with non-typographic experts may need a few more participants than an evaluation with only typographic experts. The results also shows that an evaluation of a responsive user interface is best made through evaluation of the same interface on different devices with different screen sizes.

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: Bootstrap Semantic UI Materialize Material Design Lite Foundation Most used: Bootstrap Foundation Materialize Material Design Lite 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 / 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: Bootstrap Semantic UI Materialize Material Design Lite Foundation Mest använt: Bootstrap Foundation Materialize Material Design Lite 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