Framtida arbete - Avslutande diskussion - Ramverk & responsiva bildtekniker

6. Avslutande diskussion

6.3. Framtida arbete

Det som möjligtvis går att ta med sig från detta arbete vidare in i framtiden är arbetets kärna. Arbetet handlar om att visa bilder på webben och att göra det effektivt. I ett kortare perspektiv skulle fortsättningen kunna innebära att gräva djupare i HTML5s image-attribut och även titta på vad olika typer av bilder har för effekt på laddningshastigheter. Ett företag som fortsätter på detta arbetet skulle kunna fortsätta genom att undersöka ett större antal bildtekniker. Om företaget är av ett sådant slag att det har inflytande över branschen (tex

Google) skulle den kunskap de då får kunna användas för att skapa klara riktlinjer kring hur bildhantering på webben bör se ut. Eventuellt skulle de kunna använda den kunskap de får till att utveckla ett nytt verktyg som är perfekt och som tillfredställer allas behov. Det kommer sannolikt inte att inträffa och det kanske är lika bra det. Det finns nämligen något värdefullt i att ha den djungeln av olika hjälp-verktyg som finns idag, både när det gäller olika ramverk men även bildtekniker. Tack vare att det finns möjlighet att göra olika val kan varje projekt använda något verktyg som är specifikt anpassat till just det projektet. De många olika ramverken och bildteknikerna som finns bidrar också till att skapa en konkurenssituation vilket är en hälsosam faktor. Våra företag skapar bättre produkter därför att det finns andra företag som de kan konkurera med. Konkurenssituationen kan också leda till att standarder utvecklas vilket skulle vara värdefullt när det handlar om bildhantering.

Referenser

Armstrong, M., Crabb, M., Hughes, C.J. & Jones, R. (2015) Responsive Design for Personalised Subtitles. W4A ’15 Proceedings of the 12th Web for All Conference. Article 8. Florence, Italy, 18-20 Maj 2015. DOI: 10.1145/2745555.2746650

Bartuskova, A. & Krejcar, O. (2015) Loading Speed of Modern Websites and Reliability of Online Speed Test Services. Computational Collective Intelligence. 7th International Conference, ICCCI 2015, Proceedings, Part I. Madrid, Spain, 21-23 September 2015. s.

65-74. DOI: 10.1007/978-3-319-24069-5

Blaikie, N.W.H. (2003). Analyzing quantitative data: from description to explanation.

London: SAGE.

Bootstrap (2017-a). About Bootstrap. Hämtad 15 April, 2017, från http://getbootstrap.com/

about/

Bootstrap (2017-b). Img-responsive. Responsive images. Hämtad 15 April, 2017, från http://

getbootstrap.com/css/#images

Byström, J. (1990). Grundkurs i statistik. (5., omarb. uppl.) Stockholm: Natur och kultur.

Cebi, S. (2013) Determining importance degrees of website design parameters based on interactions and types of websites. Decision Support Systems, 54(2), 1030–1043.

DOI:10.1016/j.dss.2012.10.036

Constantinides, E. (2004) Influencing the online consumer's behavior: the Web experience.

Internet Research, 14 (2), 111 - 126.

Delamaro M., Vincenzi R.M.A, Maldonado C.J. (2006) A strategy to perform coverage testing of mobile applications. Proceedings of the 2006 international workshop on Automation of software test. Shanghai, China. 23 Maj 2006. 118-124. DOI:

10.1145/1138929.1138952

Egger S, Hossfeld T, Schatz R, Fiedler M. (2012) Waiting times in quality of experience for web based services. Fourth International Workshop on Quality of Multimedia Experience. Yarra Walley, Australia, 5-7 Juli 2012. DOI: 10.1109/QoMEX.2012.6263888 Eliasson, A. (2013) Kvantitativ metod från början. (3.uppl.) Lund: Sverige. Studentlitteratur

AB.

Fielding, J. (2014) Beginning Responsive Web Design with HTML5 and CSS3. Berkeley, Kalifornien. Apress.

Foundation (2017-a). About Foundation. Hämtad 15 April, 2017, från http://

foundation.zurb.com/showcase/about.html

Foundation (2017-b). Interchange. Hämtad 15 April, 2017, http://foundation.zurb.com/

sites/docs/v/5.5.3/components/interchange.html

Galletta, D.F., Henry, R., McCoy, S. & Polak, P. (2004) Website Delays: How tolerant are users? Journal of the AIS, 5 (1), Article 1.

Gasston, P. (2013). The modern Web: multi-device Web development with HTML5, CSS3, and JavaScript. San Francisco, Calif.: No Starch Press.

Gehrke, D. & Turban, E. (1999) Determinants of successful web site design: relative importance and recommendations for effectiveness. Proceedings of the 32nd Hawaii International Conference on Information Systems (Track 5). Maui, Hawaii, USA, 5-8 Experimental Study of Browser-based Applications. AMCIS 2000 Proceedings. (s. 347).

California, USA, 2000.

Jiang, W., Zhang, M., Zhou, B., Jiang, Y. & Zhang, Y. (2014) Responsive Web Design Mode and Application. 2014 IEEE Workshop on Advanced Research and Technology in Industry Applications (WARTIA) (s. 1303-1306). Ottawa, Canada, 29-30 September 2014.

Kadlec, T. (2013). Implementing Responsive Design: Building Sites for an anywhere, everywhere web. San Francisco: New Riders, Peachpit.

Lindgaard, Gitte., Fernandes, Gary., Dudek, Cathy och Brown, J. (2006). Attention web designers: You have 50 milliseconds to make a good first impression! Behaviour &

Information Technology 25 (2): 115-126.

Majid, E., Shah A., Kamaruddin, N. & Mansor, Z. (2015) Adaption of Usability Principles in Responsive Web Design Technique for E-Commerce Development. The 5th International Conference on Electrical Engineering and Informatics (s. 726-729). Bali, Indonesia, 10-11 Augusti 2015. DOI: 10.1109/ICEEI.2015.7352593

Marcotte, E. (2010) Responsive Web Design 25 Maj 2010. Tillgänglig på internet: https://

alistapart.com/article/responsive-web-design [Hämtad April 15, 2017].

Mohorovičić, S. 2013. Implementing responsive web design for enhanced web presence. 36th International Convention on Information & Communication Technology Electronics &

Microelectronics (MIPRO) (s. 1206-1210). Opatija, Croatia, 20-24 Maj 2013.

Nielsen, J. (1999) Who Commits The "Top Ten Mistakes" of Web Design? 16 Maj 1999.

Tillgänglig på Internet: https://www.nngroup.com/articles/who-commits-the-top-ten-mistakes-of-web-design/ [Hämtad Februari 1, 2016].

Nilesh, J. (2014). Review of different responsive CSS Front-End frameworks. Journal of Global Research in Computer Science, 5 (11), 5-10.

Perakakis, E., Ghinea, G. & Thanou, E. (2014) Are Websites Optimized for Mobile Devices and Smart TVs? 8th International Conference on Human System Interactions (HSI) (s.

47-53). Warsaw, Poland, 25-27 Juni 2015.

Podjarny, G. (2013) Real World RWD Performance - Take 2. 7 Mars 2013. Hämtad 1 Juni, 2017, https://www.guypo.com/real-world-rwd-performance-take-2/

Rafizeldi, M. (2013) Responsie web design illustration [illustration]. Hämtad 23 Maj, 2017, https://commons.wikimedia.org/wiki/File%3AResponsive_Web_Design_for_Desktop

%2C_Notebook%2C_Tablet_and_Mobile_Phone.png

Schenkman, B.N. & Jönsson, F.U. (2000) Aesthetics and preferences of web pages.

Behaviour and Information Technology. 19 (5), s. 367–377.

Shresta, S. (2015) Ember.js front-end framework - SEO challenges and frameworks comparison. Bachelor’s Thesis. Haaga-Helia, University of Applied Sciences. Helsinki, Finland.

Strauss, A.L. & Corbin, J. (red.) (1997). Grounded theory in practice. Thousand Oaks: SAGE.

Voutilainen, J., Salonen, J. & Mikkonen, T. (2015) On the Design of a Responsive User Interface for a Multi-Device Web Service. 2nd ACM International Conference on Mobile Software Engineering and Systems (s. 60-63). Florence, Italy, 17 Maj 2015.

Wilcox, M. (2011) Adaptive Images. Hämtad 20 Maj, 2017, http://adaptive-images.com/

W3C, World Wide Web Consortium, Recommendation (2016). The img element. Hämtad 21 Maj 2017, https://www.w3.org/TR/html51/semantics-embedded-content.html#the-img-element

W3C, World Wide Web Consortium, Working Group Note (2013). Use Cases and Requirements for Standardizing Responsive Images Hämtad 21 Maj, 2017, https://

www.w3.org/TR/respimg-usecases/

W3C, World Wide Web Consortium, Recommendation (2012). Navigation timing. Hämtad 21 Maj 2017, https://www.w3.org/TR/navigation-timing/

Zervas, P., Trichos, A. Sampson, D.G. & Li, N. (2014) A Responsive Design Approach for Supporting Mobile Access to Virtual and Remote Laboratories. The 14th IEEE International Conference on Advanced Learning Technologies (ICALT 2014). Athens, Greece, 7-9 Juli 2014.

A. Bootstrap och Foundation

Bootstrap och Foundation anses vara så pass vanliga att de båda är kända bland utvecklare och webdesigners. Det baseras på följande information.

Tisdagen den 31 Maj 2016 ger en sökning på Github bland stjärnmärkta repositories följande resultat:

Bootstrap ligger på 2:a plats med 96 678 stjärnor.

Foundation hamnar på 45:e plats med 23 437 stjärnor.

Sökningen letar upp ”most starred repositories” och visar ett resultat med sammanlagt 1,468,434 stycken repositories. Informationen har hämtats tisdagen den 31 maj 2016.

https://github.com/search?p=1&q=stars%3A%3E1&s=stars&type=Repositories

Enligt builtwith.com finns det idag (Tisdagen den 31 Maj 2016) 7,123,666 st websidor som använder Bootstrap och 224,151 st webbsidor som använder Foundation.

Informationen har hämtats tisdagen den 31 maj 2016. builtwith.com/docinfo/Twitter-Bootstrap och builtwith.com/framework/Foundation .

B. Unika sammansättningar av variabler

Följande är de unika sammansättningar av variabler som undersöks.

Ramverk Bildteknik Enhet Webbläsare

1. Foundation Interchange iMac Chrome

2. Foundation Srcset iMac Chrome

3. Foundation Adaptive Images iMac Chrome

4. Bootstrap Img-responsive iMac Chrome

5. Bootstrap Srcset iMac Chrome

6. Bootstrap Adaptive Images iMac Chrome

Ramverk Bildteknik Enhet Webbläsare

1. Foundation Interchange iMac Firefox

2. Foundation Srcset iMac Firefox

3. Foundation Adaptive Images iMac Firefox

4. Bootstrap Img-responsive iMac Firefox

5. Bootstrap Srcset iMac Firefox

6. Bootstrap Adaptive Images iMac Firefox

Ramverk Bildteknik Enhet Webbläsare

1. Foundation Interchange Macbook Pro Chrome

2. Foundation Srcset Macbook Pro Chrome

3. Foundation Adaptive Images Macbook Pro Chrome 4. Bootstrap Img-responsive Macbook Pro Chrome

5. Bootstrap Srcset Macbook Pro Chrome

6. Bootstrap Adaptive Images Macbook Pro Chrome

Ramverk Bildteknik Enhet Webbläsare

1. Foundation Interchange Macbook Pro Firefox

2. Foundation Srcset Macbook Pro Firefox

3. Foundation Adaptive Images Macbook Pro Firefox 4. Bootstrap Img-responsive Macbook Pro Firefox

5. Bootstrap Srcset Macbook Pro Firefox

6. Bootstrap Adaptive Images Macbook Pro Firefox

Ramverk Bildteknik Enhet Webbläsare

1. Foundation Interchange iPad3, Liggande Safari 2. Foundation Srcset iPad3, Liggande Safari 3. Foundation Adaptive Images iPad3, Liggande Safari 4. Bootstrap Img-responsive iPad3, Liggande Safari

5. Bootstrap Srcset iPad3, Liggande Safari

6. Bootstrap Adaptive Images iPad3, Liggande Safari

Ramverk Bildteknik Enhet Webbläsare

1. Foundation Interchange iPad3, Stående Safari

2. Foundation Srcset iPad3, Stående Safari

3. Foundation Adaptive Images iPad3, Stående Safari 4. Bootstrap Img-responsive iPad3, Stående Safari

5. Bootstrap Srcset iPad3, Stående Safari

6. Bootstrap Adaptive Images iPad3, Stående Safari

Ramverk Bildteknik Enhet Webbläsare

3. Foundation Adaptive Images Samsung Galaxy S3 Liggande

6. Bootstrap Adaptive Images Samsung Galaxy S3 Liggande

2. Foundation Srcset Samsung Galaxy S3 Stående

Chrome

3. Foundation Adaptive Images Samsung Galaxy S3 Stående

Chrome

4. Bootstrap Img-responsive Samsung Galaxy S3 Stående

Chrome

5. Bootstrap Srcset Samsung Galaxy S3

Stående

Chrome

6. Bootstrap Adaptive Images Samsung Galaxy S3 Stående

Chrome

Ramverk Bildteknik Enhet Webbläsare

C. Statistik från Statcounter

Länkar till statistik från StatCounter. Mest använda webbläsare på olika enheter:

Desktop: http://gs.statcounter.com/#desktop-browser-ww-monthly-201503-201603 Tablet: http://gs.statcounter.com/#tablet-browser-ww-monthly-201503-201603 Mobile: http://gs.statcounter.com/#mobile_browser-ww-monthly-201503-201603

D. foundataion-data-interchange.html

<!DOCTYPE html>

<head>

<title>Foundation data-interchange</title>

<!-- font-awesome —>

font-awesome/4.5.0/css/font-awesome.min.css">

</head>

<body>

<ul>

<li><a href="../bootstrap/bootstrap-img-responsive.html">Boots.

Img-responsive</a></li>

<li><a href="../bootstrap/bootstrap-srcset.html">Boots. Srcset</

a></li>

<li><a href="../bootstrap/bootstrap-adaptive-images.html">Boots.

Adaptive Images</a></li>

<li class="active"><a href="#">Found. Interchange</a></li>

<li><a href="foundation-srcset.html">Found. Srcset</a></li>

<li><a href="foundation-adaptive-images.html">Found. Adaptive Images</a></li>

</ul>

</nav>

<h1 class="text-center">Foundation data-interchange</h1>

</div>

<img data-interchange="[../img/320/006-320.jpg, xsmall], [../../img/640/006-640.jpg, small], [../img/960/006-960.jpg,

m e d i u m ] , [ . . / i m g / 1 2 8 0 / 0 0 6 - 1 2 8 0 . j p g , l a r g e ] , [ . . / i m g / 1600/006-1600.jpg, xlarge], [../img/1920/006-1920.jpg, xxlarge]">

</div>

jquery.min.js"></script>

</body>

</html>

E. foundation-srcset-html

<!DOCTYPE html>

<head>

<title>Foundation srcset</title>

</head>

<body>

<ul>

< l i > < a h r e f = " . . / b o o t s t r a p / b o o t s t r a p i m g -responsive.html">Boots. Img-responsive</a></li>

<li><a href="../bootstrap/bootstrap-srcset.html">Boots.

Srcset</a></li>

< l i > < a h r e f = " . . / b o o t s t r a p / b o o t s t r a p a d a p t i v e -images.html">Boots. Adaptive Images</a></li>

<li><a href="foundation-data-interchange.html">Found.

Interchange</a></li>

<li class="active"><a href="#">Found. Srcset</a></li>

<li><a href="foundation-adaptive-images.html">Found. Adaptive Images</a></li>

</ul>

</nav>

<h1 class="text-center">Foundation srcset</h1>

</div>

<img srcset="../img/1920/001-1920.jpg 1920w, ../img/1600/001-1600.jpg 1600w, ../img/1280/001-1280.jpg 1280w, ../img/960/001-960.jpg 960w, ../img/640/001-640.jpg 640w,

../img/320/001-320.jpg 320w"

src="../img/1920/001-1920.jpg"

alt="Image 01">

<img srcset="../img/1920/002-1920.jpg 1920w, ../img/1600/002-1600.jpg 1600w, ../img/1280/002-1280.jpg 1280w, ../img/960/002-960.jpg 960w, ../img/640/002-640.jpg 640w,

../img/320/002-320.jpg 320w"

src="../img/1920/002-1920.jpg"

alt="Image 02">

<img srcset="../img/1920/003-1920.jpg 1920w,

../img/1600/003-1600.jpg 1600w, ../img/1280/003-1280.jpg 1280w, ../img/960/003-960.jpg 960w, ../img/640/003-640.jpg 640w,

../img/320/003-320.jpg 320w"

src="../img/1920/003-1920.jpg"

alt="Image 03">

<img srcset="../img/1920/004-1920.jpg 1920w, ../img/1600/004-1600.jpg 1600w, ../img/1280/004-1280.jpg 1280w, ../img/960/004-960.jpg 960w, ../img/640/004-640.jpg 640w,

../img/320/004-320.jpg 320w"

src="../img/1920/004-1920.jpg"

alt="Image 04">

<img srcset="../img/1920/005-1920.jpg 1920w, ../img/1600/005-1600.jpg 1600w, ../img/1280/005-1280.jpg 1280w, ../img/960/005-960.jpg 960w, ../img/640/005-640.jpg 640w,

../img/320/005-320.jpg 320w"

src="../img/1920/005-1920.jpg"

alt="Image 05">

<img srcset="../img/1920/006-1920.jpg 1920w, ../img/1600/006-1600.jpg 1600w, ../img/1280/006-1280.jpg 1280w, ../img/960/006-960.jpg 960w, ../img/640/006-640.jpg 640w,

../img/320/006-320.jpg 320w"

src="../img/1920/006-1920.jpg"

alt="Image 06">

<img srcset="../img/1920/007-1920.jpg 1920w, ../img/1600/007-1600.jpg 1600w, ../img/1280/007-1280.jpg 1280w, ../img/960/007-960.jpg 960w, ../img/640/007-640.jpg 640w,

../img/320/007-320.jpg 320w"

src="../img/1920/007-1920.jpg"

alt="Image 07">

<img srcset="../img/1920/008-1920.jpg 1920w, ../img/1600/008-1600.jpg 1600w, ../img/1280/008-1280.jpg 1280w, ../img/960/008-960.jpg 960w, ../img/640/008-640.jpg 640w,

../img/320/008-320.jpg 320w"

src="../img/1920/008-1920.jpg"

alt="Image 08">

<img srcset="../img/1920/009-1920.jpg 1920w, ../img/1600/009-1600.jpg 1600w, ../img/1280/009-1280.jpg 1280w, ../img/960/009-960.jpg 960w, ../img/640/009-640.jpg 640w,

../img/320/009-320.jpg 320w"

src="../img/1920/009-1920.jpg"

alt="Image 09">

<img srcset="../img/1920/010-1920.jpg 1920w, ../img/1600/010-1600.jpg 1600w,

../img/1280/010-1280.jpg 1280w, ../img/960/010-960.jpg 960w, ../img/640/010-640.jpg 640w,

../img/320/010-320.jpg 320w"

src="../img/1920/010-1920.jpg"

alt="Image 10">

</div>

jquery.min.js"></script>

</body>

</html>

F. foundation-adaptive-images.html

<title>Foundation Adaptive Images</title>

font-awesome/4.5.0/css/font-awesome.min.css">

</head>

<body>

<ul>

<li><a

<li><a href="foundation-srcset.html">Found. Srcset</a></li>

<li class="active"><a href="#">Found. Adaptive Images</a></

li>

</ul>

</nav>

<h1 class="text-center">Foundation adaptive images</h1>

</div>

</div>

jquery.min.js"></script>

</body>

</html>

G. bootstrap-img-responsive.html

<!DOCTYPE html>

<head>

<title>Bootstrap img-responsive</title>

font-awesome/4.5.0/css/font-awesome.min.css">

In document Ramverk & responsiva bildtekniker (Page 34-88)