Paper Titles

Management of Big Data in the Internet of Things in Agriculture Based on Cloud Computing
p.1438

A Fine-Grain Price Analysis for Online Transaction Data
p.1445

Research and Design of Web-Based Autonomous and Collaborative Teaching Mode under Blended Learning
p.1450

Control of Synchronization on Community Networks
p.1454

Responsive Web Design for Mobile Device Screen Optimization
p.1460

Solving Bottleneck Problem by Transmission Power Control under Various Compression Assumptions for Wireless Sensor Networks
p.1465

A Group Persistent Assignment in Contention Slots of DOCSIS
p.1471

Calculating the Reliability and Reputation of Agents in E-Commerce Multi-Agent Environments
p.1478

Mathematical Programming Models for Flexible Manufacturing System Planning and Scheduling Problem
p.1483

HomeApplied Mechanics and MaterialsApplied Mechanics and Materials Vols. 548-549Responsive Web Design for Mobile Device Screen...

Responsive Web Design for Mobile Device Screen Optimization

Article Preview

Abstract:

The robust development of the telecommunication technologies has boosted the massive production of the mobile devices such as smartphones, phablets, tablets, and laptops. The use of these mobile devices has experienced an explosive growth and come in vary screen sizes. This development has changed the way how web contents is organized and displayed on screen. This paper compares the different responsive approaches, which works well with various device screens. However, the main focus of this paper is on Responsive Web Design (RWD) since it is highly applicable. RWD techniques and tools, issues and reviews of RWD are also discussed in this paper. The objectives of this paper are finding the best responsive approach, identifying well practices and suggesting future works. Along this line, this paper serves, as a guide that enables designers and developers to gain better understanding of the RWD and hence improve their productivity.

You might also be interested in these eBooks

Achievements in Engineering Sciences

Info:

Periodical:

Applied Mechanics and Materials (Volumes 548-549)

Pages:

1460-1464

DOI:

https://doi.org/10.4028/www.scientific.net/AMM.548-549.1460

Citation:

Cite this paper

Online since:

April 2014

Authors:

Fong Yee Lee*, Mohd Afizi bin Mohd Shukran, Chee Kong Wong

Keywords:

Adaptive Web Design, Mobile Device Screen, Responsive, Responsive Web Design, Screen Optimization

Export:

RIS, BibTeX

Price:

Permissions CCC:

Request Permissions

Permissions PLS:

Request Permissions

Сopyright:

© 2014 Trans Tech Publications Ltd. All Rights Reserved

Share:

Citation:

* - Corresponding Author

[1] E. Marcotte, Responsive Web Design (Brief Books for People Who Make Websites, No. 4), 1st ed. New York: A Book Apart, 2011, p.5–9, 44–50, 71–79.

[2] T. Kadlec and A. Gustafson, Implementing Responsive Design: Building sites for an anywhere, everywhere web, 1st ed. Berkeley: New Riders, 2012, p.11–14.

[3] N. Pettit, Beginner's Guide to Responsive Web Design - Treehouse Blog, 2012. [Online]. Available: http: /blog. teamtreehouse. com/beginners-guide-to-responsive-web-design. [Accessed: 25-Sep-2013].

[4] J. Khan, 55+ Great and Useful Tools for Responsive Web Design, Singapore, Feb-(2013).

[5] T. Firdaus, Responsive Web Design by Example. Birmingham: Packt Publishing, 2013, p.15–17.

[6] R. Carter, B. Day, P. Meggs, and P. B. Meggs, Typographic Design: Form and Communication, 2nd ed. John Wiley & Sons, 1993, p.263.

[7] C. Coyier, Why Ems? | CSS-Tricks, 2012. [Online]. Available: http: /css-tricks. com/why-ems/. [Accessed: 05-Oct-2013].

[8] Paravel, FitText - A plugin for inflating web type., GitHub, San Francisco, (2011).

[9] Z. Leatherman, BigText Makes Text Big—zachleat. com., GitHub, San Francisco, (2011).

[10] Simplefocus, FlowType. JS — Responsive web typography at its finest: font-size and line-height based on element width., GitHub, San Francisco, (2013).

[11] C. Coyier, Rundown of Handling Flexible Media, 2012. [Online]. Available: http: /css-tricks. com/rundown-of-handling-flexible-media/. [Accessed: 16-Oct-2012].

[12] T. Koblentz, Creating Intrinsic Ratios for Video · An A List Apart Article, A List Apart Magazine, May-(2009).

[13] C. Coyier and Paravel, FitVids. JS - A lightweight, easy-to-use jQuery plugin for fluid width video embeds., Github, San Francisco, (2011).

[14] L. Wroblewski, LukeW | RESS: Responsive Design + Server Side Components, " 2011. [Online]. Available: http: /www. lukew. com/ff/entry. asp, 1392. [Accessed: 04-Oct-2013].

[15] J. Megahan, Beyond Media Queries | Moovweb, 2013. [Online]. Available: http: /www. moovweb. com/blog/why-responsive-design-isnt-enough-and-how-to-fix-it-part-3/. [Accessed: 04-Oct-2013].

[16] J. Nielsen, Mobile Site vs. Full Site, 2012. [Online]. Available: http: /www. nngroup. com/articles/mobile-site-vs-full-site/. [Accessed: 05-Oct-2013].

[17] A. Gustafson, Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement, 1st ed. Chattanooga: Easy Readers, LLC, 2011, p.1–16.

[18] T. Parker, S. Jehl, M. C. Wachs, and P. Toland, Designing with Progressive Enhancement: Building the Web that Works for Everyone, 1st ed. Berkeley: New Riders, 2010, p.3–10.

[19] Google, Building Smartphone-Optimized Websites - Webmasters — Google Developers, 2012. [Online]. Available: https: /developers. google. com/webmasters/smartphone-sites/details. [Accessed: 04-Oct-2013].

[20] Future Publishing Limited, Designers respond to Nielsen on mobile | Mobile | Creative Bloq, Bath, Apr-(2012).

[21] J. Johansson, A Comparison of Methods for Building Mobile-Optimized Websites, 2013. [Online]. Available: http: /sixrevisions. com/mobile/methods-mobile-websites/. [Accessed: 05-Oct-2013].

[22] Uniwebb LLC, Responsive web design costs | Why RWD cant be cost-effective and beneficial | Uniwebb, 2013. [Online]. Available: http: /www. uniwebb. com/web-content/responsive-web-design-costs/. [Accessed: 05-Oct-2013].

[23] TechCrunch, Google Launches New Ad Unit For Responsive Sites | TechCrunch, 2013. [Online]. Available: http: /techcrunch. com/2013/07/31/google-launches-new-ad-unit-for-responsive-sites/. [Accessed: 30-Sep-2013].

[24] C. Carlberg, How and Why to Use Media Queries, 2013. [Online]. Available: http: /cristoffer. cc/pdf/How and Why to Use Media Queries. pdf. [Accessed: 26-Sep-2013].

[25] J. D. Marland, The problem with responsive design | Fetched from hammerspace, 2012. [Online]. Available: http: /hammerspace. co. uk/2012/07/the-problem-with-responsive-design. [Accessed: 03-Oct-2013].