Saturday, 5 October 2013

10 free mobile app testing framework

Mobile apps, while popular, presents a particularly tricky situation in terms of bug fixes. On the web, you can easily remedy any bugs withi... thumbnail 1 summary

07:11

Mobile apps, while popular, presents a particularly tricky situation in terms of bug fixes. On the web, you can easily remedy any bugs within hours. Not so for mobile apps. A bug fix might need at least 2 weeks before finding its way into the actual app itself. This will not only frustrate users who have experienced the bugs but they might even cost the company some potential revenue. Hence, mobile app testing framework becomes very important tools for mobile development. Fortunately, there is a growing number of such testing tools for us to make sure our mobile apps works perfectly before launched.

Mobile app testing framework can be separated into 2 main categories. One group, called Unit testing, is for testing individual elements within an app. The other group, known as functional testing framework, is meant to test the app at the UI level, which means it is testing almost the whole app usage performance.

Functional testing frameworks

#1: KIF for iOS

KIF stands for Keep It Functional and comes from the Square. It is a mobile app testing framework for the iOS only. All the tests are written in objective C so that makes it much easier for Apple app developer to work on it. Recommended if you are looking for a iOS app testing tool.

#2: Fliptest – a mobile app A/B testing framework for iOS

Doing A/B testing on mobile apps is notoriously difficult. A new startup is working on solving this problem by providing a testing framework to let you decide which UI works the best.

#3: Appium for iOS and Android

Appium is a fairly new mobile app testing framework but I liked their approach. Specifically, they believe that “testing native apps shouldn’t require including an SDK or recompiling your app. And that you should be able to use your preferred test practices, frameworks, and tool”. Whether this can be in reality, I love what they are trying to accomplish.

#4: Frank for iOS

Another iOS app testing framework is Frank. It uses Cucumber as the navie language to write your testing perimeters. The best thing about Frank is that it can record your tests so you can review them later as a team.

#5: Robotium for Android

Robotium is an adaption of the popular Selenium framework for the android platform. It is one of the few that does Android exclusively so it is quite popular among Android developers.

#6: Calabash for iOS and Android

Calabash support cross platform mobile app testing and can be used for both Android and iOS apps. From testing screenshots, gestures to actual functional code, Calabash can be used with the Cucumber language.

#7: Gitorious for iOS

Gitorious uses the automation tool Sikuli as the base of this framework and lays on screenshots and python scripts for developers to do their testing. It makes using Sikuli much easier and more effective. A pity it is only for iOS.

Unit testing framework

The most common unit testing frameworks are the solutions provided by the platform owners. OCUnit and Junit, for the iOS and Android platforms respectively. I will not discuss them here as most of the mobile developers should be familar with these 2 testing tools.

8 wordpress theme for government and politicians

Here are 8 wordpress themes for government and politicians. I used to really hate visiting government websites because they are slow and ugl... thumbnail 1 summary

06:58

Here are 8 wordpress themes for government and politicians. I used to really hate visiting government websites because they are slow and ugly to look at. Fortunately, times have changed and I am seeing more and more government adopting the latest in web design and aesthetics.

A case in point is using wordpress as the CMS to based the whole government site on. As a result of this new demand, there are some theme developers who have started developing wordpress themes for governments and politicians. Below are some of the best looking wordpress themes that you can purchase if you are working on a government website.

City government wordpress theme

One of the best looking theme in themeforest, the city government wordpres theme contains many useful functions that are relevant to a city government. For example, there is a event management for hosting government events as well as a city map module to show the important aspects of a city.

Political responsive wordpress theme

As the name implies, this government wordpress theme is fully responsive with a strong typography design to make reading easier. There is a lot of customization options for those who want to make the government websites a bit more unique.

Politic buddypress theme for government

One of the rare government wordpress theme that comes with a multi user function. Using the buddypress framework, the theme allow anyone to register on an account on the site and interact with others. In other words, it allows you to create a mini social network among voters who support a particular candidate or government.

Candidate wordpress theme for politicians

Candidate can be used for votes gathering or marshaling a grassroot movement. The only downside is that the theme does not have a responsive design, thus means it might not present well on mobile devices.

Campaign – A political wordpress theme

Campaign is built to drive results during elections. It has an in built email opt in function that allows you to capture emails of potential voters and let you drive more successfully email campaigns.

Cause – A beautiful non profit wordpress theme for government

Cause is a multi functional website that can be used to serve many different purposes, including a being used as a city government website.

Political wordpress theme

The Political wordpress theme include all the function you need to run for office. Featuring a new section for your latest announcements as well as a social element to engage your voters, this theme will work great for any city government candidate.

Transparent wordpress theme for city government

I mentioned this theme before in my round up article of transparent wordpress themes. It is a nice free wordpress theme for politicians and/or governments and carries a nice transparent background.

10 HTML5 text editors for web developers and designers

Text editors are the essential tools for web developers. In fact, it is also not uncommon for designers to know a bit of code editing as we... thumbnail 1 summary

06:56

Text editors are the essential tools for web developers. In fact, it is also not uncommon for designers to know a bit of code editing as well include HTML, CSS etc. The past text editors used to be downloadable versions where we need to install. This makes them limiting as revisions are slow to come by. With HTML5 technology, we are seeing a current new batch of HTML5 text editors that are completely written for the web. The good thing is that version changes can be fast and the capabilities of these text editors can be extended via plugins or other extensions.

Below is a roundup of some of the best and free HTML5 text editors for designers and web developers.

#1: Brackets: Adobe’s opensource text editor

Brackets was launched last year by Adobe as an open source text editor whose capability can be extended via their bracket extensions. The entire editor was built on HTML, CSS etc which means it is very easy to work with for those who are familiar with these languages. Extensions can also be easily built based on these common web language.

#2: Popline

Popline is a pure HTML5 editor toolbar. It floats on the things that you want to edit so it is rather cool to use. Function wise, it does not have all the bells and whistle of traditional text editor but for designers, it is definitely sufficient.

#3: Bootstrap-wysiwyg

This is a simple but functional editor for bootstrap. The plugin turns any DIV into WYSIWYG rich-content editor. You can see how it looks from the screenshot above.

#4: Mercury editor

One of the most powerful HTML5 editor is the mercury editor. It has a full fledged editor with support for almost all web naive language including HTML, elements sybnax and even Javascript APIs. There is even a drag and drop function for all file uploading. Very cool.

#5: Aloha editor

The distinct feature of aloha editor is that it can be embedded within a CMS like wordpress. This makes page editing much faster, especially if you liked to play with your page formatting and layout.

#6: jResponse – A text editor for responsive web design

jResponse is an interesting text editor as it focuses on supporting responsive design within its framework. It is a bit rough right now as the program is still in beta but it is worth signing up and taking it for a test drive to see if it can improve our productivity when it comes to developing websites for mobile.

#7: WebMatrix3

I think most will be familiar WebMatrix3 from Microsoft. It is nice HTML5 web development tool and comes with a lot of cool features such as code completion for jQuery Mobile and supporting a range of language include ASP.NET, PHP and HTML5 templates.

#8: Webstorm

Webstorm is a cool editor that comes with loads of functions. People who have tried it will know what I am talking about. It supports a wide range of web language including HTML5. It also has a nice debugging interface that will make it faster for you to spot and repair all the bugs in your code.

#9: Raptor Editor

Raptor editor is one of the most beautiful html5 text editor that I have seen. Not only is it nice to look at, the editor itself is entirely modular in nature so that everything is extensible. It is literally a modern editor that is suited for both developers and designers.

#10: TopStyle 5

TopStyle 5 is a very modern html5 editor that has a nice preview function for you to see real time changes. This improves the productivity of your code writing quite significantly and is one of the feature I liked best.

9 inspirational cards ui design example

Cards UI is an emerging trend in web design. It is difficult to say what started it and how it came about. Some say it is due to the rise of... thumbnail 1 summary

06:55

Cards UI is an emerging trend in web design. It is difficult to say what started it and how it came about. Some say it is due to the rise of mobile browsing whereby a card UI makes more sense. Others say that this is due to personalization, whereby information pieces from different sources are pieced together in a card UI for users to customize their information intake. No matter what is the real driving force behind this trend, I am seeing more interest in this area as more big companies are adopting such a UI design into their products. In this roundup, we will see a handful of such companies that have used cards UI successfully.

#1: Google cards UI

Google elegantly used a card UI to create a dashboard for different google services so that you can get everything in a glance. One of the best thing about using a card UI is that it fits into the mobile displays very easily. You can see how the Google card UI for the web can be easily translated to the screen.

#2: Twitter card UI design

Twitter has also developed a card UI design for displaying a host of things including summary, photo card, player card etc. The image display above is an example of the summary card. You can see how easy it is to see a summarized version of the information using this approach.

#3: Pinterest card UI design

Pinterest has started with card UI and is one of the first few websites that uses this concept as the basis for the entire site. It has proven its success with many copycat style rising up to mimic its style.

#4: Trello card UI design

Trello is a company that helps you to organize anything. It uses a card UI design that is perfectly suited for such a task. Everything activity can be pinned to a card which can be easily on a mobile interface. You can see how it works light from the screenshot above. Very nicely done.

#5: Citia card UI design

Citia uses smart card UI to help clients tell their stories in modular chucks that are easily digestible. It is a smart application of the card UI design concept which I am sure will see lots of copycats soon.

#6: Amazon card UI design

Even Amazon has started using card UI design for its collection display. It basically looked Pinterest’s design but that shows you how powerful a card UI design is. Hence, expect this to become more of a trend next year and more folks choose to go for such a look on their website and mobile apps.

#7: Flipboard card UI example

Flipboard has been using a UI design that is very similar to card UI. It comprise block or cards that carry specific categories of content that is drawn from your social network.

#8: Work4labs job card UI design

This is an interesting application of the card UI concept. It is used to automatically summarize information about a job candidate and present it in a card UI that can be posted across different social networks. This design recognizes that this is how we consume information now so job information should be designed this to be in line with the change in our behavior.

#9: Contact form using card UI example

This example is from QuickUI to show how its contact form works. As you can see, it is a perfect case of how card UI can be used for managing or display the contact of a website.

16 cool single product ecommerce design examples

It might seems strange at first to want single product ecommerce design. However, if you consider new things like kickstarter, maker movemen... thumbnail 1 summary

06:44

It might seems strange at first to want single product ecommerce design. However, if you consider new things like kickstarter, maker movement, 3D printing etc which makes it much easier for anyone to create a new product, you will understand why there is a demand for single product ecommerce design. These guys don’t want to be an online retailer. They just want to sell their inventions, which is typically only a single product (different colors don’t count!). Similarly, some of the Etsy seller might only have one product to sell and they want to sell it on their own website, in addition to being listed on Etsy.

Hence, for the above folks, here are 16 designs for single product ecommerce design that you can draw reference and inspiration from.

#1: Versatiletrolley.co.uk

This ecommerce sells only their versatile trolley, which is a new kind of trolley invention. The focus of such design is usually on how different this product is from existing competitors.

#2: Mightymatcha.com

Another characteristic of a single product ecommerce design is to align the background to the image that the product wants to convey. It is difficult to do so for multiple products since they might have conflicting messaging. No such problem for a single product so a designer should take advantage of this to create a closer relationship between background and product, like what Mighty Matcha did.

#3: Catnaptree.com

Personalised messages for single product is very important. It allows the owner to tell their stories of how they want to make this product. As a designer, you need to make this story telling aspect of ecommerce design more prominently. You can see how this is done from the catnaptree example above.

#4:Hicural.con

Images images images. Since the owner is only selling one product, we need the image to be as clear as possible so that the benefits of the product can be conveyed instantly.

#5: Makefac.es – single page website for products

Apps and software are the most common single product ecommerce design. Most of them typically has only one software or app to sell, thus their selling efforts need to show the benefits of their product really well.

#6: Tricycleterror.com

This ecommerce design uses a nice retro style to showcase its vintage inspired toy. Very nicely done and very well suited for selling the product.

#7: Pomonastreet.co.uk

A very elegant design webpage. This is a single page website for product design that focuses on selling its vinegar. The minimalist style suits the beautiful packaging that this product carries.

#8: Samson-brewery.positivezero.co.uk

Selling only one product means you have more room to play with different layouts and navigation. This can lead to surprising results and innovative web design, as you can see from above.

#9: Julianabicycles.com

Full screen image is great for one product ecommerce design. It is eye catching and pushes the product to the visitor immediately.

#10: Moto.oakley.com

This is another full screen ecommerce theme design. The image used is powerful and leaves the visitor with a strong memory of the website.

#11: Sweetestevia.gr

Combining parallax scrolling with ecommerce design, this website from sweetestevia is a nice example of how both effects can be combined to form a different experience for the visitor.

#12: Dangelicoguitars.com

This one has almost everything. Parallax scrolling, responsive design and full screen sliders. If you take all the current 2013 website designing trend and put in one website, this is what you will get. Pretty cool overall design.

#13: Vool.me

A nice use of black background with clean lines. Such a design puts a strong focus on the product without no other distraction.

#14: Windsonic.com

This example brings together a lot of what I have discussed above. The background is perfectly alined with the single product and the full image is being put to good use.

#15: Muffin-manufaktur-berlin.de

Delicious looking, isn’t? Use your image wisely and your single product ecommerce design can have the same impact as the one above. Take note of the story telling part on the left hand side of the webpage.

#16: Unioncraftbrewing.com

This design uses a fixed header navigation to allow users move around the site regardless of how far they have scroll to the bottom. Very convenient and nicely designed.

You should have noticed by now a key difference between normal ecommerce website and single page websites for products. The former is designed to show you as many different things as possible so that one of them might caught your eye. In single product design, the webpage is focused on creating the desire for that one product. This is why you can’t use a generic ecommerce template for selling a single product.