Issue 10 of Web Design Readings – IndexedDB, Hybrid app, Desktop-last design

Hi there,

Wish you had a merry Christmas and happy new year.

This week, I share links and thoughts on IndexedDB, desktop-last approach and hybrid mobile app development with web technology.

IndexedDB

There are different kinds of web client storage. LocalStorge, WebSQL and IndexedDB are the most common ones.

Recently, Safari supports IndexedDB. If you’re planning to use IndexedDB in your next project, you may want to check out a library called Dexie. It provides a simple API to work with the local IndexedDB database. For example, the following code queries the friends table with condition and executes the callback logic for each result.

db.friends   .where('age')   .above(75)   .each(function(friend){     console.log(friend.name);   }); 

(Code credit from the Dexie website.)

Note. Beware that there is a bug in the current IndexedDB implementation in Safari.

New features for new browsers, basic content for old browsers

We have talked a lot on the latest CSS and HTML features in the past issues. Just keep in mind that we don’t need to provide every browser the same experience. The content shall be accessible via all browsers, but the experience is not.

Remember this: Do websites need to look exactly the same in every browser? NO.

Mobile first, Desktop last

Zell Liew shared an approach on “How To Write Mobile-first CSS” which encourages us to “uses min-width media queries.”

In my mobile web design course, I shared the same approach. The mindset is different when using the min-width instead of max-width in the media query. If you truly want the mobile-first approach, please write the default CSS styles for mobile and use min-width for styles that works on wider screen. Your styles apple to small screen by default, when there are more spaces on desktop monitor, you change the style to adapt it.

Design with Nose

I found this nose designer who draws and creates design works with her nose pad. The nose pad is actually the apple trackpad but she operates it with her nose. Make user you check the timelapse video on how she creates the artwork mainly with the nose.

On hybrid development

At last, I share the posts from SvN about web+native hybrid app development approach.

I know both web design and iOS development well. I have been trying to merge these 2 technologies together when I’m building a product. The Basecamp app always shows a very good use on merging web and native code into an app. You can hardly tell which part is web view and which part is native code from a consumer perspective.

Back to 2013, Basecamp announced their iPhone app with the hybrid approach. Their another post, “Hybrid : How we took Basecamp multi-platform with a tiny team” shares how it works behind the scene.

“The page stacking behavior and navigation menus are native, while the rest of the screens are web views.”

In the post “Hybrid sweet spot: Native navigation, web content”, they conclude what they have learnt on mixing native and web components to building Basecamp app.

“But whatever the reason, I think every software shop today should take another look at the hybrid approach.”

The following figure compares the mobile web app on safari versus the iOS webview with native UINavigationController. Can you tell which part is web view and which part is native iOS components?

Basecamp web vs ios gif

If you are using Ruby on Rails 4.1+, there is a feature called Varients. By using this feature, you can render different layout templates for different devices based on the request’s user agent.

For other server side techniques, the same applies by checking the user agent and provides a different HTML output to fit the mobile app environment.

Best Regards,
Thomas Seng Hin Mak