Boutique Hotel in Orchard Road – Lloyd’s Inn

It’s been a while since my last post, and I just wanted to share a project my company helped developed recently. The project is for a boutique hotel situated right in the heart of the shopping district in Singapore – Lloyd’s Inn.

Working with FARM who re-designed not just the website but the entire revamp of the hotel, we really enjoyed working closely with the client to develop a site that is responsive and which fits the hotel’s new branding.

Lloyd’s Inn’s rooms are all newly refurnished and prices start as low as $158!

Do check them out on Lloydinn.com!

Roundup: Invoice Management Web App

I’ve been on the look out for an invoice management system recently and thought I’ll do a short round up with summarised pros and cons for each one. I’ve yet to decide which one to go with so I will post a followup review with my final choice.

Here’s a list of the things I am looking for.

  • Estimate Generation
  • Invoice Generation
  • Reporting/Overview
  • Changing various currencies while editing and creating estimates/invoices.
  • Cheap and affordable.
  • Only require 1 user.
  • Does not require time tracking.
  • Track payments

Pancake V3

  • Pros
    • 1 time fee
    • Estimates/Invoice/Client Management
    • Dashboard to show owed and earned.
    • Generates PDF
    • Custom Logo
    • Custom Frontend CSS
    • Has payment plan and ability to mark as paid (but not ideal)
    • Owner is active on Twitter! Seems really keen to build a good product.
    • V4 is coming and it promises to be good.
  • Cons
    • Confusing user interface (Personal opinion)
    • Generated invoice don’t look great. (Personal opinion again.)
    • No mobile app.

BallPark

  • Pros
    • Looks and works awesome.
    • Mobile App available.
    • Custom Logo
    • Estimates/Invoice/Client Management
    • Change Currency in edit/creation mode.
    • Ability to add discount.
    • Referral Discount
    • Generates PDF
  • Cons
    • Monthly Fee (from US$13/month)
    • No custom template for invoice.

Invoice Machine

Have to stop review of this midway due to service disruption.

  • Pros
    • Generates PDF
    • Estimates/Invoice/Client Management
  • Cons
    • At the time of writing, the service is down (9 June 2013)
    • No mobile app

PayDirt

  • Pros
    • Works and looks awesome.
    • Welcome tour brings you through all the features
    • Overview for Estimates and Invoices
    • Generates PDF
    • Custom Logo
  • Cons
    • Cannot change currency while creating/editting estimate/invoice.
    • Cannot customise invoice ID.
    • Monthly Fee ($8/month but 3 clients limit, $16/month for unlimited)

If you look at the breakdown, I’m actually shortlisted Pancake and Ballpark.

A year’s worth of Ballpark will be about $156 while Pancake if upgraded to V4 will set me back about $108.

I enjoy the UI and UX of Ballpark much more than Pancake, but Pancake v4 promises to fix the problems I have with V3. It’s one time fee is also really attractive compared to Ballpark’s monthly pricing.

Note: The list is a short one as I have pre-shortlisted them. Notable exclusions include Freshbooks as I do not like their UI.

Online Shopping from Singapore

A friend of mine recently asked me if there’s an Amazon equivalent in Singapore. My answer was no, but… there are many sites that offer goods online, just not one single site that offers the range that Amazon offers.

This handy list of sites is a list that I’ve collected over the past couple of years. Many of them are new, and I sure hope they are here to stay.

Books
OpenTrolley.com.sg
BookDepository.com (Free Shipping Worldwide)

Fashion
Zalora.sg (Also have hair care products)
Asos.com (Free Shipping Worldwide)
Adidas
Roxy | DC Shoes

Cosmetics / Personal Grooming
Bestbuy World

Grocery
Redmart.com
Cold Storage Online
Isetan Online

Electronics/Furniture
ValueBasket
Courts (Everything here is overpriced though)
Apple (They carry Fitbit products in case you don’t know)

Gaming
Qisahn

Hire helpers for small tasks
FlagAHero

Deals
Groupon Singapore
All Deals Asia

Global
Amazon Global (Free Shipping above US$125, not all items available)

Food
The Smart Local has a comprehensive list.
Food Panda (A lot of items are overpriced.)
I wish Seamless will enter the Singapore market!

I’m sure there are more out there that I’ve missed. Feel free to post in the comments if you have more to add!

Back again

Hello people! I’m back!

It’s been over a year since I posted an update, life’s been treating me well and I’ve been really busy. I had some time today so I thought I will write a quick post today.

Blogging Again
I’m thinking of blogging again regularly. No fixed genre or kinds of posts, but just anything that comes to mind. Do follow me on Twitter if you want more regular updates to cool stuff though.

What’s been up
Last year, I joined Firstborn on a paid internship. I was there for 5 months before I returned to Singapore because of personal reasons. Working in firstborn was a dream come true, and I made some amazing friends there as well as improved a lot of my skills there.

Since I returned, I set up a small digital agency – Garage Interactive – aiming to do cool stuff in Singapore. It’s been going well so far, I’ve had the opportunity to work with firstborn again and BETC Digital from France. Also working with Foreign Policy Design – a kickass branding agency in Singapore.

Tech/Geek stuff
I got my hands on the 2 latest and coolest technology innovations recently.

Firstly, the Leap Motion Controller, which I have created 2 bookmarklets for. Check it out here and here.

Secondly, it’s the mind-blowing, jaw dropping, totally awesome Oculus VR. Here’s a picture of me wearing it.  

oculus

I’m still wondering what I can do with it since I don’t know Unity yet, but I’ll make it a point to pick it up soon. 

Judging
2013 has been kind to me. I’m one of the judges on the international website – Awwwards.com, as well as part of the jury for the Webby Award. I’m next judging some student work on a regional award show – the Crowbar Awards.

That’s basically almost everything I can share. The rest of the year is looking good, and if you are in need of a website or a Facebook app or tab being built. Do give me a shout here.

Ciao!

 

 

Essential reading for mobile web developers

David Calhoun’s Mobile Web Series:
http://davidbcalhoun.com/2010/viewport-metatag

QuirksMode Mobile
http://www.quirksmode.org/mobile/
http://quirksmode.org/m/table.html

Tap vs Click
http://digitalize.ca/2010/02/jqtouch-tap-vs-click/

Media Queries and images
http://timkadlec.com/2012/04/media-query-asset-downloading-results/

Respond.js
https://github.com/scottjehl/Respond

Some of my personal tests

iOS:

  • screen.width/height always gives portrait sizes.
  • window.innerHeight is accurate but gives the viewport minus address bar and toolbar.
  • window.innerHeight works very well in landscape orientation. does not include address bar.
  • supports window.orientation: 0, 90, -90
  • position: fixed works like position: absolute.

iOS5:

  • position: fixed works as it should.

Android 2.3:

  • all width and height calculations are dependent on html element size.
  • screen.height works as it should – giving correct height in different orientations, but gives it without the address bar.
  • supports window.orientation: 0, 90, -90
  • position: fixed works like position: absolute.

Windows Phone 7 IE:

  • window.orientation and “orientationchange” event is not supported.
  • ‘ontouchstart’,’ontouchmove’,’ontouchend’ is not supported, but ‘onmousedown’ etc is.
  • http://stackoverflow.com/questions/8919477/trouble-with-vmouse-events-wp7-jquerymobile
  • position:fixed works like position: absolute.
  • hard to test for navigator.appVersion since windows phones have different strings. (see: http://www.zytrax.com/tech/web/mobile_ids.html)
    use: ((/wp7/gi).test(navigator.appVersion) || (/windows phone/gi).test(navigator.appVersion)) to test

Mobile Web Development

There’ve been a lot of talk about mobile web development, and since I’ve been doing mobile web recently, I thought it would be useful if I can post some findings here.

Firstly, mobile web is not iPhone or iPad only. In fact, a fair share of smartphone users are non-iOS users. However, catering to every mobile phone in the world is impossible too, not without major design sacrifices.

Think about this, for iOS devices alone, you’ve got to cater to the retina display, and the device orientation changes. Not to mention the various iOS versions that support different features.

Simply put, no matter what you do, one design/code will not fit them all.

These findings are purely of my own opinion though, and many would probably disagree with me, but I find that perhaps, we should really spend our time and effort on smartphone users. Not just any smartphone users though, specifically – any device with at least 320 pixels in width in the portrait orientation.

So, having said all that, here are some quick findings:

  • On iOS devices, there’s a bug that scales the device view when the orientation changes, make sure you apply this handy fix to all your mobile web pages to avoid that.
  • Make sure you insert your meta tags.
    meta name="viewport" content="width=device-width, initial-scale=1.0"
  • Remove the Safari address bar with this line of code:
    meta name="apple-mobile-web-app-capable" content="yes"
    You might also need this piece of Javascript to make sure the page does scroll up.

    window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
    // Hide the address bar!
    window.scrollTo(0, 1);
    }, 0);
    })
  • Use CSS Media Queries to cater to orientation changes.
    @media only screen and (orientation: landscape) { //insert css here }
  • Use responsive images. If you’re using css background-images, use this line of code to make sure the background-image scales.
    background-image: url('img/image.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
  • Always minify your js and css to decrease file sizes.
  • Test in as many devices as you can. At least have a Mac installed with the iOS Simulator that can go back and forth between various iOS versions.
  • Lastly, optimize your images. If you can, load the retina-images only if the user is using a retina-display.

That’s all I have for now, I’ll update with more findings if possible. Please leave a comment if you have something to change or a better way to do something.

PhotoHackDay 2012

So I went to Photohackday.org yesterday and I was too hungover to go today to look at the results but here’re some interesting APIs that I saw there and also my work in 3-4 hours. :D

Flashfoto API
http://www.flashfotoapi.com/docs/methods
- This allows you to remove a background from a person!

PixlinQ
http://www.pixlinq.com/docs/api/searchimage
- Image Recognition

The whole list here:
http://www.photohackday.org/apis-hackideas.html

My “hack”
http://www.designfission.com/flickr_aviary/

My experiment hack
http://www.designfission.com/pinterestyourfacebook

These are the other hacks, some really good ones here:
https://docs.google.com/spreadsheet/ccc?key=0AsPwkTSCTBe0dHkwUUU0blFaZzBjQUMxaXhPSWVBQVE#gid=0

iOS Web Page Viewable Screen Area Cheatsheet

Just created a cheatsheet which states what are the dimensions of viewable screen areas for websites on iOS devices.

I’m not being biased by only including iOS devices, but Android screens are so fragmented that creating a cheatsheet would be a lot of work.

On top of that, I’ve realised that most people only care about iOS devices despite the fact that many smartphone owners are Android users. But that is another argument for another day.

Here’s the link to the PSD, and a screenshot of what it is about.

Download PSD