Responsive Design: A design philosophy

Responsive Design is a design philosophy where in the design of the system (the representation and the layout) responds/adapts depending upon the layout of the device. The primary reason to keep your design responsive is to increase the reach of your application to a larger user base using an array of devices.

Responsive Web Design

Improving Usability and accessibility:

A responsive design improves the usability of the product. Few years back, before the advent of mobile Internet communication devices, Developers used to make their applications compatible with screens of various resolutions. This can also be called making the design responsive. In today's world, where more and more users are consuming information on your mobile devices, you need to handle the changing view-ports and hardware.

Unlike popular belief, making design responsive does not necessarily mean fitting the entire application on the user's screen. It means:

1. intelligently pruning amount of information displayed and
2. making adjustments to the design to improve the users' experience while using the application.

For example, if you open a web application on desktop, you may consider going all guns blazing and displaying a lot of information in the available screen with each component occupying optimal space. But, when you switch to a mobile device, you should not try to squeeze all the information into the limited real estate on screen.

Instead you should choose to

1. drop out the less important chunks of information;
2. reduce the number of processor-heavy components (elements that need to be frequently updated/redrawn/re-calculated); and
3. reduce textual content to only highlight extremely important content

Like, a news app on desktop may show a snippet of the news article along with the headline and a thumbnail about the article. But, on mobile, it need only show the headline, timestamp and publisher, and so on.

Also, even though the mobile screens now-a-days sport desktop-like resolutions, you need to realize that the physical dimensions of these devices are still smaller. So, to make it easier for the user to consume information, the developer should take steps like increasing the font-size, increasing the dimensions & placement of thumbnails, etc to make the information easily readable (accessible) even on a small screen. Developers also need to ensure that controls in the application are accessible when viewed on smaller screens. For example, the size of buttons and links should not fall below a limit that they become virtually inaccessible.

Where to go from here:

• Have a look at the examples listed on mediaqueri.es to get a better idea.
• To learn more about designing responsive web applications, check out book 4 of the "A Book Apart" series titled: Responsive Web Design by Ethan Marcotte.
• To test responsive-ness of your application within the browser without the need to install any additional plugin or simulator, try RWD Bookmarklet.

For any queries or doubts, leave a comment in the comments section below.

Detecting user's Windows operating system version using the user-agent.

to get the user-agent information of the user's browser:

navigator.userAgent

String to look for:

WinXP:       NT 5.1
Vista :         NT 6.0
Windows 7: NT 6.1
Windows 8: NT 6.2

Tiny JavaScript function to get user's OS:

function getOSVersion() {
    navigator.userAgent.indexOf("NT 5.") != -1 return "XP";
    /* all Service packs included */
    navigator.userAgent.indexOf("NT 6.0") != -1 return "Vista";
    navigator.userAgent.indexOf("NT 6.1") != -1 return "7";
    navigator.userAgent.indexOf("NT 6.2") != -1 return "8";
    return "Other";
}

Split & Join: What you need to know about replace operation on Strings!

Once upon a time long long ago, in ActionScript 2, String.replace method was missing (something that can be seen in most other major programming languages).

After many years, 'replace' method came along in String class of ActionScript 3. But, not many folks were happy. Because, in ActionScript 3, string.replace(arg1, arg2), replaces only the first occurrence of the arg1 with arg2.

In order to perform a ‘replace all’ operation use

strTarget.replace(/arg1/g, arg2);

The 'g' is just a handle to specify that all occurrences of the string arg1 need to be replaced

or
 

strTarget.split(arg1).join(arg2);

Point to note here is that, in the both the methods, traditional 'replace' & the 'split-join' method arg1 can be of type string or a regular expression as the need be.

Chronicles of Sockets in Flash: the cross-domain, the Sockets & the Ports!

Connecting to a server-side socket from Flash using ActionScript 3.0


Cross domain policy

Its absolutely, undoubtedly not possible to connect to a UDP socket from within Flash (unless of course you are within the application sandbox of an AIR application).

Outside of AIR, Flash can only connect to TCP/IP sockets that too the ones that are specified in the cross-domain xml. This is true even if the swf domain is same as that of the target socket.

Also, the cross domain xml needs to be served by a socket on the same domain (not necessarily the same port as the target socket).

For Flash Player 10 onwards, this xml should come as plain text response over the socket (basically to avoid any HTTP headers).

Moral of the story: UDP not possible (as of now) if you are working on a web-based Flash (non-AIR) application. And, cross-domain policy file needs to be server over a socket & not as an xml file from a web server (even if) on the target domain.

A typical cross-domain xml looks like this.

<?xml version="1.0"?> <!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> <cross-domain-policy>   <allow-access-from domain="*" secure="false" to-ports="843,1232-1237"> < /cross-domain-policy>

Ensure that you have mentioned the ports that need to access the socket properly in the "to-ports" attribute.
In the above example, the list of all allowed ports are: 843, 1232,1233, 1234, 1235, 1236, and 1237.

Also, if the cross-domain is not working even if it seems that you have done everything right, then try adding a EOL character at the end of the cross-domain string.

Hope this helps!

Flex 4: Truncating labels in a Tree Component

Recently, I stumbled upon quite a bunch of questions on forums regarding truncating the labels of entries in the Tree Component.

The solution, scattered in many places, not that obvious, is quite easy.

All you need to do is use the 'truncateToFit' property with your Tree Item Renderer.

The different ways of achieving this when using an MXML item renderer & an ActionScript class file as renderer are mentioned below:


1. When using an MXML based item renderer

In this case, all one needs to do is add truncateToFit="true" to the Label tag in the MXML file.

<mx:label color="#00ff00" font="font" id="labelField" paddingtop="2" text="{treeListData.label}" truncateToFit="true" width="100" >

2. When using an ActionScript class based item renderer

In this case, just add a single line at the end of the updateDisplayList overridden method as shown below:

override protected function updateDisplayList (unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
....
this.label.truncateToFit();

}

When working with a class based renderer, 'truncateToFit' acts as a method that returns a Boolean value to inform whether truncate action was required or not. Also, it can accept a single parameter that you wish to use instead of the ellipsis (by default ellipsis '...' are used). This might be useful to somebody :)

Flex 4: Using 'truncateToFit' to truncate longer labels? Don't forget to mention 'maxWidth'!

Recently, I stumbled across another of the few tricks that are 'good-to-know' when it comes to flex development.

In order to make life easier Flex offers a property called truncateToFit with its lable component, thereby offsetting the developer to manually handle truncating long labels & appending '...' at the end.

But, it is noteworthy that only setting the truncateToFit Boolean does not suffice. You need to also mention the 'maxWidth' and/or 'width' property for the label.

<mx:Label text="Hello World!" truncateToFit="true" maxWidth="180"/>

My first blog post

My first blog post