BingoBo: A New Web 3.0 Platform is Born

How to create a mobile ready website in a hacker's way

With more and more users browsing websites on mobile devices, it's imperative to support mobile version of our website in order to reach more users. It took a few years of time before HTML5 rocks with CSS3. So we went through the solutions from mobile friendly website to mobile apps and now reaches Responsive Web Design (RWD) solution which seams very promising.

There are still many viable choices that suit different businesses or applications needs. Each of which has some pros and cons. With latest versions of mobile platforms released, we have most of them supports JavaScript and CSS which allow us a lot more flexibility for mobile web development. Between the choices of using mobile apps or RWD, depends on your website requirements, you may choose one vs. another.

For me, the requirement of my blog website is:

  • Must support both PC desktop and mobile platforms
  • Must be easy to fill in the content for each blog page using template
  • Must have a quick deployment solution to get post online
  • Must be secure and easy for maintenance including backup

Based on the above criteria, here are some of my strategy and tactics. I chose RWD vs. mobile apps which need to take care of numerous types of mobile devices on various kinds of mobile platform. The cost for the development and maintenance for mobile apps is too high. Although there are quite a bunch of tools available, setting up an environment to start using the tools could take quite substantial time, for example, PhoneGap is a pretty popular tool among the others. This solution is dropped.

Among the other possible solutions of RWD, I abandoned WordPress because it's not flexible enough to suite my needs. Although I overcame most of the obstacles in setting up a vanilla WordPress engine on my VPS hosting site, one small issue, such as the automated file name change failed, could cease me from proceeding quickly. And there are not many RWD templates available in WordPress, while there are too many other templates for people to choose from. It could take you a long time to decide which one to go with and keep adding on more and more plug-ins to meet your goal. Moreover, the fact that it does not generate HTML code requires us to backup everything on the server including database with the huge monitoring data combined together. It's not efficient for maintenance and it's not reliable for fail over.

Then I turned to hack existing templates available online, such as html5up.net which provides various kinds of RWD templates under the Creative Commons license. I chose one or two of them I like and start to crack. Although they claim that it's highly customizable in part of the HTML source code, it's not easy to change the layout, replace some text with images or completely change the font face and size, etc. I made the font change and replace the text bar with logo and so on. But I found it's hard to change the header font size which is tied to some ratio of the context font size. Before I spend too much time on it, I switched to some other online RWD pages which are easier to crack.

Before that, I'm used to code HTML/JavaScript/CSS, but know very little about HTML5/CSS3. So I don't quite understand the new syntax applied in the downloaded code. The quickest way to learn something new is actually using it according to the sample code and tweaking it. So I replaced the background, changed the font face and size and replaced text with clickable image logo. Now there are fewer free fonts available online. So picking a decent font is really not that easy. Download the font library and install it somewhere on the server under the web root, then add the following line into the HTML:

@font-face {font-family:'Rokkitt'; src: url(font/Rokkitt.otf)}

or

<link href='http://fonts.googleapis.com/css?family=Rokkitt' rel='stylesheet' type='text/css'>

In order to support the dynamic content such as contact forms, user comments and monitoring site statistics, jsp along with the application server to connect to the database server on the backend is preferred over PHP to add a layer of security. This also allows you to create the template using <jsp:include> to make it modulized with header.html, footer.html, comments.jsp included with only the content body to be substituted.

After I quickly made everything ready with 10 pages created and deployed it on the production server in 3 hours, I found the responsive style which is working on the PC browser does not show the same responsive behavior on mobile devices. It almost defeated the purpose. The basic idea for implementing RWD is to create one modulized HTML/jsp page template and two styles with the mobile version as the default style. If the browser size exceeds certain size, it will show the web version which is more comprehensive. It's not the magic HTML5 takes care of it. HTML5/CSS provides an easy way to code and work with the browsers easily. The developers must implement the code to take care of both web and mobile browsers. The good thing is we don't need to detect each specific browser users may use and write code for each particular mobile platforms. The same as WordPress, there are tricks to deal with before making the hacked code working:

  1. It is not functioning on the mobile device.

  2. After use the following CSS code to differentiate browser sizes:

    @media screen and (max-width:1025px)

    You must include the additional line to the header of each HTML page:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    This fixed the problem. The rest is pretty straight forward: understand what 'em' and 'rem' mean, why use '!important', how to make round corner and shadow, using <header>, <article> and role, etc. I still don't understand 100% of the code because I don't have the time to go through the HTML5/CSS course online, but the code serves the purpose. It's quite complicated with lots of conventions being defined. People may take a while to gradually get use to it.

  3. The content scrolling overlaps the header bar.

  4. The original code was perfectly working on the website. But after I downloaded it on to my local server, it's not functioning. I used the traditional way to fix that with z-index:2 and background non-transparent for the header bar:

    style="background-color:#fff;background:rgba(f,f,f,1);z-index:2;"

  5. Failed to migrate the background from Striped template of html5up

  6. The background of Striped looks cool. However, it's not shown the exact physical background image. I tried many times, it just does not look the same way on my page. Then I found that it has 50% opacity which make it looks very smooth. I know the code but I couldn't find a proper place to add the code into the new code. Soon before I spend too much time on it, I decided to keep the background pure white.

When it comes to the deployment, create a simple ANT build script to automatically build the .war file for you. So every time after you tune the code directly on the local Windows server and update the source control, you only need to click one return to build it including deployment, and another click to restart the application server. You can see the whole website up and running in a second. And you can deploy it onto the Linux production server in less than an hour. You only need to upload one .war file to the production site instead of uploading a bunch of files. This makes it very easy to backup. Make sure to use SSH/SCP/SFTP to do the uploading. Then your production site is available to the public.

Therefore, if this way can help me to create your RWD website quickly and easily, why don't you try it? It may require a stack of techniques:

HTML/CSS3/JavaScript/jsp/servlet/Linux/Apache/MySQL/Tomcat/mod_JK/SSL/Ant

It could be very much different from your current skill sets. But they are the fundamental tools to use in order to build a secure and scalable website in the long run before you upgrade to the set of tools on the enterprise level. I'll create each know-how in the recipe part of the blog in the future posts.