Responsive Web Design with Generic Coding Principle for Modern Devices
Prof.T.Venkat Narayana Rao1, Aamir Mohammed suhail2, D Rambabu3Professor1, Student2 , Asst.Professor3 Department of C.S.E
Sreenidhi Institute of Science and Technology Ghatkesar , Hyderabad, INDIA.
___________________________________________________________________________________________________ Abstract—Modern companies, institutions, organizations, individuals have websites in order to extend their reach to users and customers. However, it is not sufficient anymore just to have a presence on web and to be recognized through various web search engines. People are increasingly using smart phones and tablets for accessing the Internet. The desktops, personal computers and notebooks, and other communicating devices need a better website interface along with optimization of all these devices in order to provide the best user experience. Mobile users have surpassed over desktop users, making mobile Internet enabling a must. It is evident that mobile search will overtake desktop search at some point in the near future as well. This paper deals with the new approaches of designing websites which would get normalize on devices of different resolutions and make automatically.
Keywords : Design, smart phones, responsive, media, browsers, CSS[Cascading style sheets]
.
____________________________________________________________________________________________________
I. INTRODUCTION
Web design used to be simple art of making the desktops and screen look pleasant when used for browsing and navigation. Traditionally designers use to design interface for the most popular desktop screen-size. They used to create a single layout that works well for every application accessed then. This was typically a 960px layout. Since , emergence of small device like cell phones , tablet , notebook and smart phones the usage of such devices have increased. The access and usage of Internet has increase drastically along with the incidence of numbers of communicating devices. Using 3G and Wifi the users are connected online around the clock. The web has emerged as a major interface for academia, entertainment and even news contents. Hand held mobile devices are the latest device with massive utility [1-3] . Such frequent technological changes cannot be ignored by the website designers. The solution to this could be an evolutionary technique called Responsive Web Design. The following section discusses the responsive web design primitives and its applicability.
A. Fixed-Width Design
Until the last few years, websites were designed so that they would fit well on the most common sizes of desktop and laptop screens . Since last decade website designing was carried out for a screen width of 800 pixels (a pixel is a tiny dot of colored light on the screen) and by mid-2000, most displays were 1,024 pixels wider. The ideas of fluid design and liquid layout gained popularity the early 2000s . These techniques were percentage based widths that allow a web page design to fit the width of the screen normally, such that it could take advantage of the available space on wider screens. Though this sounded fair in theory, but this would end up in super-long line lengths and strange column divisions on wide screens. This has lead most web designers to consider easy to handle fixed-width designs only[3][8][5].
B. Mobile-Web Browsing
With the incidence of mobile phones with Internet access in mid 1990s. It had a limited capability to display actual websites, and has provided merely data that could be displayed in text. Thus, only data such as weather forecasts, stock reports, and cricket scores were retrieved and displayed. The first mobile browsers could only display basic HTML, often in grayscale rather than in color. It was in mid-2000s that mobile browsers were able to display realistic web pages using technologies like JavaScript and CSS2 , on a more superior devices referred to as smart phones like iPhones. Web designers recognized that this it is not an optimal way for users to utilize the web and they would need better means to make web pages to be viewed easier and natural way like desktops on emerging smart phones small screens also [9].
C. Mobile-Websites
As designers were accustomed to create web pages with fixed widths, thus most obvious solution was to simply make separate mobile websites with a fixed page width that would fit on a 320- pixel-wide screen, as a substitute to common 1,024-pixel-wide monitor. Users were often automatically redirected to the mobile version of the site if they use mobile phone . The option was also offered to access mobile website by clicking a link or by entering into site through a different URL commonly termed as m sub domain (such as ht t p://m. sprint.com) . This method has led to separate mobile sites to be referred to as m-dot websites. This has burdened the system and has posed extra work for the web development team, to counter this situation designers had created a simple improvement by making the mobile site a stripped-down version of the usual website with only a minute portion of the content. In the present context mobile phones and laptops have became more ubiquitous[6][8] .
D. Supplement of More Devices
iPhone was the only smart phone or the major player in the website usage domain in the recent past. But it didn’t last for a long period. All other competitors of mobile phone manufacturers had also joined the bandwagon and came out with their reply to the iPhonen, but with a different device set and screen sizes. Hence, web designers started planning to initiate new programming paradigms to fit the demand for new smart phones. Many devices had screens that were narrower i.e. 240 pixels or less , and others had screens wider than the iPhone’s especially those designed to be used with the screen held horizontally rather than vertical orientation [9][7].
E. Media Queries
The web designers started using the concept of fluid layouts, using percentage-based widths, and tried to figure out how to create solution for smaller mobile devices. Using percentages instead of pixels allows a web page and parts of the page to alter width to fit in any screen size. But this would pose a definite issue as narrowing a three-column design into a smart phone width makes the columns of the text too slim to be readable. At the same time a one-column layout that looks fine on a smart phone screen and would be too broad to read when viewed on a desktop monitor. Basically, the problem was how to create separate sites and how would a website be displayed in one column on narrow screens and multiple columns on wider screens. How can a browser adopt a capability to make changes to the design dynamically and that too based on traits of the device and the sites to be viewed on[10].
The CSS @media rule, which permits to display different CSS styles based on device qualities. The usage of CSS2 is more than a decade now, but the issue is that it only supports queries of media types such as screen or print. This was commonly used for creating a print version of a website’s with a limited utility. It wasn’t until CSS3 that the specification for media queries allowed more exact results based on media features like width, height, and color capability etc . Media queries don’t affect the HTML but they only change the styles that are applied to the page using CSS. Since 2009, all Browsers started to carry CSS3 media queries. As a example, let us assume a website with two separate sections of content. We might create a single-column design that fits well on smart phones, displaying the two sections piled vertically. On wider screens, we may want to display the two sections of content as two separate columns subsequent to each other. Using a media query, we can inquire the device how wide is its screen. Then instructions can be keyed in to display the content in two columns only if its screen is wide enough for the columns to fit adequately. To code this, we may simply start out with CSS that will display the contents in one column . Then we add a CSS media query that inquire if the screen is 40 ems or wider (1 em=16px). Inside the media query, we add the CSS that will display the content in two columns instead of one. The browser will only use this CSS if the media query is true (i .e ., if the screen is 40 ems or wider) . If the screen is narrower, it ignores this CSS and the content remains in one column. Websites can be given different design for different screen sizes, without having to craft separate websites. By using media queries, we can change any feature of the website’s style, not just the quantity of columns. Media queries can be used to move things around, alter the text size, conceal or display pieces of content , adjust margins, spacing and also adjust any other style that can be applied with CSS.
.
More than 25 percent of Google searches are now being carried out on mobile devices. Since 2012 over half of all local searches were done on a mobile devices. 25 percent of Internet users access the internet via a mobile device in the United States. 25.85 percent of all emails are opened on mobile phones, with another 10.16 percent being accessed on tablets. In 2014 mobile Internet usage is expected to overtake desktop usage. Out of the 4 billion mobile phones in the world, 1.08 billion are smart phones and 3.05 are SMS enabled.
A. Getting Right Design on Every Device
The most convincing reason for using responsive design is that the users will be creating a website that not only will look superior but also work appropriately on the devices that are in the market now. The h responsive design feature is not that risky for the users for viewing the mobile version of a site on their desktop monitors, or vice versa. If the designers offer separate websites, this can definitely be an issue, whether to use device detection to send the correct version of the site to each device or to use a separate set of URLs (such as an m-dot sub domain) to serve a mobile site. Sites that have different mobile version normally use device detection principle to determine which version of a web page (mobile Or desktop) should be sent to any particular device. That way, each page on the site will only have one URL, although there are actually two separate versions with different HTML versions. However, this process is not 100% precise, and sometimes the erroneous version of the page will be sent . In addition to this, the device detection process can increase the load time of the page .Using a different URL for a separate mobile site is easier to implement, but it relies on the user to access the correct version of the site. With links being passed back and forth between users via social media or email, getting to right version of a page will often add more burden on the users, in some cases user won’t have this option at all. The most obvious gain to using responsive design is that the designer need to create one website, one design, one set of code, and one set of content. If you have a separate mobile only version of your site, you will have to create and maintain two or more separate sets of HTML codes. Changes are needed to incorporated on each site, and even to keep them the same, there will be certainly issues and will end up in not matching. With a responsive site, it has one set of content and it will be displayed suitably, no matter what the screen size is . Future design adjustments can be made by making changes to the style sheets only [11][5].
B. Optimized For Search
If a option of two separate versions of a page with a similar content is offered with different URLs(i..e. http://www.example.com and ht t p://m.example.com), search engines need to know that they are considered to be the same page so that the page can be indexed correctly and displayed. Although this is possible using JavaScript or code on your server, it’s bit complicated, and if the server fail to do so the whole task would end up with confusing in users . It can also negatively affect the search ranking.
C. Responsive Content
Until recently, content has always been thought of as an afterthought to the design, but in recent years the content strategy has gained that meets business goals as well as the user’s needs .To manage website’s content while moving to a new site, start with a content audit to see what you have. Unnecessary content just makes the site more difficult for both the users and the site owner .Make sure that content is concise and written in plain language so that’s easy for users to consume. Users read web pages by scanning so create short paragraphs and use headings to separate the content into sections. Make sure the most important information is at the top of the page, in case the user doesn’t read all the way to the bottom. Don’t make guesses about what content users would desire, based on the devices they are using to access the site . All users to the site should have access to all the content. In addition to adding content to the newly designed site, put thought into how the content will be managed after the site launches. Have a plan for keeping things updated. Create timeless content where you can. Divide your content into portions that can be rearranged on the page, or easily moved to other media[4].
III.HTMLFOR RESPONSIVE SITES
A. Using HTML
This paper considers HTML5 elements for the design i.e. an enhancement over HTML4. If an element is new in HTML5, then users need to know whether the browsers are supporting that element yet. When using old version of HTML then the users must know that the new elements does support environment or not.
The first thing that goes at the top of the HTML file is the document type declaration (doctype). The doctype tells the browser that, what version of HTML the page is using [6].
For HTML5, the doctype is: <!DOCTYPE html>
While using existing websites that use an older version of HTML you would come across a few other doctypes. Even after a new version of HTML has emerged, pages using older versions of HTML continue to work but they must have the correct doctype to match the version of HTML that is being used. If the doctype doesn’t match the HTML being used in the page, the browser will make some deduction and probably get everything to work properly. But not always, so don’t rely on this logic always. If the display is not up to the mark then the designer must ensure to check and make sure that the page has the right doctype to match the version of HTML being used.
B. View Port
The viewport meta element is not generally used for most nonresponsive websites and hence it is must to initiate planning for a responsive site. The viewport is the area on the computer or device screen where in user view a web page and media queries are based on the viewport width. In a mobile device, the viewport width is the same as the screen width .The viewport meta attribute offers instructions to the browser to enable the web page to be displayed and fits in properly in the viewport. Web pages without a viewport setting are rendered, or displayed, at full size on desktop monitors, the way we are accustomed to view them. A mobile phone browser, by default, will render a web page without viewport as it would look on a desktop-sized browser, but scale it down to fit inside the phone’s viewport. If there are media queries based on viewport width, they won’t work, as the browser would assume as if the viewport is desktop-sized. Most mobile phone browsers will render a web page using a default viewport width a of 980 pixels. Suppose a desktop monitor i.e. 980 pixels wide, then what would be the screen scaling factor to fit on the phone’s screen. If the web page is wider than 980 pixels then it may be scaled down to fit the screen. For a responsive site, we don’t need mobile browser to render the page as it would appear on a 980-pixel-wide monitor. We would need to render the page at actual size for the mobile device’s screen width because it is designed the way to fit the small screen’s width without zooming. This needs setting of viewport for a responsive site as follows:
<meta name="viewport" content="width=device-width,initial-scale=1"> C. Width , Initial scale , Columns and .User-Scalable
The width attribute describe the idea relating to the browser how it would scale to the web page. For a responsive site, the value device width relates the browser to make the page at full size. The browser renders the page so that the viewport width is the real width of the device (i .e. at 100%). If device width is not specified in the viewport meta attribute, the device will use its own default viewport setting to render the page. If you use device-width, the width used to render the page will involuntarily alter if the user changes the orientation of the device. Consequently, if the user turns the iPhone from vertical to horizontal, the web page that rendered as 320 pixels will automatically re-render for 480 pixels [5].
The initial-scale attribute tells the browser how to scale the web page when it is first loaded on the screen (i .e. the zoom factor). Using the value initial-scale equal to 1, means that the page will be rendered at the size determined by the width attribute, and will not be zoomed in or out. If you use a number larger or smaller than 1, then the page will be zoomed to that level. The initial-scale value merely determines the size of the web page when it’s first loaded on the screen. The mobile device also gives users the ability to zoom in and out . There’s a value for viewport that will turn off the user’s ability to zoom: user-scalable=no.
D:Media Queries
Media queries are statements that map websites responsiveness to the devices for the sites that are being viewed on . Till now all the CSS declarations have been applied to the web page without regard for the screen size. Here’s an example of a simple media query:
body { background-color: red; }
@media only screen and (min-width: 40em) { body { background-color: blue; }}
The first line in the statements of CSS gives the website’s <body> a background color of red . The second line of CSS depicts that if the viewport is a least width of 40 ems, then the <body> should have a background color of blue. The narrow-width screens get a red background, and the wider screens get a blue background. Keep in mind that each CSS declaration in your style sheet will override any declarations that come before, so the query needs to come after any non-query declarations for
E .Images
Display of different sizes or cropping of the same image depending on the amount of space available on the page is also possible by this approach. We can also add responsive images using cookies and java script. A responsive image's width can be delivered through complicated server logic. Sometimes because of the requirements designer cannot achieve the desired results through the earlier method. The percent-width method relies on the client side for image resizing of a large image file. This method provides a server-side delivery of the properly sized image user request. It may reduce the server load and bandwidth and help user in long loading of site during slow internet access.
IV. Media Query Structure
The simplest way to employ media queries is to have a block of CSS code in the same style sheet file as given below .
@media only screen and (min-width: 40em) { body { background-color: blue; } }
Above syntax is understood simply if we look at each part of the syntax. Media queries in a style sheet always start with @media. After the @media one or more expressions, that are evaluated as either true or false. Once you create a media query, it always needs to start with the media type as given in the first expression. The term “screen” refers to screen as a default meaning. Certain older browsers only upkeep the CSS2 media-type queries, and not different CSS3 queries. So they would read this line and recognize screen but not the width. Browsers just skip any CSS declarations they don’t recognize, but when it comes to media queries, they’re a bit peculiar, and they won’t skip the whole declaration, only the “and” (min-width: 40em) part of the query is considered. So that older browser would see screen and key input as “yes, that’s true,” and apply the CSS on any size screen, regardless of the viewport width. The query is follows multiple expressions which deals to evaluate a quality of the device. The heart of the media query, evaluates expressions that look at media types. Each expression goes inside parentheses except when it’s a one-word media type expression, such as screen or print. If the query is exactly 40 ems, or any width greater than 40 ems, then the query is true. The opposite, the max- prefix, then, means “a maximum of and it is same as saying less than or equal to:
”@media only screen and (min-width: 40em) { ….}
And then lastly, a set of curly brackets surrounding all the CSS that will be applied if the complete media query is true. @media only screen and (min-width: 40em) {
body { background-color: blue; } p { padding: 5px 5%; }
.example { color: red; } }
body { background-color: green; }
@media only screen and (min-width: 40em) { body { background-color: blue; }
}
In the above example we start with green for the background color at all viewport widths. The media query take priority over that with blue for widths of 40 ems or wider, but leaves everything else , and show screen narrower than 40 ems with the original green.
A. Breakpoints
One of the vital concepts in responsive design is breakpoints. A breakpoint is the point at which the system initiate a media query to change the design. It breaks the design into two (or more) variations. Sometimes it is very much visible change, like the number of columns etc. (e.g., changing from one column to two columns at 40 ems) . But other times it is very refined change, like changing the text size slightly to fit better. A good way to think is to imagine a set of all the possible screen sizes, with the smallest screens on one end and the widest screens on the other end [5].
Normally, it works well to design for small screens first. Though the users are more comfortable working with desktop-sized website designs, it’s easier to start design with the finest screen width, which ensures focus on the content and only include what the user need.
Conclusion
The old approach of designing websites with a fixed width device can be concluded and users need not worry about the websites delivery on diverse devices of modern times. We must inculcate the new designing approach which is presented in this paper. The design can be used as a generic model to get rid of laborious and classical way of interfacing with web sites. The approach has much advantages in terms of portability, time and also in maintaining consistency for accessing the websites. This will have a remarkable impact on forth coming revolution in mobile domain and in generic websites design paradigm.
References
[1] J. Moon, T.-B. Lim, K. W. Kim, S. P. Lee and S. Lee, “Advanced Responsive Web Framework”, Proceedings of IEEE Second International Conference on Consumer Electronics, Berlin, (2012).
[2] M. Datkowitz, “UX of Responsive Web Design”, Infragistics (2013). http://www.infragistics.com/community/ blogs/ux/archive/2013/01/23/ux-of-responsive-web-design.aspx, (2013) May.
[3] J. Lynch, “Responsive Web Design: Introduction & Impact (2012). http://searchenginewatch.com/article/ 2184616/Responsive-Web-Design-Introduction-Impact, (2013) February.
[4] Webtise, Mobile & Responsive Web Design and Development – Overview (2013). http://www.webtise.co.uk/ web- design-and-ecommerce/mobile-and-responsive, (2013) June.
[5] S. Krug, “Don’t Make Me Think! Common Sense Approach to Web Usability, New Riders Publishing, California, ed., vol. 2, (2006).
[6] Dormann, C. (2006). Cultural representations in Web design: Differences in emotions and values. In T. McEwan, J. Gulliksen, D. Benyon (Eds.), In Proceedings of HCI 2005: People and Computers XIX - The Bigger Picture (pp. 285- 299). London: Springer.
[7]Bergasa-Suso, J., Sanders, D. A., & Tewkesbury, G. E. (2005). Intelligent browser-based systems to assist internet users. Education, IEEE Transactions on, 48(4), 580-585.
[8] Mohorovicic, S. (2013, May). Implementing responsive web design for enhanced web presence. In Information & Communication Technology Electronics & Microelectronics (MIPRO), 2013 36th International Convention on (pp. 1206- 1210). IEEE.
[9]Hernandez, E. A. (2009). War of the mobile browsers. Pervasive Computing, IEEE, 8(1), 82-85. [10] Clarissa Peterson,”Learning Responsive Web Design,A Beginner’s Guide”.
[11] Benjamin LaGrone,”HTML5 and CSS3 Responsive Web Design CookBook”.
Authors Biographies:
Professor T.Venkat Narayana Rao, received B.E in Computer Technology and Engineering from Nagpur University, Nagpur, India, M.B.A (Systems), holds a M.Tech in Computer Science from Jawaharlal Nehru Technological University, Hyderabad, A.P., India and a Research Scholar in JNTUK. He has 23 years of vast experience in Computer Science and Engineering areas pertaining to academics and industry related I.T issues. He is presently working as Professor, Department of Computer Science and Engineering, Sreenidhi Institute of Science and Technology , Ghatkesar , R.R.Dist.,T.S, INDIA. He is nominated as an Editor and Reviewer to 38 International journals relating to Computer Science and Information Technology and has published 67 papers in international journals. He is currently working on research areas, which include Digital Image Processing, Digital Watermarking, Data Mining, Network Security and other emerging areas of Information Technology. He can be reached at [email protected].
Aamir Mohammed Suhail , born in Kurnool, A.P. Presently pursuing B.Tech in C.S.E in Sreenidhi Institute of Science and Technology , Ghatkesar , R.R.Dist.,T.S, INDIA.. His programming interest include web based projects and designing.
Dugyani Rambabu born in karimnagar, Telagana state, India. Received B.Tech. Degree in Computer science and Engineering from JNTUH, Hyderbad, India and M.Tech. Degree in Computer science and Engineering form JNTUH, Hyderbad. He possesses 10 years of experience teaching Engineering Programme for reputed and AICTE approved colleges. Presently working as Asst. Professor, Department of Computer Science and Engineering, Sreenidhi Institute of Science and Technology, Ghatkesar , R.R.Dist.,T.S, INDIA. He has been actively involved in organzing and coordinating / participating in seminar, workshops, conferences and other professional activities. His current research interests include Data mining, big data and emerging technologies.
