• Objects
• Functions
• Inheritance
• DOM Basics
• Arrays
• Regular Expressions

I plan to keep each post focused on a specific sub-topic thus making it easier to read and grasp the concepts.

Mobile

By now, you should have been convinced that the needs of a Mobile Web User is different from a Desktop Web User. The Main difference come in the areas of:

• Amount of Content
• Organization of Content
• Navigation
• Optimal usage of Data & Bandwidth

Let’s understand the two options available to make your WordPress Site Friendly to the users visiting from a Mobile Device (let’s assume a Smartphone)

Option #1: Using a Theme with Responsive Design

A Responsive Design is one that can adapt itself gracefully to Devices with varied Display Characteristics like Desktop, Tablets and Mobiles. It is an extension of “code once view anywhere” principle, that does not require maintenance or changes to the Theme for multiple devices.

For those technically inclined, this is achieved using:

1. Flexible Grids
2. Flexible Media (like Images, Video etc.)
3. CSS Media Queries

Grab a copy this book on Responsive Design, which is short but a very useful read.

So, what are the advantages of this approach?

• One Theme for all. Less maintenance your Themes
• No additional Plugins. That is one plugin less!
• SEO not duplicated. SEO of your main site is applied across devices
• Good Adaptability, the Site can easily adapt to a New Device that comes up with unique Display Characteristics

Are there any disadvantages? For sure, Yes.

• Best Effort Approach. Cannot be completely optimized for every device
• Only Visual Adaptation possible. No Content Adaptation (For example, you can say “Show this element different on various devices” but you cannot say “Show Element 1 on Tablets, Element 2 on Mobiles,…”
• Mobile specific Advertising not possible
• Web-app Mode (standalone mode) without the Browser Chrome is not possible
• Navigation can sometime become crappy/cumbersome (read this)

Option #2: Mobile WP Themes

(Note: I will refer primarily to WP Touch which is one of the best Mobile WP Theme Plugins around)

With Mobile WP Themes, the approach is to have a specific WP Theme that is completely different from your Main Site Theme and optimized for Mobile Devices (and possibly Tablets).

It comes in the form of a Plugin, which takes care of presenting the Mobile/Tablet specific content, when the user arrives at your Site on the respective device.

Primary Advantages of this approach:

• Complete Control of the Mobile Experience, without in anyway impacting the Main Site Design
• Possibility of using the Web-App Mode where users can Bookmark your site for Native-like User Experience
• Mobile or Tablet Specific Child Themes can be created, thus making the switch of Mobile Themes easier
• Navigations and Icons are 100% optimized for Mobiles and Tablets
• Custom Mobile Ads can be used, which does not interfere with Desktop Ads
• Knowledge of CSS is not necessary for making changes, as required with the Responsive Design approach

However, the following are the Drawbacks with this approach:

• Additional Plugin required
• Separate Maintenance required for Desktop and Mobile Themes
• SEO has to be carefully planned, as it may be duplicated
• Some Plugin Branding may be required, unless you are ready to Pay for the Plugin

Summary

So which way should you head?

#1. Know your Website’s Anatomy on the Browser

First step to speed up your Site, is to understand how the Browser views your Site.  Essentially, you will need to know the Size of the Content downloaded, Resource Files and Errors (if any).

I suggest the usage of Firebug plugin on the Mozilla Firefox Browser for this purpose.  You can primarily use it for the following (I will tell you how):

• Total Number of Resources downloaded and their Sizes
• Viewing Errors
• Number of Requests Made

Illustration on the different sections of Firebug to understand your Site

#2. Compress the CSS and Javascript Files

Browsers don’t demand readability with your CSS and Javascript Files.  As long as the files are syntactically right, the Browser will be happy.

By Compressing the CSS and Javascript Files, you gain about 50-75% of Reduction in the Size of these files thus reducing the Network Traffic (Rule of Thumb #3)

• Clean CSS – Upload your CSS Files to this Site and choose the ‘Highest’ level of Compression.  Make sure to retain a backup, in case the compression disturbs your Site UI Layouts
• Online YUI Compressor - Upload your JS Files to this Site and it can compress the files, thus reducing their size.  Again make sure to retain backups

#3. Get rid off unnecessary Javascript Files

Just a quick check on my Site for the number of Javascript files, reveals that there are about 20 Files downloaded some of which I am not aware of.  (Rule of Thumb #1)

Lot of JS Files downloaded

Primarily, these unknown Javascript files are introduced by various WordPress Plugins.  Also, over a time these plugins can introduce duplicate versions of the Same Files (example, jQuery Files).

There is no tool to help you with this, but spend some time in understanding the source of each File and see if it can be skipped.

#4. Minimize the Number of Images (using CSS Sprites)

I am not going to educate you about CSS Sprites in this post.  But I strongly suggest you read this post on CSS Tricks, that has everything you need to know about CSS Sprites. (Rule of Thumb #1)

In short, CSS Sprites is a technique to combine Multiple Images in one Image File (called a Sprite) and display certain portions of Image at certain locations, thus minimizing the Number of downloaded Images.

See if this technique is a candidate for your Site and adopt it.  May be you require help from your Site Designer with this.

#5. Deactivate unused and costly Plugins

Just follow these steps, I do this once in every 2 Months for my WordPress Site:

1. Login to WP Admin Dashboard and Navigate to Plugins Section
2. Look at all Plugins one after another
3. Ask yourself a question at each plugin – “Do I really need this?”
4. If your answer is “NO”, Delete it
5. If your answer is “Don’t Know”, Deactivate it
6. Install this One (!!) Additional Plugin – P3 Profiler
7. Identify any Plugin that potentially slows down your site and Delete/Deactivate it (Refer steps 3-5)

#1 Crash

Application crashes primarily contribute to App Failures. An App that crashes in the middle of its usage, has certainly a Lost User.

More Worse, will be the Loss of Essential Data or Screwed up Transactions.

#2 Bad Design

Crappy or Unthoughtful Design can certainly set off Users. A Clean Design is essential irrespective of whether the App belongs to Utility, Productivity or the Immersive Category.

#3 Inferior Usability

App Stores offer an option for the users to preview the Design before Purchase or Download. But, the Usability is realized only when they start using the App.

Usability plays a key role to make any App, a Success. The lack of it leads to definite failure.

#4 Poor Performance

If your App performs badly in terms of Speed and Operation under normal circumstances of usage, then it could lead to abandonment.

Understand the usage patterns of your App and make sure the Performance is acceptable.

#5 Slow Network Latency

Certain Apps, like the ones that deal with Images and Videos, perform badly when used in slower networks (like EDGE).

If slower data networks are common in your Primary Market, make sure the Performance is reasonable.

#6 Eating up Battery Life

An App that eats up all the Battery Life in less than an Hour, deserves to be removed. Though with Immersive Applications like Games, the Device Resource Usage is inevitable, make sure to keep an optimum balance between Application Usage and Battery Life.

Summary

Highlights of Day 3, 4 (29 Feb, 1 Mar) – MWC 2012

Facebook and Mobile Web – It is already known, but in MWC 2012 Brett Taylor, the CTO of Facebook confirmed that Facebook will continue to focus on Mobile Web initiatives going forward

Intel getting more into Mobile – Intel exposed its interest to get deeper into Mobile, with a string of new partnerships on the Mobile Devices area

Operators looking for sub-$50 Smartphones – Airtel (India) and Telefonica (Latin America) have called for Mobile Manufacturers to cut down the Smartphone costs to sub-$50 for great Mobile Data usage.  Also this can bring in the popular concept of “Operator-tied Low Cost phones as in USA to these markets

CEOs of Nokia, HTC, Foursquare discuss Windows – The growth prospects and the future of Windows as a Smartphone Operating System is the core of the discussion between the CEOs of these companies

Nokia’s Stephen Elop talks about the Company Strategy – Nokia is approaching the market with the three-tiered approach of Local Awareness, Location Services and Monetizing the Ecosystem

Nokia’s Pureview 808 (the Symbian Phone) wins “Best in Show” Award – The non-Android phone (!) with an amazing 41-pixel camera won the Best in Show award

After Eluga, it is Eluga Power from Panasonic – Panasonic unveiled the second smartphone offering, Eluga Power powered by Android

Acer Liquid Glow unveiled – After CloudMobile, Acer unveiled Liquid Glow with 1 GHz Snapdragon Processor, that will be powered by a customized Android version

 Novero’s Solana unveils Netbook running Windows 7 and Android – $800 Netbook that can run on Windows 7 and Android has been introduced

Polaroid’s Pro Smartphone - The photographic company has introduced the Polaroid Pro Series of Smartphones powered by Android, featuring an HD Camera

News Source:

• Engadget
• Mobile World Live

Highlights of Day 1,2 (27,28 Feb) – MWC 2012

Panasonic introduces Eluga Power – The Japanese Company showcased the prototype of the Eluga Power, which boasts of a 5-Inch Display and loaded with Ice Cream Sandwich

LG demonstrates LTE Voice-to-Video call switching – What if you are in the middle of a voice call and suddenly decide to fire up the Video calling application to chat face-to-face?  LG demonstrates the instant swapping from voice-to-video calls

The Awesome Galaxy Note 10.1 – This device is tablet personified.  Boasting of a 10.1 inch display and with an S-Pen that can do wonders with the supporting apps, this device is a dream of many tablet lovers

HTC One S (T-Mobile) – HTC is not far behind with its One S offering.  At a first glance, this appears to be an awesome device packed with a slew of Specs that will make you wonder and fall in love

Samsung Galaxy Beam, the Projector Phone – This is another one of Samsung’s Android offering, that can be used as a Projector.  Looks to be a neat little device

Nokia Lumia 900, revamped – Nokia has spruced up the colors and the aesthetics of the Lumia 900 device.  Looks lovely, but there are no other great improvements on this device

Nokia announces Nokia Reading – This app promises to be a Hub for all written content like News, Feeds, e-Books and also Audio Books and presented to the users in a consolidated format, that is also available offline

Sony debuts Xperia U - 3.5 Inch phone with Reality Display (?), 1 GHz Processor and 5 MP Camera, running on Gingerbread.  This might retire Xperia S from the market.  But does this phone have enough?

HTC One X (Endeavour) announced – This one’s a monster, when it comes to Specs.  Unibody device, 1280×720 Super LCD 2 display, NVIDIA Tegra 3 quad-core processor, 1GB DDR2 and 32GB of built-in storage (and an additional 25GB free for two years through DropBox), quad-band GSM and quad-band 42Mbps HSPA+, 8MP f/2.0 camera, LED flash with support for 5 levels of automatic brightness control and a front facing 1.3 megapixel.  Awesomeness!

Paypal, eBay, Opera all are on Mobile Payments – eBay is bundling the Auction App with Android phones in UK, Paypal rolling out new payment system to Home Depot, Opera launches Opera Payment Exchange (OPX) to make secure online payments from Smartphones

Acer CloudMobile – Acer’s offering on the Android space, a phone that is to be tightly integrated with Acer’s Cloud Offering

Samsung Galaxy S Blaze 4G – It is a hybrid of Samsung Galaxy S Series phones with that of S II.  Featuring the same processor as S II and at a lower price point, this device is promoted by T-Mobile as a lower end complement to S II

Updates from the Nokia Press Conference

• Lumia Devices are in 31 Markets so far
• In Russia, the Lumia 800 is the number one phone in the high-end market
• WP: 3 times more than this time last year, and 250 percent growth on series 40 downloads
• 3 New Asha phones introduced - Asha 202, 203, and 302
• Lumia 900 will expand beyond the US, with HSPA+ (42 Mbps)
• Lumia 900 will use Carl-Zeiss camera, but will also introduce a Front Facing Camera
• Nokia Reading introduced – Hub to consolidate all your reading content
• Beta of Skype for Windows Phones available
• Lumia phones will be introduced in China with CDMA and WCDMA capabilities
• Lumia 610 announced – an affordable version proclaimed by Nokia
• Lumia 900 will be available in White, cost 480 EUR and ship in Q2
• Already Billion updates to Belle (Symbian), in just 3 Weeks
• Nokia 808 Pureview – the New Symbian Phone
• Pureview features a high-res 41MP Carl Zeiss sensor with high performance optics (wow!!!)
• Also in Pureview - Image stabilization, improved low-light performance, and insane digital zoom capabilities
• Pureview: Dolby Digital Plus for 5.1 channel surround sound
• Windows Phone Marketplace has now exceeded 65,000 apps
• Nokia promises to continue shipping Symbian phones, but no details!

What is Flyte?

Flyte is Flipkart’s Online Music Store, where you can buy legitimate music for an affordable cost. Flipkart boasts of a huge collection of Music across all Indian Languages. Further, the Store also features International Music across various Languages.

One has an option to buy Individual Music MP3 Files or Albums. All MP3 files are DRM-Free, which means you have no restrictions in the usage of MP3 Files you download.

You can visit the FAQ section of Flyte, to know more relevant details - http://www.flipkart.com/s/mp3help

Streaming? Mobile Player?

I am sure these are on the cards. But you can’t do the following right now with Flyte:

• Stream Music Online from the Flyte Application (think Spotify). Flyte Application only acts as a Download Manager for your Music
• There are no Mobile Clients currently available to download Music directly on to the Mobile Devices. MP3 must be downloaded on the Computer, before transferring to the devices

Overall…

I am extremely glad that Flipkart is taking the next step, towards their vision to become the “Amazon of India” in e-Commerce and Online Shopping.

So what next – “Kindle for India”?

In an age where Cloud Storage and Content Sharing is norm of any day (I don’t have a day when I don’t use my Dropbox), it is totally insane to bring down a File Storage Site and trouble a lot of legitimate users who have been using the site for File storage purposes.  Here are some reactions from these users, as reported by CNN:

• “Megaupload was closed by the FBI … was I the only ones who had it for work files?” Twitter user Nina Andrade wrote
• Seng Ung of Boston said he recently paid roughly $260 for a lifetime membership so he could store old files from childhood and college. He didn’t lose them, but now he’s gotten nothing in return for his payment, he said.
• Developers of open-source Linux and Homebrew software said they used it to upload projects they were working on together.

Shutting down a Service is not a solution to Stop Online Piracy.  I can just go online and get hold of any Pirated Content from thousands of Websites around the Internet.   Also blocking Channels of Piracy takes a toll on millions, who use the same Channels for Legitimate usage.

The Best Way to Reduce Piracy is to:

• Put check on the Content and not on the Channels
• Clean up the Content, with Support from the Infested Internet Companies
• Stop over-reacting and accept that a certain degree of Piracy is “expected” and cannot be eradicated

If such acts of Shutting down Cloud Storage Sites continue, anyone would start thinking twice about using Amazon Cloud Storage or Dropbox (at least I would).  Punish the Conspirators, Not the Internet Users who pay Money for their Service!

Photo Credit: Flickr and Sam Howzit

However, Mobile UX is extremely underestimated and overlooked when Desktop Web Applications are transformed into Mobile Web Applications.  Essentially, Mobile UX can be categorized in the 3 major groups:

• Navigation
• Content Architecture
• Data Input

In my subsequent posts during the week, let’s discuss in detail on each of these categories to provide a much better Mobile UX!

CSS float

‘float’ CSS Property on an element on a Web Page, is used to position that element in relation to the other elements that are preceding or following the specified element.  It works only on relatively positioned elements (which mean the ‘float’ Property is ignored on elements with ‘position:absolute’)

float Property can take 4 values:

• left – Element floats to the left and the elements following this will be positioned next to this element on the right side
• right – Element floats to the right and the elements preceding this will be positioned next to this element on the left side
• none – No float.  Element stays where it is, depending on the sequence in which it appears
• inherit – Element inherits the floating behavior from its Parent Element

Examples

CSS float:left

CSS float:right

CSS float:none

When to Use?

When you have relatively positioned elements on your Web Page and you want to Position them to the Left or Right of the Browser Canvas. Note, this positioning works well irrespective of the Browser Canvas Dimensions, as the elements are relatively positioned.