A review of Themify’s Minshop theme

Minshop is a responsive WooCommerce theme from the good people at themify.me. In building out the eCommerce solution for The Men’s Fashion, Minshop has allowed us to jump start the front end thus saving weeks of design effort and allowed us team to deliver a working product in minimal time.

Responsive Layout

Minshop is an HTML5 WordPress theme with a responsive layout that optimizes the view for both desktop and mobile audiences. You can test out the response layout for yourself by resizing your browser window. The “mobile” view is accessible on your desktop if you re-size your browser to 480 pixels. The entire top navigation becomes a mouse/touch enabled menu that is easier to navigate in a mobile browser.

Layout and Design

Minshop offers a minimal interface but also allows you to choose from a variety of skins to help you get your store out the door as quickly as possible. The responsive theme looks great on both desktop and tablet/phone browsers out of the box.

Slider

The slider feature has been instrumental in showcasing new and featured products.

Social Sharing & Open Graph

Out of the box, the Minshop theme generates the OpenGraph tags that will control how your pages’ content are displayed when shared on Facebook, Pinterest, and any other OpenGraph enabled service.

Search engine optimization

Minshop implements the following Schema.org schemas

  • http://schema.org/Offer
  • http://schema.org/Product

Feature Wish list

There are a few additions I would love to see the Minshop team make on their great theme.

  • More HTML5 semantic markup
  • The ability to have the copy for the Shop page show to the left or right of a 2 or 3 column grid of products

iOS ‘native’ web apps with HTML5

I’ve been considering iOS development recently but I don’t have a Mac on which to develop. Alternatively, I have been looking into HTML5 ‘native’ web apps. These are web apps that look and feel like native iOS applications.

I am using my Batch Image Resize web app for my R&D on this topic.

Installation

The web app can be installed via Safari’s ‘Add to Home Page’ feature.

It looks like a native App

As per the Apple Developer Guide, adding the elements below will allow the site to act like a native app when access from your iOS device.

‘apple-touch-icon’ defines the image to use for the icon.

‘apple-touch-startup-image’ defines the splash screen image.

The ‘apple-mobile-web-app-capable’ meta tag allows the page opened via your home screen to behave like a native app. When I open the ‘app’, I see it in full screen browser with no address bar at the top or any of the menus at the bottom.

<link rel="apple-touch-icon" href="/path/to/custom-icon.png"></link>
<link rel="apple-touch-icon-precompsed" href="/path/to/custom-icon.png"></link>
<link rel="apple-touch-startup-image" href="/path/to/startup-image.png"></link>
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Full Screen --></meta>

Reference

https://labs.ericsson.com/developer-community/blog/beyond-html5-audio-capture-web-browsers
http://developer.apple.com/library/safari/#documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Introduction/Introduction.html

HTML5

I want to stay ahead of the curve when it comes to HTML5 and everything it has to offer so I’m using this blog entry to chronicle my research and any cool tools I find around the interwebs.

I found this nice sandbox the other day http://rendera.heroku.com/. They have some nice example and am learning a lot from it.

W3Schools has a nice primer on HTML5. 

Some questions I have and would like to answer for myself are…

  1. What is the purpose of the <address> node? What do I gain from using it?
  2. How can I integrate HTML5 with ASP.NET Web Controls?

More questions to come.