"Adapt or Die" handlar om mobila webbplatser. Populariteten av mobila enheter växer ständigt och en intressant fråga var hur användarna upplever webbplatser genom mobila enheter. Arbetet hade som sitt mål att undersöka i fall användarna uppskattar att webbplatser anpassas till deras media; om det är viktigt för användarna att känna igen sig på en webbplats samt om man kan ta bort viss information från en webbplats när den presenteras via en mobil enhet. I uppsatsen förklaras begrepp som responsive web design samt mobildedikerad webbplats vilka är populära metoder för att anpassa webbplatser till mobila enheter. Den snabbt ökande användningen av mobila enheter gör denna problemställning mycket aktuell och intressant. För att försöka ge svar på dessa frågor, har genomförts en enkät, ett experiment samt en intervju.Resultatet av undersökningarna påvisar att anpassning av webbplatser till mobila enheter uppskattats mycket högt av användarna. Majoriteten (91,1%) respondenter tyckte att det var viktigt att kunna ha tillgång till sidor som är lätta att använda på mobila enheter. Det visade sig också viktigt för användarna att känna igen sig på en sida (64,6%) och behålla tillgång till all information även via mobila enheter (35%). Samtidigt var användarna dock villiga att offra just dessa egenskaper för att kunna använda sig av en enkel och lättläst webbplats (49,8%).

Submitted by Jaqueline Silva (jtas29@gmail.com) on 2016-11-09T17:44:16Z No. of bitstreams: 2 Dissertação - Mycke Richard Guntijo - 2016.pdf: 4787723 bytes, checksum: ad85928c72a37498b1b1c16060c5920f (MD5) license_rdf: 0 bytes, checksum: d41d8cd98f00b204e9800998ecf8427e (MD5) / Approved for entry into archive by Jaqueline Silva (jtas29@gmail.com) on 2016-11-09T17:44:30Z (GMT) No. of bitstreams: 2 Dissertação - Mycke Richard Guntijo - 2016.pdf: 4787723 bytes, checksum: ad85928c72a37498b1b1c16060c5920f (MD5) license_rdf: 0 bytes, checksum: d41d8cd98f00b204e9800998ecf8427e (MD5) / Made available in DSpace on 2016-11-09T17:44:30Z (GMT). No. of bitstreams: 2 Dissertação - Mycke Richard Guntijo - 2016.pdf: 4787723 bytes, checksum: ad85928c72a37498b1b1c16060c5920f (MD5) license_rdf: 0 bytes, checksum: d41d8cd98f00b204e9800998ecf8427e (MD5) Previous issue date: 2016-02-26 / Coordenação de Aperfeiçoamento de Pessoal de Nível Superior - CAPES / Provide accessibility is not easy but very important for a society where everyone can have equal conditions to exercise their rights as human beings, and when it comes to technology the need to have content access, especially on the Web, in an efficient manner, effective and satisfactory, raises concerns about usability and the evolution of design for Web, is observed in the literature the difficulties encountered by people with special needs, focus on the people with total visual impairment, where the task completion success rate in a environment is about 6 times worse than sighted people. The complexity of a Web page and the cognitive load are some of the factors that influence this performance. The new web trends explored the impact of a minimalist design, specifically Responsive Design, usability both blind as sighted people. We selected six websites, divided into 3 categories (Education, E-Commerce and Entertainment), responsive and another non-responsive in each category, participants performed tasks under scenarios built specifically for each category, we extract the time of completion, rate errors of tasks performed and also the comments made by participants to show whether Responsive Design has a positive or negative impact on usability. We conclude that the chance of a User complete the task in a responsive site is less than a non responsive, that age has an impact on the finalization of the tasks, that users with a college has a greater chance of completing tasks and that the blind average time is about 4.5 times greater for finalization tasks and on average 1.5 times more responsive when accessing sites. / Prover acessibilidade não é tarefa fácil mas de suma importância para uma sociedade onde todos possam ter iguais condições de exercerem seus direitos como seres humanos, e quando se trata de tecnologia a necessidade de ter acesso ao conteúdo disponibilizado, principalmente na Web, de uma maneira eficiente, eficaz e satisfatória, traz preocupações quanto a usabilidade e a evolução do design para Web. É observado na literatura a dificuldade encontrada por cegos, onde o tempo de completude de tarefas em um dado ambiente e cerca de 6 vezes pior que para pessoas videntes. A complexidade de uma pagina Web e a carga cognitiva são uns dos fatores que influenciam seu desempenho. Considerando-se as novas tendencias da Web, exploramos o impacto de um design minimalista, especificamente o Design Responsivo, na usabilidade tanto por pessoas cegas quanto videntes, observando também o grau de desorientação nas paginas visitadas. Foram selecionados 6 websites, divididos em 3 categorias (Educação, E-Commerce e Entretenimento), sendo um responsivo e outro não-responsivo em cada categoria. Os participantes realizaram tarefas sob cenários construídos especificamente para cada categoria, extraímos o tempo de completude, taxa de erros, grau de desorientação nas tarefas realizadas e também as observações feitas pelos participantes para demonstrar se o Design Responsivo tem um impacto positivo ou negativo na usabilidade. Concluímos que a chance de um usuário completar a tarefa em um site responsivo e menor, que a idade tem um impacto na finalização das tarefas, que usuários com nível superior tem uma maior chance de completar as tarefas e que o tempo médio dos cegos e cerca de 4,5 vezes maior para finalização das tarefas e em media 1,5 vezes maior ao acessar sites responsivos.

As the use of mobile devices is increasing and the use of laptops and computers is decreasing it is becoming more important to design for better web usability across platforms. The established design principles for web design provide guidelines when designing and testing web usability. The principles, however, are not commonly used to evaluate and test the usability of mobile websites. This study seeks to examine how the usability of mobile and desktop websites is affected based on the adaption of established web design principles. The study is built upon an analytical framework where common keywords have been selected from a selection of established web design principles. This study takes on a qualitative approach with experimental features, using a heuristic evaluation, a usability study and an eye-tracking experiment. The study indicates that there is a connection between low adaption of certain keywords of web design principles and the usability of mobile and desktop websites, contributing to a deeper understanding of how adaption of design principles affect web usability across platforms. / Användningen av mobila enheter har på senare tid ökat och användningen av bärbara datorer och stationära datorer har minskat. Det blir därför allt viktigare att designa mer användarvänliga hemsidor på olika plattformar. Etablerade design principer för webbdesign anger riktlinjer för design och test av webbanvändbarhet. Design principer används inte i en större utsträckning för att utvärdera användbarheten på mobila hemsidor, därför syftar denna studie till att undersöka hur användbarheten för mobilhemsidor påverkas utifrån att tillämpningen av design principer för webbdesign. Studien bygger på ett analytiskt ramverk där nyckelord har valts ut från ett antal etablerade webbdesign principer. Studien har ett kvalitativt tillvägagångssätt, med experimentella inslag. Studien har genomförts genom heuristik utvärdering, användbarhets studier och eye-tracking experiment. Studien indikerar att det finns en koppling mellan lägre nivåer av tillämpning av webbdesign principer och användbarheten på mobil- och datorsanpassade hemsidor. Denna studie bidrar till en djupare förståelse om hur anpassningen av design principer och dess påverkan av användbarheten på hemsidor över olika plattformar.

Surfing the web has moved from the stationary computers to mobile devices such as smartphones and tablets. As the technology moves further and more devices comes out on the market this is a trend that will continue. This makes it more important for web developers to adapt and make their websites fit not only for one device. The website needs to fit all devices. Since many of these devices are using wireless connections, the website performance has also become even more important in order to give the users a good experience.   Responsive web design is an approach for designing and developing web pages. By using the three techniques of flexible grid layout, flexible images and media, and media queries, websites can get a design that fits all devices. Responsive web techniques will also make the web page perform better on each device since it makes the web page adapt to its environment. There are several performance techniques that can be applied to a website in order to increase performance and loading time. Responsive web design including performance techniques can together make a great impact on a website's loading speed and user experience.   This thesis embraces this approach for web development. By developing a design theory, a website emerges where these approaches of web development have been implemented. During the development of the website the experiences implementing this approach and techniques is discussed. The website developed for this thesis was able to finish loading below 4 seconds on a mobile device using a 3G connection. We argue that responsive web design and performance techniques can help a website immensely to increase its user experience and performance.

Human-computer interaction problems have been approached by design practitioners and researchers for a few decades now. Usability is an established quality attribute that is used to assess how easy user interfaces are to use. Websites have been determined to benefit from such assessment, and responsive web design (RWD) is a fairly new approach to web design where usability problems have been recognised, and where usability focused research has been carried out. While usability testing can be used to determine how easy a RWD website is to use, it does not provide a detailed psychological model that tells the designer how to design RWD websites that are easy to use. Discoverability is a psychological model within the field of design in general, that can be implemented by designers who want to achieve a good design. No previous research has been carried out with the purpose of exploring how discoverability can be used to improve the usability of a RWD website, and the author of this thesis suggests that there is value in conducting such research, because it has the potential to provide new insight into how RWD websites can be designed in way that makes them easier to use. This thesis approaches the question by conducting a usability test on a RWD website, and uses the results of the test as a foundation for a suggested discoverability focused approach to improving the usability of the RWD website.

The aim of the thesis is to create a comprehensive material that covers the basic knowledge of theory and practices necessary to understand the whole complexity of the Responsive Web Design (RWD). This thesis first focuses on the RWD origin and its two approaches. Furthermore, the work deals with technical solutions of the RWD and technologies that enabled its creation or were found useful for it. This part also mentions tools which simplify the work with given technologies. The next part is devoted to Responsive CSS Frameworks as being the base for creating responsive websites and shows layout examples where two different approaches and frameworks were used. At last an issue of testing responsive websites is discussed.

The thesis is about the phenomena and benefits of design and development for mobile devices. Theoretical part of the thesis is focused on describing the mobile market's and devices' specifics and their future development and reasoning their values. In-depth description of the methods and problems of mobile applications' design with focus on web applications is included as well as the overview of technologies for mobile web development. Capability comparison of these technologies with the possibilities of native applications are described too. The practical part of the thesis aims to verify these theories by applying them to a real project (news portal). After an implementation part the thesis provides an analysis of the benefits this implementation provided to the project. The main goals of this thesis are providing complex overview of the methods and technologies for mobile web development and the analysis, which verifies the benefits and outcomes of these theories in real practice. Results of this analysis are as well the main contribution of this theses as it provides valuable information about the benefits of described methods on real project which is used by many users. Other contribution is the part describing the implementation which unveils practical information and real problems of described theoretical methods on practical examples.

There has recently been an emergence of new devices in which users can access the web. These devices have significantly smaller screen sizes than the more common desktop. This results in that the approach to designing web content has to be changed. The approach to design web content that adapts its visual layout to different screen sizes, is referred to as Responsive Web Design. Ida Infront is a company that develops systems and solutions for informationintensive businesses. They are currently examining how to design a layout editor that can be used to define responsive design for web-forms. The purpose of this project is to design and implement a prototype of such a layout editor, which will then be evaluated by Ida Infront. The project is divided into two phases, starting out with the research process, followed by the prototype design process. In the research process, the following is examined: structure of the XML file describing web-forms, Responsive Web Design techniques and technologies appropriate for the layout editor. In the prototype design process, a layout editor prototype allowing responsive design for web-form components, is designed and implemented. The responsive design configuration is added to the web-form XML file. We found that Bootstrap is a suitable technology to define responsive design of web-forms, since placement of web-form components can be translated into a Bootstrap grid system. The resulting layout editor prototype allows responsive configuration in Bootstrap. This is done by utilising the grid system as the underlying structure for placement of web-form components. The prototype also allows configuration for each of the four Bootstrap device classifications, named xs, sm, md and lg. Position and size of webform components are stored for each Bootstrap device classification. The resulting responsive configuration is added into the existing XML file for the web-form. / Den senaste tiden så har det uppkommit nya enheter som man kan komma åt webben med. Dessa enheter har betydligt mindre skärmar än de mer vanliga stationära enheterna. Det har resulterat i att sättet man designar webbinnehåll måste ändras. Metoden att designa webbinnehåll så det anpassar sin grafiska utformning efter olika skärmstorlekar kallas för responsiv webb design. Ida Infront är ett företag som utvecklar system och lösningar för informationsintensiva verksamheter. De undersöker just nu hur man designar en layout editor som kan användas för att definiera responsiv design för webb-formulär. Syftet med detta projekt är att designa och implementera en prototyp av en sådan layout editor, som sedan kommer utvärderas av Ida Infront. Examensarbetet är uppdelat i två faser, det inleds med forskningsfasen och efterföljs av prototypfasen. I forskningsfasen undersöks följande: strukturen i XML filen som beskriver webb-formulär, olika tekniker för responsiv webb design och lämpliga teknologier att använda i en layout editor. I prototypfasen, designas och implementeras en prototyp som gör det möjligt att definera responsiv konfiguration för webb-formulär. Konfiguration för responsiv design läggs till i den befintliga XML filen. Vi kom fram till att Bootstrap är en lämplig teknologi för att definera responsiv design för webb-formulär. Eftersom placeringen av komponenter i webb-formulär kan översättas till Bootstraps rutnät. Den resulterande layout editorn gör det möjligt att definera responsiv design i Bootstrap. Detta genom att använda Bootstraps rutnät som underliggande struktur för placering av webb-formulärets komponenter. Prototypen gör det också möjligt att konfiguera för var och en av de fyra Bootstrap enhets klasserna, namngivna som xs, sm, md och lg. Position och storlek för webb-formulärets komponenter lagras för varje Bootstrap enhets klass. Den resulterande responsiva konfigurationen läggs till i den befintliga XML filen för webb-formuläret.

This paper aims to examine what the differences is between the three application types, native, hybrid and web. The main focus will be placed on the web app and investigate whether it could be an alternative to native and hybrid app. To explain what a web app has the capacity to do, a web app is created in wordpress. Web development is moving forward, which is obviously positive. The problem may be, however, for companies that come from a completely different industry and who wish to develop a new web solution for their company. A native app can be a very expensive investment and it is far from all companies that can pay this. This study wants to find out if a web app, could be an alternative to the native app. Furthermore, the report will examine what the possibilities are for a web app and what existing web apps there is today. Furthermore, a simple price comparison between the different app types to be made. / Den här rapporten syftar till att undersöka vad skillnaden är mellan de tre applikationstyperna, native, hybrid och webb. Störst fokus kommer att placeras på webb appen och undersöka om denna skulle kunna vara ett alternativ till native och hybrid appen. För att redogöra vad en webb app har kapacitet att göra kommer en webb app att skapas i wordpress. Webbutvecklingen går framåt vilket självklart är positivt. Problemet som kan bli är dock för företag som kommer från en helt annan bransch och som önskar ta fram en ny webb-lösning för sitt företag. En native app kan vara en väldigt dyr investering och det är långt ifrån alla företag som kan betala detta. Denna undersökning vill reda ut om en webb app kan var ett alternativ till native appen. Vidare kommer rapporten undersöka vad det finns för möjligheter för en webb app och vad det finns för webb appar idag. Dessutom kommer en enklare prisjämförelse mellan de olika apptyperna att göras.

Den här rapporten förklarar tillvägagångssättet för framtagningen utav en responsiv design till webbplatsen Projects & Staff, en webbplats som tidigare hade en fixed design. Projektet består utav två leveranser, hi-fi prototyper skapade i Adobe Illustrator och Adobe Photoshop samt en färdig mobilversion utav webbplatsen, utvecklad med CSS3. Under projektets gång har jag designat för användarupplevelse och användbarhet, två områden som är viktiga inom responsiv webbdesign. Jag har utfört en förstudie i form av en webbplatsanalys, gjort en PACT-analys samt användarintervjuer. Detta för att definiera behoven som fanns för en responsiv design, samt att få en tydlig bild av användare och deras vanor. Målet med projektet har varit en responsiv webbdesign som representeras väl på olika enheter, speciellt smartphone, ett mål som jag lyckats bra med att uppnå. / This report explains the approach for the making of a responsive design to the website Projects & Staff, a website that previously had a fixed design. The project consists of two parts, hi-fi prototypes created in Adobe Illustrator and Adobe Photoshop as well as a complete mobile version of the website, created with CSS3. During the project I have designed for user experience and usability, two areas that are important to responsive web design. I have conducted a feasibility study in the form of a website analysis, made a PACT analysis and user interviews. This to define the needs that existed for a responsive design, and to get a clear picture of the users and their habits. The goal has been a responsive web design represented well on different devices, especially smartphones, a goal that I have done well with achieving.