Responsive Web Design.. Quick look

I was browsing through the liferay.com website. http://www.liferay.com/

When I resized the browser window, site adapts itself to the width of the window. When I mean adapts, when I resized the window to somewhere in the range of 400px width, the page actually looks like as it would appear in mobile. See below










So fundamentally the page would repaint itself by knowing the window resize event and apply the CSS dynamically. You would notice that menu looks different, banner image is hidden etc. This is commonly called RESPONSIVE WEB DESIGN. No round trip to server but still adapts to multiple viewport. Usually you may think of 3 templates - one for desktop, mobile and Tablet.

Sounds cool!!?

But I am not sure if this is route I would want to build website. While I agree that this approach allows us to make our website look better in smaller viewport and it may makes sense for site like this. But I don't think a user would resize the window in desktop to so small size and at the same time mobile device has an option to make it bigger.

If we are taking really serious about the mobile enabling a website, then we know that simple re-laying the site would not be sufficient for mobile experience. It needs a fresh thinking.

Mobile experience in one hand is usability but keeping it aside for a short time and other important one is speed. We want our website to be light in content so that it is fast on mobile. Mobile challenges are bandwidth, small viewport - so we want make most out of the small viewport and payload of the site should be low as well. I don't think RWD really would help us here. And getting RWD working is tough as well ;) - need to be pretty good at what you are doing.

So I am more comfortable building multiple themes and think creatively for mobile.

Happy programming!

Free online file converter

http://www.online-convert.com

Symlinks feature in windows

Symlinks feature in windows... I did not know how to do. I was trying to update iOS 5 and I had to back up my phone. I wanted to back up to my external hard disk. I wish I knew how to do symlink.

Then I found this tool, http://technet.microsoft.com/en-us/sysinternals/bb896768.aspx

Term is different.. it was called "junction" - not sure why it is called so. But steps are pretty simple..

1. Download the junction.zip from the site.
2. Extract to say "C:\Tools" folder
3. Move the back up folder from "C:\Users\[my name]\AppData\Roaming\Apple Computer\MobileSy
nc\Backup" to say "E:\iTunes"
4. Open command prompt and run below command
C:\Tools>junction.exe "C:\Users\[my name]\AppData\Roaming\Apple Computer\MobileSync\Backup" "E:\iTunes\Backup"


If you are getting error like below, may be you  still have "Backup" folder. Move to folder as per Step 3.
Error creating C:\Users\[my name]\AppData\Roaming\Apple Computer\MobileSync\Backup:
Cannot create a file when that file already exists.

Custom Fonts

Problem was to use Helvetica Font for the website. And Helvetica isn't available in Windows platform default. In order to do this, option that we took first was to buy font and include that as part of website. Below snippet would take care


@font-face
{
    font-family: my_font;
    src: url('/themes/mytheme/fonts/my_font.otf');
}

Read more here http://www.alistapart.com/articles/cssatten

Something that sounded so straight forward turned to be a big challenge industry has been facing.. "Licensing Web Fonts". Procuring License and at the same time not letting other misuse the fonts for piracy had been big challenge the Font companies have been facing.

@font-face - actually links the font from a location so that browser can refer. So it is possible for someone to easily download the file. Microsoft uses EOT (Embedded OpenType) to solve this so that download is restricted by domain but this approach works only on IE and others browsers have not adopted this approach. Moreover, most of the fonts would need extended license to use the fonts in web. Sometime you would need license to even use along with the service like SIFR, Cufon etc.

Then I stumbled upon concept called "Font Service". In this model, you subscribe the font service and different service provider allows us different way to consume this service and not bother about the license and piracy by us. As usual to make things complex, they will be bunch of people offering this service and making things tough to decide. But here are couple of articles that helped me
http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/
http://blog.students.ubc.ca/communications/2010/10/20/web-font-services/

Fonts.com with nominal could solve our problem though. (http://webfonts.fonts.com/en-us/videotutorial)

For Drupal developers - http://webfonts.fonts.com/Content/manuals/FDCWF-Drupal-Mod-user-guide.pdf

Eclipse | PHP tools disabled

Have you wondered why the sub items in "PHP Tools" context menu in Eclipse all of a sudden was disabled? I just did... but then realized that I switched the IDE perspective to Java sometime back and I forgot. All I had to do was to open "Php" perspective from "Window" menu. 

Chrome invading browsers | Chrome frames!

Google Chrome Frame is an open source plug-in that seamlessly brings Google Chrome's open web technologies and speedy JavaScript engine to Internet Explorer and Firefox as well.

This combined with Chrome Web Store can soon be very competitive platform... Google getting closer and closer to their concept of OS + Browser being platform and rest all being web... and HTML5... giving hints all to that same direction.

WinStone | Light weight servlet container

http://winstone.sourceforge.net/

Winstone is a small, fast and functional java servlet v2.4 container in a single 166kb jar file

Hudson/Jenkins uses in their jar... !

PhoneGap | Soon to extend cloud support!

Sounds very promising and eagerly waiting for official release!!

https://build.phonegap.com/

SEO Toolkit

http://www.microsoft.com/web/seo/

Can be handy!!!

Microsoft + Drupal

Hmm... interesting combination...

http://www.microsoft.com/web/drupal/