50 Tips for Responsive web design

responsive web design clever tips and techniques and responsive web design guidelines and techniques and responsive web design key tips and approaches
LexiWills Profile Pic
LexiWills,United Kingdom,Professional
Published Date:31-07-2017
Your Website URL(Optional)
Comment
Rogatnev Nikita Responsive Web Design Bachelor’s Thesis Information Technology May 2015 DESCRIPTION Date of the bachelor's thesis 28.05.2015   Author(s) Degree programme and option Rogatnev Nikita   Technology, Communication and Transport   Name of the bachelor's thesis Responsive Web Design   Abstract In this thesis I described everything regarding to the responsive web design. First of all, I summed up and compared all the possible website layout approaches. The disadvantages of fixed, fluid, adaptive and hybrid layouts are so significant that it is undoubtedly clear that respon- sive approach is the best one. After that, in the theoretical part I defined what the responsive design was and described its main principles and techniques. To summarize, responsive design consists of the following: responsive layout with media queries to fit all possible devices, viewport and responsive typog- raphy and media. In the practical part I implemented one page responsive website without using frameworks or grid generators – just clean HTML5 and CSS3. In order to improve the complexity of the tasks multiple responsive media was included into the project. The project website includes re- sponsive iFrame with a video from YouTube, responsive HTML5 audio player with music composition stored on the webserver and respon- sive icons provided by Font Awesome icon font. Typography is also adaptive, because it was set in “em” units, like it was stated in theoreti- cal part of the study.   Subject headings, (keywords) HTML5, CSS3, RWD, responsive, web design Pages   Language   URN   67   English   Remarks, notes on appendices   Tutor Employer of the bachelor's thesis   Timo Mynttinen   CONTENTS 1 INTRODUCTION ................................................................................................ 1 2 LAYOUT VARIATIONS .................................................................................... 3 2.1 Fixed layout ................................................................................................ 4 2.2 Fluid layout ................................................................................................. 6 2.3 Adaptive layout ........................................................................................... 8 2.4 Hybrid layout ............................................................................................ 10 2.5 Conclusion ................................................................................................ 10 3 RESPONSIVE WEB DESIGN PRINCIPLES ................................................... 12 3.1 Responsive layout ..................................................................................... 13 3.1.1 Responsive layout implementation option - Frameworks ............... 15 3.1.2 Responsive layout implementation option - Layout generators ...... 18 3.2 Responsive web design formula ............................................................... 19 3.3 Flexible margins and paddings ................................................................. 19 3.4 Viewport ................................................................................................... 21 3.5 Media queries ............................................................................................ 23 3.6 Responsive typography ............................................................................. 24 3.7 Flexible media ........................................................................................... 26 3.7.1 Flexible images ................................................................................ 27 3.7.2 Scalable Vector Graphics (SVG) ..................................................... 28 3.7.3 Icon fonts ......................................................................................... 29 3.7.4 SVG vs Icon Fonts ........................................................................... 30 3.7.5 Flexible video .................................................................................. 31 3.7.6 Flexible audio .................................................................................. 32 3.8 Special cases ............................................................................................. 32 3.8.1 Touch optimization .......................................................................... 32 3.8.2 Responsive mobile navigation ......................................................... 33 3.8.3 Old browsers’ compatibility ............................................................ 35 4 RESPONSIVE WEB DESIGN IMPLEMENTATION ..................................... 36 4.1 Requirement analysis ................................................................................ 36 4.2 Workspace preparation ............................................................................. 36 4.3 Project design ............................................................................................ 37 4.4 The layout building ................................................................................... 38 4.5 CSS definition ........................................................................................... 42 4.6 Media query and viewport definition ........................................................ 48 4.7 Result screenshots ..................................................................................... 49 5 CONCLUSIONS ................................................................................................ 52 BIBLIOGRAPHY .............................................................................................. 53 APPENDIX 1. index.html file code ................................................................... 55 APPENDIX 2. styles.css file code ..................................................................... 58 ABBREVIATIONS WWW World Wide Web OS Operating System URL Uniform Resource Locator DOM Document Object Model CDN Content Delivery Network W3C World Wide Web Consortium RWD Responsive Web Design HTML HyperText Markup Language CSS Cascading Style Sheets SASS Syntactically Awesome Style Sheets JS JavaScript UI User Interface UX User Experience HD High-Definition FHD Full High-Definition Px Pixel Pt Point (typography) DPI Dots Per Inch IE Internet Explorer MIT Massachusetts Institute of Technology GPL General Public License JPEG Joint Photographic Experts Group PNG Portable Network Graphics SVG Scalable Vector Graphics PSD Photoshop Document 1 1   INTRODUCTION The web design industry is always in a constant motion. Web designing is continuously developed in case the invention of new technologies and tools. The main reason of a permanent design modification is the appearance of a huge range of new mobile de- vices, tablets and TVs with the access to the Internet. Injection of new web technologies, such as HTML5 and CSS3, is also significant. Web design plays a crucial role in creat- ing of an effective website. This makes this research topic relevant. Any work in the field of art begins with the selection of the canvas: an artist uses a sheet of paper or cloth, a sculptor chooses rock chunk. Irrespective of what an artist wants to make his first creative action is the choice of the canvas. Even before the first brush stroke or the first chisel hit the canvas sets the parameters and the shape, width and height of the future work and defines its boundaries. Web designers try to follow this process. We even use the same word. We create a "canvas" - a blank document with a specific width, height, and shape parameters. How- ever, there is a significant difference between sculptors and web designers or web de- velopers: we are at a huge distance from the user and the user's browser window with all its individual peculiar inconsistencies and shortcomings. Let us face the truth: once the project is available online everything begins to depend on a man who looks at it – from the chosen font, color monitor, shape and size of the browser window. Faced with such an uncertainty and flexibility we begin to set limitations: set the font size in pixels or create a fixed-width layout considering the minimum screen resolution. Setting such restrictions is a bit like choosing a canvas. These restrictions set strict pa- rameters for future projects and give the stability that protects against the variability, which is initially inherent in the web. However, there is a good and at the same time bad point in the World Wide Web. It ignores any restrictions. This applies to the parameters we set in our projects: they are too easy to get broken by browsers. If the width of the visitor web browser is slightly less than the expected minimum width, the user will face the fact that part of the content of a website will be cut or the user will be forced to use horizontal scrolling to view it. 2 Users can simply walk away from the viewing area, which causes wasting of user’s time to find the way back, and the elimination of usability as a result. Usability is a key factor in web design and in company marketing strategy nowadays (Taek-Hun Kim, 2007). Outward appearance of the website shows the face and status of the company and the quality of its services. Usability level shows the company's attitude to the user. Website developers began making separate website designs for each device to prevent such a behavior of a layout in order to make website visitors feel comfortable while surfing through the websites. But, this approach is too time and money consuming. That is why, instead of creating a separate design for each new device or browser we could treat them as different manifestations of the same design. In other words, we have to create websites that are not only more flexible but also adaptable to the device display. The name of this approach is responsive web design, RWD. We can take advantage of the inherent web flexibility without abandoning the layout flow control. All we have to do to implement this technology in practice is to follow the web standards and change our attitude to web design. The aim of this study is to summarize and analyze differences between fixed, fluid, hybrid and adaptive website design approaches in the theoretical part and to implement a responsive web design website for visual confirmation of the advantages of this meth- odology in the practical part. In general, responsive web design consists of the following parts: responsive layout with flexible margins and paddings, media queries and flexible media. Section 3.1 con- sists of description and presentation of what responsive layout is and how it differs from the other ones. The differences between flexible and inflexible margins and paddings are described in Section 3.2. Section 3.4, in turn, contains description of how media could be flexible and why it is important. 3 2   LAYOUT VARIATIONS Website page layout is a huge part of a web design study. It is the graphical component of website design which determines the arrangement of elements on a web page. Layout embraces not only the elements’ position in the grid but also the UX. That fact makes the choice of a layout type a very important part of the UI design process. The main problem is to make the layout not only convenient for users, but also beautiful and at- tractive. Resolution % 1 1366x768 HD 19.59% 2 1920x1080 16:9 HD 1080 13.25% 3 1024x768 4:3 XVGA 11.92% 4 1280x1024 5:4 SXGA 6.87% 5 1440x900 8:5 WSXGA 5.04% 6 1600x900 16:9 HD+ 900p 4.86% 7 1280x800 8:5 WXGA 4.71% 8 1680x1050 8:5 WSXGA+ 3.45% 9 360x640 3.02% 10 768x1024 1.88% TABLE 1. Screen resolution 2015 statistics (top 10) (http://screenresolution.org/) Table 1 shows up-to-date users’ screen resolution statistics. Screen resolution deter- mines if content will be placed on the page correctly and completely. The prevailing 1024x768 for many years has lost its position. Website development trends changed as a logical consequence of that phenomenon. For the last few years UX increased its value. The fact that the browser window cuts a part of the content or that a horizontal scroll bar appears when the screen resolution is less than the website layout width be- come unacceptable. In order to improve usability and conversion web designers began to invent different methodologies to make websites look fine at any device with any resolution. Here is a summary of layout variations mostly in chronological and by their popularity. 4 2.1   Fixed layout Fixed or static layout is a page layout where the width of the content is rigidly set in pixels and does not change depending on the size of the browser window. Fixed layout behavior is shown in Figure 1. FIGURE 1. Fixed layout web page at various devices Fixed layout is a relic of the past when the width of the page content was strictly dictated by the resolution of the most popular screens: 800x600 then 1024x768 and so on. Even nowadays it is really easy to find websites with a fixed layout width of 960 pixels. However, this way of making layouts became obsolete because of the following rea- sons: •   Fixed layout creates a lot of blank space for users with high-resolution displays, so that it breaks the "golden section", "rule of thirds" and other important prin- ciples of design. •   Low screen resolution causes the appearance of horizontal scrollbar. •   Seamless textures, patterns and big length images require large resolution. •   Fixed width layout is useless when it comes to usability. 5 Here is an example of a fixed layout website in Code 1 and a screenshot of the result in Figure 2. 1 DOCTYPE html 2 html 3 head 4 meta charset="utf-8" 5 titleExample 1/title 6 style 7 body background: 2980b9; color: FFF; font-family: Helvetica; text-align: center; margin: 0; 8 header, nav, section border: 1px solid rgba(255,255,255,0.8); margin-bottom: 10px; border- radius: 3px; 9 header padding: 20px 0; 10 nav, section padding: 200px 0; 11 .wrapper width: 960px; margin: 0 auto; 12 header width: 960px; 13 nav, section float: left; 14 nav width: 200px; margin-right: 10px; 15 section width: 750px; 16 /style 17 /head 18 body 19 div class="wrapper" 20 h1Static Layout Example/h1 21 headerHEADER/header 22 navNAV/nav 23 sectionSECTION/section 24 /div 25 /body 26 /html CODE 1. Fixed layout page HTML5 and CSS3 code example FIGURE 2. Fixed layout web page example in two browser window sizes 6 2.2   Fluid layout In liquid or fluid layout the content width depends directly on any size of the browser window due to the use of structural elements set in relative indices, e.g. in percentage scale instead of static pixels. Fluid layout behavior is shown in Figure 3. FIGURE 3. Fluid layout web page at various devices This type of layout in its pure form is obsolete, too, as it only considers one type of devices and does not care about how the content will appear on critically large or small screens. The main disadvantages of fluid layout include the following: •   It is almost impossible to consider how it will look like on different resolutions when drawing the design. •   Large screen resolution causes creating long unreadable paragraph lines or/and a lot of free space. •   Graphical content elements must have multiple width properties to accommo- date different screen resolutions. Here is an example of a fluid layout website in Code 2 and a screenshot of the result in Figure 4. 7 1 DOCTYPE html 2 html 3 head 4 meta charset="utf-8" 5 titleExample 2/title 6 style 7 body background: 2980b9; color: FFF; font-family: Helvetica; text-align: center; margin: 0; 8 header, nav, section border: 1px solid rgba(255,255,255,0.8); margin-bottom: 10px; border- radius: 3px; 9 header padding: 20px 0; 10 nav, section padding: 200px 0; 11 .wrapper width: 100%; 12 nav, section float: left; 13 nav width: 20.83333%; margin-right: 14 1.041667%; 15 section width: 78.125%; 16 /style 17 /head 18 body 19 div class="wrapper" 20 h1Static Layout Example/h1 21 headerHEADER/header 22 navNAV/nav 23 sectionSECTION/section 24 /div 25 /body 26 /html CODE 2. Fluid layout page HTML5 and CSS3 code example FIGURE 4. Fluid layout web page example in two browser window sizes 8 2.3   Adaptive layout Adaptive layout is very close to the responsive layout type. It is based on the use of CSS media queries to adapt the content to different screens’ resolutions and settings. Adap- tive layout behavior is shown in Figure 5. FIGURE 5. Adaptive layout web page at various devices Media queries are part of the CSS3 specification which help to clarify the scope of the CSS selector. It is a specifying parameter unit of the output device, such as the type, width and height of the browser window, resolution and the orientation on canvas. The main difference between the adaptive and responsive types is that in adaptive lay- outs the page "jumps" shifting and adapting content every time at control points. That is, the media requests the content to describe fixed positions for each of the control points. As a result, we have a set of multiple fixed layouts for different screen resolu- tions. The disadvantage of this approach for the layout of the pages is obvious - we cannot predict how the content blocks will look on all user devices, because the distance be- tween reference points could be quite large. This approach is particularly relevant, if the critical points are not about the width of the most common devices, but due to the web page design. 9 Here is an example of an adaptive layout website in Code 3 and a screenshot of the result in Figure 6. 1 DOCTYPE html 2 html 3 head 4 meta charset="utf-8" 5 titleExample 3/title 6 style 7 body background: 2980b9; color: FFF; font-family: Helvetica; text-align: center; margin: 0; 8 header, nav, section border: 1px solid rgba(255,255,255,0.8); margin-bottom: 10px; border- radius: 3px; 9 header padding: 20px 0; 10 nav, section padding: 200px 0; 11 .wrapper width: 400px; margin: 0 auto; 12 header width: 400px; 13 nav width: 400px; 14 section width: 400px; 15 media screen and (min-width: 800px) 16 .wrapper width: 640px; 17 header width: 640px; 18 nav, section float: left; 19 nav width: 133px; margin-right: 10px; 20 section width: 497px; 21 22 media screen and (min-width: 1000px) 23 .wrapper width: 960px; 24 header width: 960px; 25 nav width: 200px; 26 section width: 750px; 27 28 /style 29 /head 30 body 31 div class="wrapper" 32 h1Static Layout Example/h1 33 headerHEADER/header 34 navNAV/nav 35 sectionSECTION/section 36 /div 37 /body 38 /html CODE 3. Adaptive layout page HTML5 and CSS3 code example 10 FIGURE 6. Adaptive layout web page example in two browser window sizes 2.4   Hybrid layout There is no reason to deny the fact that there are other solutions for creating website layouts. Layout adaptation for different devices can be something between the adaptive and the responsive layout. This situation often occurs as an attempt to optimize the ex- isting site for different types of devices (“mobile last”). There are no specific principles for the hybrid layout, that is why there is no reason to consider it as a complete type of a layout design approach. 2.5   Conclusion I have described most of the possible website layout options. But all of them have a lot of shortcomings. That fact provoked a new approach of creating website layouts and web design in general. What is then needed for creating a responsive web design? If we talk about the development of the layout of the page, we need three main components: •   Flexible grid-based layout •   Flexible images •   Media queries (module specification CSS3) 11 In the following paragraphs I will decribe these components and explain how each of them makes this web design approach responsive. In the pracical part I will create a responsive website which is able to adapt to the user's browser or device limitations. That will be a website that almost entirely meets the needs of the user. 12 3   RESPONSIVE WEB DESIGN PRINCIPLES Responsive web design or RWD is a web design creation approach in which a website is developed with the expectation of providing easy and user-friendly design, including easy viewing of the web page with a minimum resizing and extra spins on a wide range of devices. The responsive design involves the following features: •   While developing responsive layouts only clean HTML 4/5 and CSS3 could be used without a connection of a JavaScript or some JS framework in order to determine the elements’ responsiveness. •   Responsive layout determines how the website elements look on different de- vices. However, these elements should not be hidden or replaced by other ones and their behavior as well as their functions should not be changed. •   RWD should have an adaptive layout. This point is explained and demonstrated in section 3.1. •   RWD does not intend to work with the Domain Object Model, DOM, change the hierarchy or nesting of blocks and objects while changing the markup type. •   The CSS3 media queries module should be used in order to specify different styles or style sheets depending on the screen resolution, size and other device of browser characteristics. •   All elements should be located within the modular grid. •   All content should be flexible – depending on the size of the screen without quality lost. 3.1   Responsive layout The difference between adaptive and responsive methodologies comes down to how the site changes between breakpoints; adaptive is essentially a series of fixed-width layouts, whereas responsive uses flexible dimensions so even between breakpoints sites have fluidity. (Gasston, 2013) 13 Responsive layout is based on the principle of "rubber", but also uses media queries to make the content fit the width of the device. Such an approach does not allow content to make adaptive approach "jumps" at control points and therefore changes are smooth between break points. Responsive layout behavior is shown in Figure 7 and Figure 8. FIGURE 7. Responsive layout web page at various devices To summarize, responsive approach has all the advantages of the other layout types, but also fixes their disadvantages. That makes responsive layout the most advanced and modern approach nowadays. Here is an example of a responsive layout website in Code 4 and a screenshot of the result in Figure 8. 1 DOCTYPE html 2 html 3 head 4 meta charset="utf-8" 5 titleExample 2/title 6 style 7 body background: 2980b9; color: FFF; font-family: Helvetica; text-align: center; margin: 0; 8 header, nav, section border: 1px solid rgba(255,255,255,0.8); margin-bottom: 10px; border- radius: 3px; 9 header padding: 20px 0; 10 nav, section padding: 200px 0; 11 .wrapper max-width: 100%; margin: 0 auto; 14 12 media screen and (min-width: 800px) 13 .wrapper max-width: 90%; 14 header width: 100%; 15 nav, section float: left; 16 nav width: 20.83333%; margin-right: 17 1.041667%; 18 section width: 78.125%; 19 20 media screen and (min-width: 1000px) 21 .wrapper max-width: 66.66667%; 22 23 /style 24 /head 25 body 26 div class="wrapper" 27 h1Static Layout Example/h1 28 headerHEADER/header 29 navNAV/nav 30 sectionSECTION/section 31 /div 32 /body 33 /html CODE 4. Responsive layout page HTML5 and CSS3 code example Responsive layout Code 4 is approximately similar to the adaptive layout Code 3, but the elements’ dimensions are set in percentages, not in pixels. Therefore, the behavior of a layout becomes smooth while resizing the window, eliminating the "jumps" of the adaptive approach. This fact makes this layout type the most advanced and responsive nowadays. FIGURE 8. Responsive layout web page example in two browser window sizes 15 Multiple layout generators and frameworks have been developed in order to reduce the layout development time. These methods are briefly described in Sections 3.1.1 and 3.1.2. However, only pure HTML5 and CSS3 are used in the practical implementation part in order to present how responsive layout works and what exactly it consists of. 3.1.1   Responsive layout implementation option - Frameworks The permanent creation and development of dynamic cross-browser websites and web applications requires going beyond the standard techniques. Fortunately, there are several frameworks that provide the functionality needed for developers to increase efficiency and opportunities to save valuable time. Framework is a software platform that defines the structure of a software system; software that facilitates the development and integration of the various components of a large software project. In the context of web development CSS frameworks are most useful. There are plenty of CSS frameworks in the form of libraries of media queries. The usage of frameworks involves the following features: •   Frameworks allow great reduction of development time because most of the code and rules are already written. •   Frameworks give a lot of unused and unnecessary CSS selectors. •   Studying frameworks' code greatly improves front-end skills. Figure 9 shows the top five best CSS3 frameworks. FIGURE 9. The best top five CSS3 frameworks (http://usablica.github.io/front-end- frameworks/)

Advise: Why You Wasting Money in Costly SEO Tools, Use World's Best Free SEO Tool Ubersuggest.