{"id":6303,"date":"2015-08-03T17:45:33","date_gmt":"2015-08-03T14:45:33","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6303"},"modified":"2015-08-03T17:33:08","modified_gmt":"2015-08-03T14:33:08","slug":"approaching-responsive-design","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/web-development\/approaching-responsive-design\/","title":{"rendered":"Approaching Responsive Design"},"content":{"rendered":"

Coming from a Java back-end background and given the privilege to dive into the front-end space, I was finally able\u00a0see what it was like to make a web application responsive.<\/p>\n

Although there are plenty of other benefits to responsive design, a main benefit is that\u00a0there is now no need to create an application for every device out there. The use of mobile devices to accomplish what a user can do on a desktop is growing at an considerable pace, so it would be wise for any front-end developer to ensure a web application is ready to adapt to a plethora of screen sizes. I was excited to learn how to do just that, and what better way than the need\u00a0to create another mobile version of an\u00a0application.<\/p>\n

This won\u2019t be a tutorial on how to use, say, Bootstrap for example, to create a responsive application. There are hundreds of tutorials online and a good start can be found just be directing oneself to the Bootstrap CSS<\/a> site. Rather, this is a little snippet of some random unforeseen issues a responsive newbie like myself can encounter while developing in the responsive front-end world.<\/p>\n

First, let\u2019s start with the iPhone.<\/h2>\n

Let\u2019s say you create a Bootstrap responsive application with all the bells and whistles to get your application reorganizing and looking great while resizing your screen on a desktop. But this doesn\u2019t work on an iPhone.<\/p>\n

Why? I suggest that you ensure a ViewPort Metatag is included in your tag to allow mobile browsers to control the layout. Mobile browsers render pages in a virtual window or viewport. Mobile Safari introduced the ViewPort Metatag to allow developers control of the size and scale of the viewport.<\/p>\n

For only portrait view add the following:<\/p>\n

<meta name=\"viewport\" content=\"width=device-width, inital-scale=1.0\"><\/pre>\n
To allow for landscape view as well, add the following:<\/p>\n
<meta name=\"viewport\" content=\"width=device-width, inital-scale=1, maximum-scale=1, user-scalable=0\"><\/pre>\n
Note:<\/strong> The most recent version of Bootstrap actually requires this tag to be included in your responsive application since Bootstrap likes to claim itself as being \u201cmobile first.\u201d<\/p>\n
In my current project, a defect (well, more like an annoyance) arose that dealt with iOS devices, particularly iPhones. The defect dealt with the common iOS behavior of zooming in a little when selecting an input box or select option. In this case, once the user leaves focus, it stayed zoomed in and ended up sort of throwing the entire view of the container out of whack.<\/p>\n
Since now the user has to horizontally or vertically scroll to see the entire container because of this zoom. It appears, for iPhones, the browser tries to zoom the area since the font size is less than the threshold. Bootstrap\u2019s default font-size is 14px, which causes the zoom effect. A size of 16px or 1em is appropriate to meet this threshold.<\/p>\n
Applying the following CSS\u00a0ironed out all text\/number inputs:<\/p>\n
input[type='text'],\r\ninput[type='number'],\r\ntextarea {\r\n  \tfont-size: 1em;\r\n}<\/pre>\n
Since dealing with selects on mobile browsers, the text is hidden so we are safe with any unforseen layout issues. I say \u2018hidden\u2019 because these selects don\u2019t render the same as selects on desktop browsers. Each mobile OS utilizes its own native view for the user to select a value. Thereby, a work-around for us is to establish the font size to 50px and viola! No more zooming\u2026<\/p>\n
select {\r\n\tfont-size: 50px;\r\n}<\/pre>\n
To change direction briefly, I have an old Nokia phone with a rinky dinky mobile browser on it and was curious to see what a responsive site looked like. I wasn\u2019t surprised to find out the browser does not support CSS media queries and so it ignored it leaving the site unresponsive and pretty much as is. One of the downfalls of an ever-evolving mobile landscape.<\/p>\n
Fortunately, newer versions of iOS, Android, and most mobile browsers all support CSS\u00a0media queries. There is no way to get some of these old browsers to handle or implement CSS\u00a0media queries, but an adequate solution would be to check for browser version and then create a simple mobile stylesheet to handle a similar responsive rendering. It won\u2019t look as great as a modern mobile browser, but generally, a responsive theme with backwards compatibility can still be a good thing.<\/p>\n
Responsive Datatable<\/h2>\n
Let\u2019s switch gears a bit and take a look at how one can approach creating a responsive datatable. When dealing with datatables, I did a little research to see what was out there in terms of plugins to handle responsive tables. Boy, I didn\u2019t come up empty-handed. There exists plenty of plugin options to choose from (just to outline a few):<\/p>\n