Week 07

03-11-2015

Mockups and Mobile
CMS

Introduction

This week, you should be knee deep in Project Two. You should have a solid concept and your wireframes should be complete. We’ll be diving right into building your first content management system (a tiny one) on the tech side. On the design side, we’ll be pretty light, looking a little more into wireframes.

Interaction Design: Mockups and Mobile

Why mobile? It’s pretty obvious to technologists that mobile is the future of what we do. In 2010, more smartphones were sold than laptops, desktops and notebooks combined. There’s a great little book called “Mobile First” published by A Book Apart. I’d recommend you check it out. Here’s a small quote from pg 8:

Obviously, mobile is a big deal and it’s not a fad.

It’s important to note that people aren’t simply putting down laptops and switching to mobile devices. They’re actually changing they’re usage patterns. Read this, slightly dated, article on when folks are using their smartphones:

http://blog.compete.com/2010/03/12/smartphone-owners-a-ready-and-willing-audience/

There are two ways of dealing with mobile devices. One is to build device-specific apps and sell them through app stores (like Google Play and Apple’s iOS App Store). The other is to make our normal web pages work on mobile devices. Now, I won’t get into the future of the web and whether or not apps are going to replace the web (hint: I don’t think they will). BUT, with just some simple changes to how we approach designing websites so we embrace mobile devices, we can see huge improvements in user engagement. Here’s a great summary of some up-to-the-minute happenings around the web when it comes to designing sites to work well on mobile to tablets to laptops to desktops (called “Responsive Web”):

http://www.lukew.com/ff/entry.asp?1691

In the coming weeks, we’ll recap responsive web (in case you hadn’t been exposed to it in IMS257 yet). For now, however, there are some simple things you need to know.

First, while Android represents a larger population of smartphones, iPhones represent a more engaged user base. Analysis of usage on both clearly shows that many Android users use their phones as “dump phones” with nice screens. While I am an Apple fanboy, I don’t mean this to disparage Android devices. Many are great. However, it’s pretty clear that, at least for now, iPhone users use their smartphones for browsing more. So, designing first for iPhone is probably a smart idea.

Second, while there is a growing ecosystem of tablet devices, it’s also pretty clear that the iPad is really the only tablet we need to worry about (for now). Why? Because most of the installed tablet user base is iPad and non-iPad tablets aren’t quickly catching up.

So, that means we’re good to go if we primarily design with the iPhone and iPad in mind. Usage of the iPad from landscape to portrait mode varies, but most folks browse their iPhones vertically (in portrait mode). Until recentlyy, the width of iPhones over the past few generations has remained unchanged (the newest ones are taller, but not wider), that means we can design for the width of an iPhone fairly confidently. Unlike iPhone, the iPad product line is a bit more fragmented (first two generations of iPads were lower resolution and Apple recently introduced the iPad Mini). The good news is that folks have already done most of the work for us when it comes to getting some nice templates to start from. Artie's favorite templates to start building mockups with are available here:

http://www.teehanlax.com/downloads/

Once you have your hands on those templates, choose if you want to focus on your Project Two concept for smartphones or tablets (either is fine) and get to work crafting your mockups.

Project Two - Phase Two: Mockups

Use the provided templates to create a series of mockups. It should be noted, that typography, color and layout should be fully fleshed out at this stage. Be sure to review the Project Two problem statement. Let me know if you have any questions.

Project Two: The Problem

Mobile devices (smartphones and tablets) have surpassed traditional computing sales. Not only are they more common, they’re also intensely more personal. They’re computers you carry everywhere. The really are personal computers.

This project will leverage the highly personal nature of these devices and create a website that will know where the user is and present highly personalized information relevant to the user based on their location. Without care, this would disrupt the “normalcy field”, but careful consideration of the user experience and the user interface will help users be more comfortable with the tool.

Examples include a diary/journaling web-based app that keeps track of the geolocation of entries, a score keeping app used to log real time results from games, etc.

Project Two: The Process

You have already developed a concept/The Big Idea and wireframes.

Next, you will begin technical development and mockups of the tool. You will receive instructor feedback and iterate based on that feedback.

Ultimately, you will implement (in HTML, CSS, JavaScript, PHP and MySQL) your solutions. These solutions should be specifically designed for mobile devices. The solution must use a device-specific API (such as geolocation) or a service-based API (such as Yelp).

The solution must leverage the use of a light-weight content management system (CMS) for backend administration. NOTE: this means that there could be two different aspects of the site. First, there would be a backend administration aspect that allows “editors” to post information. This would not be optimized for mobile. Second, there would be the customer-facing aspect where those posts would be displayed.

Project Two: The Schedule

Development

This week, we’ll build the foundation for a light-weight content management system. Note: Artie encountered some technical problems with the videos this week, so the first video ends rather abruptly. I (Kirk) also added a "PHP with Kirk" video following Artie's 4 videos. The PHP with Kirk video walks you through the CMS project but done as Kirk would do it. Some things in the PHP with Kirk video will look a little different than Artie's because it was done more recently. For example, tinymce looks and operates a little bit different. I also show you how I recall the same page to do inserts (etc.) instead of using redirects; one way isn't really better than the other, they're just different.

CMS a (watch this video)
CMS b (watch this video)
CMS c (watch this video)
CMS d (watch this video)

Using the techniques discussed in the CMS videos, you should build your own lightweight CMS. At the very least, it should support users posting titles, rich text for copy and images.

You've asked for it, here it is, PHP with Kirk. I work a little different than Artie does. Here is some bonus material to see how another programmer writes code. Enjoy.

PHP with Kirk (watch this video)

Assignment

:-)