Responsive Web Design

Google has an document about How to Building Smartphone-Optimized Websites. In this document, responsive web design is the first suggestion.

I have been looking for a easy to implement responsive css framework that can change my websites layout so that they can fit to smart phone device for quite a little while. However, most of them requires more than a css file. 

After searching aroung, I found a good article that introducts 10 well adopted grid frameworks 10 Lightweight & Minimal Responsive Grid Frameworks

Among them, the Simple Grid is very clean and simple. It does not work well on IE 7 or IE 8. Other than that, it works fine.  The Proportional Grids is also a quite stable and simple one. For a website that involves user input, I would recommend Base Framework which is almost ready to use so that you do not have to worry about the user input formatting.

It is very important to add following line to the header of the html to make sure that the font of the  document will not be scaled when they are displayed in mobile device.  You can find it in the base framework demo page.

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

For most responsive system, IE 7 and IE 8 seems not working very well, even the sample Google poviding in following page Google About

This is the web page that describes Google's way to do responsive design, from Google's official blog: http://googlewebmastercentral.blogspot.ca/2012/04/responsive-design-harnessing-power-of.html

It is also noted that some responsive design has a more smooth changes when browser view ports becomes smaller, including a 4 column phase, 3 column phase, and eventually 1 column phase. However, this seems not so important. Google does not bother to provide intermediate phases at all.


Following web site provides lots of information about browser pixel configuration: http://www.websitedimensions.com/. It also provides tools to test the website layout.

Following article provides a good responsive template that can be installed in Blogger Spot. Quite easy to use. Unfortunately it is only a two column structure, not as complete as a 3 column structure.
Incipient - A Free Responsive Blogger Template

 Another good example is listed here: JPstation Blogger Templates.

5 Best Free Responsive Blogger Templates provides several good samples of template. Particularly, I like this one Copyblogger Theme V2. You can download it from http://www.blogtipsntricks.com/2012/11/copyblogger-v2-responsive-blogger-template.html


 In the http://www.ivythemes.com website, there are many fluid themes other than JPstation one. Each of them comes with good introduction about how to install them on Google Blogger Spot. It is very interesting that this website is also hosted with BlogSpot. It has many good feature, such as a search box that performs search some how in links. 
In another related article 10 Responsive Navigation Solutions and Tutorials, a few navigation system are discussed. After testing them on my iphone and desktop browsers, I found the  Responsive Drop Down Navigation Menu/ is a very good one. I myself do not like the control list control. If you visit Microsoft home page you will find the web page is also using multi-level drop down menu to organize the content. In order to hide the menu further as Microsoft web site, following article can be refered:Really simple responsive menu. By the way, the font of this website really looks cool :)

Comments

  1. tooomuch.comNovember 20, 2012 at 11:29 AM

    Please check here for more template:
    http://www.bloggertricks.org/2012/08/best-responsive-blogger-templates.html

    ReplyDelete
  2. UnknownMay 24, 2014 at 3:58 AM

    WOW.... excellent and interesting content here. So useful for me. Thanks for publishing.
    Responsive Web Design Services Bangalore| Static Website Design Company Bangalore

    ReplyDelete
  3. UnknownOctober 2, 2014 at 4:10 AM

    Responsive design is very important thing for magento ecommerce websites.Because it is only help to give the good looking to ecommerce website.
    Web Design Company | Website Designing Companies

    ReplyDelete
  4. UnknownDecember 15, 2014 at 7:05 AM

    Hi! This publish could not be publicized any better! Studying this publish notifies me of my old roommate!
    web experts in Bangalore | web designers Bangalore

    ReplyDelete
  5. UnknownJune 16, 2017 at 12:15 AM

    Thanks for sharing your fabulous idea. This blog is really very useful.Responsive Website Designing

    ReplyDelete
  6. UnknownJuly 26, 2017 at 4:53 AM

    Great post. I found very useful info from this post. Thank you very much.

    affordable web design services | top web design companies

    ReplyDelete
  7. UnknownSeptember 18, 2017 at 5:13 AM

    The information you have posted is very useful. The sites you have referred was good. Thanks for sharing...
    wordpress web design

    ReplyDelete
  8. AnonymousSeptember 28, 2017 at 12:12 AM

    The website is looking bit flashy and it catches the visitors eyes. Design is pretty simple and a good user friendly interface.
    wordpress web design

    ReplyDelete
  9. Android App Development Company in IndoreOctober 30, 2017 at 11:26 PM

    Creating responsive websites using Visual Studio is good idea. Thanks for sharing different way to design and develop websites.

    ReplyDelete
  10. web hosting services in indiaApril 30, 2018 at 12:31 AM

    Hi Wow what a article i really enjoyed reading this i will come again to read, And you are looking for Hosting Services in india Please visit us We are Best Hosting Service Provider Thanks

    ReplyDelete
  11. digiclayinfotechMay 9, 2018 at 3:33 AM

    Hi! Thank you for the share this information. This is very useful information for online blog review readers. Keep it up such a nice posting like this. We are most leading Software Provider Company in India

    ReplyDelete
  12. android application developmentMay 14, 2018 at 2:18 AM

    Thanks for sharing this information I really enjoyed reading this article if you are looking for app developer, mobile app development from the unplugged web please visit us.

    ReplyDelete
  13. AnonymousMay 23, 2018 at 3:49 AM

    This comment has been removed by a blog administrator.

    ReplyDelete
  14. AnonymousMay 28, 2018 at 4:08 AM

    This comment has been removed by a blog administrator.

    ReplyDelete
  15. Saqib KhatriMarch 2, 2019 at 1:08 AM

    Wow, this is fascinating reading. I am glad I found this and got to read it. Great job on this content. I liked it a lot. Thanks for the great and unique info. Kansas City web design companies

    ReplyDelete

Post a Comment

Popular posts from this blog

Newsmag Theme and External Featured Image

The  NewsMag  wordpress theme is a fast and simple.  It is excellent for a news, newspaper, magazine, publishing or review site. It also supports videos from YouTube and features a rating system. It uses the best clean SEO practices, and on top of that, it’s fast, simple, and easy to use. In addition, News mag supports responsive Google Ads and AdSense. The problem I had with this theme is that it does not work with  Nelio External Featured Image  by default. You can follow the steps in this article to make the theme and the plugin work with each other Nelio External Featured Image Not working with Newsmag theme Another useful information is here:  Solution fix thumn for theme Newsmag when using module Nelio External Featured Image Unfortunately whenever the theme is updated, the update to the theme will get lost. Therefore it is not a good idea to use the   Nelio External Featured Image  plugin. After some research, I found a...
Read more

Javascript Hosted on Google Drive Not Working Reliably

Here is the story. I have been using Google Drive to host the javascript files and stylesheet files all the time. It works perfectly, until a few days ago when I noticed that if the web page contains javascript files hosted at Google Drive, it can not be viewed properly from the Facebook built in web browser.  I did some further investigation. The same thing happened when the page is opened in Wechat built in browser.  However, the page works fine when it is opened in most browsers, like IE, Chrome, Firefox. It took me several hours to figure why. And So far I have not find out the reason. I checked the mime type of the files. They are correctly recognized by Google Drive. But the solution is: moving the files out of Google Drive. Now it works perfectly, in browser and in App built in web browsers as well.
Read more

How to clear MS SQL Server Database log file on GoDaddy

GoDaddy does not allow webmaster to clear the MS SQL Server database log file. And the Database file size is limited to 200 MB. I used to call GoDaddy to truncate the log file. However, it is really time consuming. Using following workflow I can successfully truncate my SQL Server log file. 1. Create a new MS SQL Server DB name it as NDTemplate.  2. Backup this database as an empty database. The backup file is about 1.6MB 3. Backup the original DB that you need to truncate. At my case this backup file is about 200MB. 4. Generate database script for the full database, and execute this sql script against the empty database. 5. Export the data in the Database to the new DB 6. Backup the new DB again and restore it against the original DB. Now the database will have all the data and structure. But the log file is minimized. It will only include the initial insert log.
Read more