How to test Responsive Web Design of your site?

I often get this question again and again i.e. how do I test the site which I designed for responsiveness? 

First up all what is Responsive Design?

Responsive web design (RWD) is a web design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)

A site designed with RWD adapts the layout to the viewing environment by using fluid, proportion-based grids, flexible images, and CSS3 media queries, an extension of the @media rule.

What are the advantages of RWD?

With Responsive Design, you can create one design and it will automatically adapt itself based on the screen size of the mobile device. This approach offers plenty of advantages:

• It save time and money as you don’t have to maintain separate websites for desktops and mobile phones.
• Responsive Design is good for your website’s SEO (search rankings) as every page on your site will have a single URL and thus Google juice is preserved. You don’t have to worry about situations where some sites link to your mobile site while other link to your desktop site.
• Your Google Analytics reports will paint a better picture of your site’s usage since the data from mobile and desktop users will be consolidated.
• The same will be true for the social sharing stats (Facebook Likes, Tweets, +1’s) since the mobile and desktop versions of your web pages will no longer have different URLs.
• Responsive Designs are easier to maintain as they do not involve any server-side components. You just have to modify the underlying CSS of a page to change its appearance (or layout) on a particular device.
• The earlier design methods looked at user agent strings to determine the mobile device name and the browser that is making the request. That was less accurate and with the number of devices and mobile browsers expanding every day, that matrix is very difficult to maintain. Responsive Design doesn’t care about user agents.

How to test RWD of a web page?

A good number of websites are now using Responsive Web Design instead of building separate designs for mobile and desktop screens. The same design is served to all devices – including desktops, tablets, mobile phone, e-readers and even gaming consoles – and the layout magically adapts itself based on the screen’s resolution.

Following websites will help you test your web page for responsiveness.

• mattkersley.com/responsive – You can use this tool to quickly test your site layout against standard screen widths (or breakpoints). The source code is available on Github and you can thus expand it as per your requirements.
• quirktools.com/screenfly – This is my favorite tool for two reasons – it supports a much larger number of screen resolutions (including TVs) and second, Screenfly sends proper user agent strings while requesting web pages for different devices. Thus you get the best of both worlds (see notes).
• responsinator.com – Another nicely-done tool to help you understand how your responsive site will look on the most popular devices in various orientations. It can replicate the iPhone, iPad, Kindle and Android smartphones.

Have fun. Good luck.

An Indian Railways API Set

Hi Folks,

I have a very good news for people who try to access www.irctc.com website to find about seat availability, PNR status, railway station by name etc. Now we can actually get this information using API's which are released for ease of use.

What are API's?
 API or Application Program Interface, is a set of predefined protocols, routines and tools for building some software applications. A good API makes it easier to develop a program by providing all the building blocks.

 

 

Different Indian railways APIs, provided by RailPNRAPI, serves the same purpose. They are simple web based APIs for checking PNR status, getting station information by station code, checking Indian railways train route and schedule, checking seat availability and much more.

The output of Indian railways APIs can be get in XML and JSON formats based on your need.

For complete list of available API's and details see here

How to generate XSD from XML

In our day to day software development process we often come across the situations wherein we have been given some XML files and asked to convert them into XSD’s.

What is XSD?

XSD can be used to express a set of rules to which an XML document must conform in order to be considered 'valid' according to that schema. However, unlike most other schema languages, XSD was also designed with the intent that determination of a document's validity would produce a collection of information adhering to specific data types. 

This post step by step explains how to create a XSD file using existing XML file. We will use a tool called “Trang” for achieving this.

Steps:

 

1) Go to Trang’s project's download page and download the latest version. At the current time, the file trang-20091111.zip is the latest.

2) Extract the ZIP archive and inside you will find a JAR file called trang.jar. Contents of the zip file will be as below.

3) Copy the trang.jar file to your project where you have your XML file.

Contents of my Employee.xml is as below:

4) Open the command prompt and then go to your XML folder. Assuming you have installed java,

Then type java –jar trang.jar Employee.xml Employee.xsd

Take a brief look at the generated Employee.xsd and replace any very specific element types (in this case thexs:NCName) to more simpler types, such as xs:string.

Very simple isn’t it?