Den här rapporten beskriver det självständiga arbetet med att skapa en webbutik för en second hand butik där klädesplagg visas upp till försäljning. Projektets syfte är att författaren tillsammans med handledaren på den webbaserade tidskriften Illegal Ground ska utveckla en webbplats som lätt kan administreras från ett administratörsgränssnitt samt att vara lätt tillgängligt för kunden/besökaren. Den testas och ska vara lämplig utifrån webbriktlinjer.se. Det innebär att varje individ i samhället ska kunna delta på lika villkor, oavsett etnisk bakgrund eller funktionsnedsättning. Lagen som kom i maj 2018; GDPR ska efterlevas genom att ett pop-up fönster finns på startsidan och vid formulären för registrering av kund och administratör. Det ska bland annat finnas funktionalitet för att webbutikens varor lätt ska kunna bytas ut från klädesplagg till artiklar av annan art, samt applikationen ska kunna lagra information från de olika tabellerna. Det här för att administratören ska kunna plocka ut data vid senare tillfälle. En av sidorna ska vara på engelska, samt det ska finnas en länk till denna på varje webbsida. Webbutiken ska vara allmängiltig för konceptet second hand med de etiska aspekter det innbär och och applikationen ska bygga på responsiv webbdesign och först och främst fungera på mobila enheter, typ Iphone 6. Det är begreppet ”mobile first” som gäller. De tekniker och verktyg som används är HTML, HTML5, CSS, CSS3, media queries, JavaScript, PHP med databas i frågespråket SQL, Bootstrap, Adobe Photoshop CC 2017, Projektledning m fl. Kurslitteratur från samtliga kurser i Webbutvecklingsprogrammet för studier och fördjupning i problem som uppstår under utvecklingen av webbutiken. Här ingår inspelade föreläsningar och relevanta webbsidor på internet. Metoden är främst att via iterationer av prototyper föra utvecklingen av applikationen i rätt riktning. Det hela har resulterat i en webbapplikation enligt mobile first, som fungerar väl vad gäller att registrera konto samt att välja och beställa av det urval av klädesplagg som finns till försäljning. Webbutiken Second Hand Shop fungerar för både kund och administratör. I gränssnittet för administratör finns viktiga funktioner för att organisera ett företags register.

Med ökningen av mobila enheter och dess användning ökar även användningen av mobila applikationer (Fedosov et al, 2016). Ett sätt att möta denna ökning är med hjälp av designprincipen Mobile-First. Att följa Mobile-First innebär att designa med mobila enheter i åtanke först och främst. För att förenkla tillvägagångssättet finns det ramverk vilket är programvarumiljöer som ger en bra bas att bygga på. I det här arbetet ställdes Mobile-First ramverken Bootstrap och Foundation mot varandra i ett experiment om vilket ramverk som hade högst responsivitet vid inläsning av en webbsida med visualisering av data. Olika sidor med olika element sattes upp och genom olika mätserier mättes responsiviteten. Mätningen skedde med skript som mätte svarstid i ms. Resultatet för alla mätningar samt för varje mätserie var att Bootstrap hade i snitt en lägre svarstid än Foundation. Detta går att bygga vidare på genom att jämföra andra element än de som gjordes i just det här arbetet. / <p>Det finns övrigt digitalt material (t.ex. film-, bild- eller ljudfiler) eller modeller/artefakter tillhörande examensarbetet som ska skickas till arkivet.</p>

This report describes my work with a website for a company that helps other companies book conferences. Creating this website, I have worked from a Mobile First perspective to create an interface. The interface was then tested on potential users. I then used guidelines from Googles own documentation on search engine optimization. The purpose of this work is to create and deliver a website where users can turn to MH Konferens and let them handle booking and planning of their conferences. / Denna rapport beskriver arbetet med en webbplats för ett företag som jobbar med att boka konferenser åt andra företag. Jag har i framtagandet av webbplatsen utgått från Mobile First och skapat ett gränssnitt. Gränssnittet har sedan testats på användare och slutligen har jag utgått från Googles egen dokumentation för att optimera webbplatsen för sökmotorer. Syftet med arbetet är att skapa en webbplats som leder till att användare kan vända sig till MH konferens och låta dem ta hand om bokning och planering av deras konferenser.

The IT industry is constantly evolving and it's more or less a requirement today for web developers to be familiar with and to be able to develop for all platforms. A technique that has taken hold and is now widely used is responsive design. Developing responsive design means adapting the layout to the viewing environment; the screen size. Another useful method when developing for different devices is the mobile first theory, which means developing for the mobile screen first. This is done to scale down the site and to clear unnecessary information in order to provide a better user experience. In this work we have developed a new design for the site greenb.se, using the mobile first theory to create a responsive website.

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.

Detta examensarbete har haft till syfte att åskådliggöra eventuella skillnader och/eller likheter i den upplevda användbarheten vid användandet av en webbplats skapad via mobile first design och desktop first design. Målsättningen med examensarbetet har varit att ta fram en hifi-prototyp, skapad utifrån mobile first design, som visualiserade ett designförslag för flygfotoföretaget HimlaFotos startsida. Jämförelsen har utgått ifrån en egendefinierad version av begreppet användbarhet baserad på ISO:s definition, där användbarhet består av tre faktorer; kraftfullhet, effektivitet och tillfredställelse. För att samla in data om den upplevda användbarheten har användartester genomförts. Flera likheter har identifierats gällande användbarhetsmåtten kraftfullhet och effektivitet, medan skillnader har funnits vid måttet för tillfredställelse. Bland nyckelfynden fanns att innehållsprioriteringen, som är en viktig del av mobile first design, kan vara ett användbart verktyg vid skapandet av tekniska artefakter till mobila enheter. / The aim of this study has been to explore if there is any similarities and/or differences in usability characteristics of a website created with mobile first design versus desktop first design. A design suggestion of the aerial photo company HimlaFoto’s homepage, visualized by a hifi-prototype using mobile first design, has been the goal of the study. Based on ISO:s definition of usability, a  definition by the author has been used in the study where usability consists of three factors; efficiency, effectiveness and satisfaction. To gather data about the usability when using both the hifi-prototyp and HimlaFotos default website, usability testing has taken place. For efficiency and effectiveness several similarities has been found, while some differences was identified with the usability factor satisfaction. Among the key findings was that the content prioritization, a key principle of mobile first design, could be a useful tool when developing technical artefacts for mobile devices.

In recent years the development of mobile devices has made great progress and today they account for a large proportion of the internet usage. This trend poses new demands on web developers as more companies and product owners want to customize their services and products for this new market. In this study we examine the pros and cons of the strategies desktop-first and mobile-first in the development of adaptive interfaces for the web. The study aims to create guidelines for situations in which each strategy fits well. The purpose of the study is to create an understanding of how these strategies can help developers and product owners to develop adaptive interfaces based on different goals and objectives. The study was conducted through the development of two high-fidelity prototypes for the redesign of an existing website. A literature review was also performed to create a deeper understanding of the subject. Our conclusion showed that mobile-first was preferable when building a website from scratch. However, there are cases when desktop-first may be preferable, for example, in the redesign of an existing website where the foundation is already finished. Furthermore, the study has led us to the realization that there are many purposes of different websites making the subject complex. Therefore, the developer should always make an evaluation of the product owner's goals and objectives in order to choose the right strategy.

The topic of this thesis is design and implementation of an application for language exchange and language learning. The purpose of this application is to offer possibilities of searching language partners based on given preferences, arranging personal meetings and providing alternative types of communications with these partners. The thesis begins with survey of the current state in the field of this topic, identifies bottlenecks of current solutions and concisely depicts the importance of knowing foreign language. Ensued part of this thesis analyzes requirements of proposed application, The penultimate part covers implementation of application based on previous analysis and includes user interface and source code samples. Final part is dedicated to summary the results, recommendations for using the application, possible extensions and opportunities for promotion of the application.

As mobile devices become more common when surfing the web there is an increasing demand of making web sites adjusted to other devices than computers. One common platform on the web is Microsoft SharePoint. In this report I look into one method of how to develop web sites that work on multiple devices in Microsoft SharePoint. I will be looking into different techniques as separate web sites compared to responsive web design. By exploring the approach of mobile first I try to find a working solution of techniques. I also look into another method that is suggested in a book and look into how Bootstrap could be used in the process. I will also look into content to identify what content need to be adjusted between different devices. I find that navigation is an important part of a web site and look into different methods of handling navigation on mobile devices. By analyzing different techniques and looking into what content is going to be adjusted a solution is proposed where the navigation is adjusted in a responsive design. The design is converted into a SharePoint masterpage and then fixed using stylesheets and JavaScript. The solution works on a web site with a complex site structure since it focuses on how to adjust the navigation.

This Master thesis focuses on responsive web design. The main objective is to provide comprehensive view of the website created in so-called responsive realization, and impart awareness to readers not only about idea of responsive web design itself, but also about other ways of creating mobile webs. Furthermore, thesis deals with constructing of overview and comparison of selected technologies and frameworks with support of creating responsive websites. Every group of technologies or procedures is discussed in single chapter, to let reader simple and clearly return to particular concepts. After reading this thesis the reader should acquire not only detailed knowledge about responsive web design, but also suggestions and manuals for creating websites and for decisions in choosing the type of technology, which is possible to use to creating websites.