Sencha Touch 1.0 Mobile JavaScript Framework

Every once in a while, you get offered a project that makes you dance around the office; this is one of those projects.

Twelve Foot Guru is proud to announce that Sencha Touch 1.0 Mobile JavaScript Framework, a book by Bryan Johnson and John Clark will be published by Packt Publishing in late January 2012.

Working on the book has been a huge thrill for for us and a bit of a whirlwind ride. Writing a 260+ page book, while keeping up with clients and the daily adjustments of life in general can be a bit nerve racking, but the folks at Packt have been incredibly helpful and a pleasure to work with. We are really hoping to do it again soon (once we catch our breath).

We can’t wait to get our hands on an actual copy and we hope you want one too!

For the full details and order information, check the listing on the Packt Publishing website: Sencha Touch 1.0 Mobile JavaScript Framework

Update: Check out the article on the .net Magazine website: http://www.netmagazine.com/tutorials/styling-user-interface-sencha-touch-application

Collaboration Is Your Friend

One of the old saws in writing is to “write what you know.” As coders we often create projects in isolation, coding up our ideas and taking about 10 minutes to staple some sort of interface on top of it.  We don’t always write what we know.

Bringing in some outside help and perspective can take an average project and make it something really interesting. This weeks bit of interesting is courtesy of Aaron Karp, Web Ninja and part time Thermo Nuclear Super Rock Star.

Aaron dropped by the pink motel and pitched in on a mobile application project we have been working on. The application is strongly text based and my initial efforts at design where clashing horribly with Apple’s pretty glossy candy interface (see image 1).

image 1: My initial version. The text just kind of sits there doing nothing.

As you can see, my version is kind of boring. Without any images the text just sits there and looks dull and uninviting. The list looks very much like every other list in an iPad or iPhone.

This is where a good designer comes in. Aaron has a different perspective from me. He see’s fonts as a visual element rather than simply a text element. He also comes from a windows phone background which gives him a different sensibility when it comes to mobile applications. While Apple is pretty amazing when it comes to design and mobile products, I have to say that the new Windows 7 Mango phone interface is insanely pretty. It also has a strongly typography based aesthetic, which is what I was looking for on this project.

image 2: Aaron's first draft. We are still tweaking the designs and such but it's already so much better than what I had.

Aaron delivered in a huge way (see image 2).

His design is way more professional than anything I would have come up with. He also had some great feedback on the flow of the application. The text is artfully arranged and much more visually interesting. If we use a bit of transparency here and there, we can also do some really cool things with backgrounds. We are still hashing out some of the layout and functionality, but I really like where this is going.

Stay tuned for updates where we will actually talk about what this app does.

Candlewood Suites for Facebook

This was the first of a couple of Facebook projects we created from designs by the Blue Sky Agency. The project presented a number of interesting hurdles and we emerged with a much greater understanding of Facebook’s architecture, conventions and gotchas.

To begin with, you have a smaller area to work with than a standard web page. Facebook gives you about 500 pixels of width to work within. Additionally, if your content ends up longer than 800 pixels, a scroll bar gets added to your content (which hides about 10 pixels on the right side of the design). We were able to resolve the issue with a lot of research and a smidgen of javascript.

The second consideration was Facebook’s use of an old web technology called an iframe. For the uninitiated (i.e. those smart enough not to get suckered into programming), an iframe works by creating a “hole” in a web page. A second web page gets pulled into this “hole” by the iframe and gets display as if it’s just a single page. In this case, the information in the center is actual a separate webpage Facebook’s iframe pulls in for display. This trick has been around for a while, but web browsers tend to do it in different and often very aggravating ways (I’m looking at you Internet Explorer…) After a great deal of hair pulling, we managed to get all the browsers seeing things our way.

We also needed to create two versions of one page; one for a person who has “liked” Candlewood and hidden teaser page for people who have not yet “liked” Candlewood. This let’s them deliver cool deals to special customers and gather a network of friends for the company.

The last step was to tie it all together with a custom built Content Management System (CMS) that allows Candlewood’s Facebook admins to update the pages, add events to the calendar and preview their changes. The CMS is built with Sencha’s Ext4, PHP and mySQL. The CMS authenticates using each admin’s existing Facebook account login, allows for creating draft pages for later use, modifying the overall layout and it can be expanded to additional clients as needed.

The project taught us a ton of new things about Facebook and even gave us a few ideas for our own company Facebook page.

McPherson FuelZCard Website

Starting off with another wonderful design by the Blue Sky agency, the McPherson FuelZCard site was created using the WordPress CMS system.

The site uses a number of custom page types and a heavily customized admin panel for managing the various pages.

In this case, heavily customized means turning off a lot of the extraneous options available in WordPress. This greatly simplifies the maintenance of the website by the client and should be an essential design consideration of any WordPress installation.

Isn’t more always better?

As programmers (and as clients) we have this notion that being able to customize and configure to suit personal preference is the key to eternal happiness. Everyone is looking for something just a little different, so the more we can tweak and modify, the better. We all want the site to look a certain way and behave a certain way, don’t we?

It’s one of the main reasons we love using WordPress. With a nearly limitless ability to tweak, configure and augment, WordPress can be used in an amazing number of ways. Unfortunately for most WordPress users, WordPress developers tend to concentrate on the site design and leave the admin interface as-is. Most don’t even realize that, like the front end, the backend of WordPress can be customized as well.

Before you roll a site out to a client, think about what they really need. Think about what they are going to want to do every day as opposed to the pieces they will never touch or only use once.

A hundred options are really just ninety-nine places for the client to get lost while looking for the one thing they need to do.

Think of it this way, which of these do you think your customer will be happier using:

OR

Grady and Blue Sky

Twelve Foot Guru is pleased to have recently finished the new website for Grady Hospital here in Atlanta. The site was contracted to the Blue Sky Agency, who created a wonderful new design. Twelve Foot Guru was brought in to take the Photoshop design files and make them into a working website. In addition, we built a custom search tool with logging, geo-location and filtering to assist Grady’s users in finding the service they need.

This was a fun project and it was very well received by the client. The results speak for themselves:

  • Time on the site is up 150%
  • Search Usage is up
  • The new site has half the bounce rate of the previous site
  • Goggle Analytics is also tracking way ahead of the previous site

From The Client:

BLUE | SKY

“12 Ft Guru is one of the most pleasant and professional development partners I have ever had the good fortune of working with. They not only brought their extensive programing knowledge to the table, but also offered smart solutions during the planning stages as well on every venture. I look forward to many more opportunities in the future to work these guys.”

– Ryan Kellogg

Who Ya Gonna Call?

This entry is part of a series: You Get What You Pay For»

When To Call The Developer For Help

When most people build a website, they generally wait until something goes wrong before they call for help. This is especially true with WordPress. Given the ease of install and modification, non-technical users can make lots of changes and tweaks without a dedicated developer. However, when things go wrong, the easy facade falls away and you are left staring at PHP, CSS and HTML code. At this point you might understandably be asking yourself, “Just what have I gotten myself into… Maybe I should call someone.”

Unfortunately, once something has gone wrong, a developer has to unwind what the customer has done. This usually costs a lot of time and money, often as much as you would have been charged to have the developer build the site from the start.

This is because the developer is coming in blind, with now way of knowing what the customer did and why. Retracing these steps with the client can often feel like an interrogation for someone who is already embarrassed at breaking this WordPress thing everyone said was easy. It’s a painful, uncomfortable and expensive process that nobody likes, but what is the alternative?

You basically have three choices when you start a project:

  1. Do it all yourself.
  2. Hire the developer as a consultant.
  3. Hire the developer to do it all.

If you have been reading this series since the beginning, you have a pretty good idea of the pitfalls involving in doing it all yourself. Any time you spend working on a website is time you are not spending on your business. Price out what your time is worth to you and make the call. If all you have is time and no money it could be the only way to go. Be aware of the issues and patient with your progress. This is tricky stuff and you will not get it all overnight.

The second option is to use the developer as a consultant. You can do this by paying for an hour or two of a developers time to walk through your website needs with them. Build a plan together that you can accomplish and ask the necessary questions before you start your project. Plan for at least one more hour for later on when something goes boom. This will shorten some of the time you need to get rolling and give you a safety net when something goes wrong. There are, however, a few caveats to this route.

  1. Don’t expect free advice. The developer has already priced out what their time is worth to them. If it’s not worth that to you, find another developer. Don’t take it personally and ask for recommendations. Developers will often have people they farm smaller jobs out to.
  2. Take notes on what you are doing as you put the site together. This gives the developer a road map to follow if something goes boom. The will also help you ensure that you are following the correct directions you laid out with the developer in your first meeting.
  3. This is still going to take a lot of time on your part. If you are not paying the developer to build the site, you cannot expect them to be “on call” for you. Most developers will answer reasonable questions via email, but when it starts to get out of hand don’t be surprised if the developer wishes to be compensated for the time.

These 3 caveats will give you and the consulting developer a much smoother consulting relationship and help yield a successful project for both of you.

The final option is, of course, to pay the developer to build a website for you from the start. While this is the more expensive of your 3 options, you are paying for the experience level of the developer, the knowledge and skill they bring to the table. Developers enjoy this kind of thing and they can bring that joy to a website project. The developers goal is to build something they are proud of and that you want to show off to potential new customers. It’s how we stay in business and afford all of those video games that we love.

This is the win – win situation for both of us. Trust me on this.

An Unexpected Error Has Occurred… What now?

This entry is part of a series: You Get What You Pay For»

When Something Goes Boom

It is a given fact that at some point in your website building process, something will go boom. This happens to novice users and seasoned web developers alike. You are doing something enormously complex, despite what you may have heard from your local high school student.

You are taking code designed by dozens of different people and mixing it together into a working website. The people who wrote this code have no idea how your server is set up, what your comfort with technology is, or which pieces of code you may have mixed together. They have done their best to allow for every possibility they could think of, but at some point… it. will. go. boom.

So what do you do when you find yourself confronted with this:

Internal Server Error
The server encountered an internal error or misconfiguration and was unable to complete your request.
Please contact the server administrator, webmaster@yourdomain.com and inform them of the time the error occurred, and anything you might have done that may have caused the error.
More information about this error may be available in the server error log.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

This helpful little notification is the equivalent of “Oh noes! Something bad has happened! Call for help!” It provides little information and even less guidance on fixing the issue. It is also worth noting that, if you have chosen to go it alone, the “server administrator”  the error message is asking you to contact is you. This is usually the point at which myself or another developer will receive a phone call for help (it is also typically the worst time to call the developer, which we will talk more about later).

Most developers have had tremendous experience with stuff going boom. We experiment, tinker and fiddle the way most people breathe, and at one time or another, each and every one of us has brought a computer or server to a crashing halt, an inert mass requiring the complete re-installation of everything. We are also painfully aware that we can do it again at any time. However, beyond the initial swearing and fist shaking, we are different in the fact that this does not frighten or stop us.

Developers plan for the fact that things will go wrong. We have entire systems set up for backing things up, testing and moving between versions. If something goes boom, we can pretty much hit rewind and go back to the version that was working before while we fix the current problem. We build things in such a way that boom only stops us for a few minutes, while for most people, one good boom can lead to weeks of down time while trying to figure out the problem and sometimes it will just stop you completely out of shear frustration.

So how do you prevent this kind of frustration? Talk to a developer before the problem even starts. Next we will cover a few options for this in our series wrap up  which asks the question: When To Call A Developer For Help.

Out Of The Box And Beyond

This entry is part of a series: You Get What You Pay For»

WordPress Modifications

Say Hello To Frumpy...

Out of the box, WordPress is very, very basic and very, very drab…. frumpy actually. However, the ever flexible WordPress also allows you to use themes, which change your site from frumpy to professional looking with relative ease. The key word here is “relative.”

There are thousands of themes for WordPress, ranging from really bad to truly exceptional. Some themes are free and some cost money. WordPress keeps a list of 1,195 free themes linked from their website. Some of these are really good and some are not. You can, of course, look through these yourself and find which ones fit your needs, but a serious developer will be familiar not only with these themes, but with the hundreds of other sites which house prettier and more targeted themes. These themes will more easily address the goals of your particular site (shopping, news articles, customer relations, portfolios, etc.) Developers tend to maintain a list of useful goodies like this, so they can quickly pull it up it whenever a new kind of client appears.

Again, we look at these kinds of sites on a daily basis because we think it’s fun. We are just wired that way.

The WordPress Theme List

So the choice here is to look through several thousand themes yourself, or let us help you select from 5 to 10 good themes that meet your needs. We may even have a subscription to some of the pay sites, which means that we can get the theme for you as part of our existing subscription. This saves you money.

Now let’s suppose you have picked out a really good theme. Themes usually include a fake logo and some clip art pictures, but you will need your own logo and the clip art pictures are almost never licensed with the them itself. We typically help you work with a designer to create a logo if you need it and help you gather and edit your own photos for the site. Even if you don’t need any help with logos and photos, it is very unlikely that the theme will do everything you want straight out of the box.

This is where WordPress plugins come in to play. Plugins add features to your site, everything from shopping carts, event schedulers, contact managers, photo galleries, video players, statistics, social networking and just about anything else you might ever need. WordPress lists 9,652 so far with more arriving every day. These plugins are searchable and more often than not, free to download and use. Cool. More free stuff for you, right?

The WordPress Plugin List

Well yes and no. While free is a wonderful thing, figuring out which of these 9,652 plugins will do what you need it to can be a very confusing process. Remember that most of these plugins are written by nerds. They are also documented by the same nerds. Nerds have a startling vocabulary of technical terms and jargon and most of them are surprisingly unafraid to use it.

The second issue is that, as free software, most of these plugins are written as a labor of love. This means that they are not always updated on a regular basis. Can you risk running a plugin that has not been updated in the last 2 years? Additionally, the plugin was likely written to accomplish only what the author wanted to accomplish and in the way that makes the most sense to them. What do you do if the plugin only does 80% of what you need it to?

A web developer can easily update and modify plugins to make sure they work with your current setup and do exactly what you need them to do. They can typically accomplish this quickly because they have either seen it before, or they know where to find the answer to the problem.

Which brings us to the next consideration: What do you do when something goes boom?

Free Software And You

This entry is part of a series: You Get What You Pay For»

Freedom of The WordPress

Currently, one of our favorite tools for creating new web sites is WordPress. What started as simple blogging software has become the weapon of choice for small and medium business sites (including the one you’re looking at right now).  It’s simple, elegant, extensible and best of all it’s free. The “free” part always leads us to interesting conversations with clients, which usually start with the question: “If it’s free, why am I paying you?”

This is an entirely valid question, but it is also a frustrating one for developers who spend an enormous amount of time, knowledge and energy installing, configuring and modifying these systems. Hopefully this article will give you a little bit of insight into what you are paying for and why.

The Initial Setup

One of the things WordPress prides itself on is an easy setup and this pride is fully justified from this developer’s point of view. Getting WordPress installed, up and running is a breeze for any seasoned web monkey. However, for the average non-nerd setting up a copy on your own hosting space can get a bit more complicated:

  • Do you have hosting server? (a place that your website will live on)
  • Do you have a domain? (i.e. www.yourname.com)
  • Do you know how to point the domain correctly to the server you are using?
  • Does the server have PHP and mySQL installed? (these are required for WordPress)
  • Do you know how to create an empty database for WordPress to use?

Are these all things you can learn to do? Certainly! Most of it will involve a couple of days of reading and study, some careful note taking and probably some time on the line with tech support. If the questions above look like total gibberish to you, then you will probably need to spend a bit more time on it.

For a developer, this will take about an hour tops to track down any missing info and run the initial setup. This does not mean the developer is smarter than you. This is simply the kind of thing we have done a hundred times. When you have done it a hundred times, it will be easy for you too.

It should be noted that WordPress.com will also set up the software for free under yourdomain.wordpress.com which is a viable option for a quick cheap website. However, if you want to have the site available at www.yourdomain.com you will have to pay for a premium account (ditto if you need more space). The free or premium plan may seem like great options at first glance, but there are still a number of things to consider.

WordPress Default Install

The biggest one is that a default installation of WordPress looks like the image on the right. Is that really what you want your site to look like? It’s probably not, but WordPress has a number of wonderful ways to fix the look of your site and add cool now features as well.  Using themes and plug-ins, you can take WordPress from simple blog to a professional business site, store front, social networking site and much more.

We will take a look at these options and the potential issues in the WordPress Modifications article next: Out of the Box and Beyond