Tidy up your forms for a painless experience

A recent inquiry by uxmovement.com shows that users get more out of having form labels above the fields rather than beside them. Having it illustrated makes the point quite painless and straightforward:

visualfixations

It just looks cleaner and it uses the natural flow of the eyes to help in processing of information. This is something that every designer has either overlooked in the past or simply neglected.

Keep it above the fold

Jakob Nielsen again reiterates how important it is for web designers to consider the mythical page fold as a tried and true way to target users and gain their attention.

He shows that the first 800 pixels from the top of the page are the most important, with 300-400 pixels garnering the most viewing time. Users spent about 80% of their time above the 800 pixel mark and about 20% below it. The fold represents what a user sees without having to scroll down when viewing a web page. Continue reading Keep it above the fold

Netflix Goes Mobile, Pay TV Subscriptions Drop

Netflix, Hulu, Tv.com, Amazon, and even YouTube are bombarding the streaming entertainment arena with awesome content, tons of programming, and options for everyone. These services are popping up everywhere from Nintendo Wii consoles, TVs and now your beloved iPhones and iPads – soon to be on the Android platform as well. The goal seems to be heading towards making Netflix ubiquitous making it accessible to anyone and everyone on nearly any platform or device.

Just last week Netflix announced their first serious foray into the mobile application market and beat out other similar services by releasing their own app designed to allow users to manage their queue and stream content directly from Netflix over WiFi or 3G. If you’ve got the data plan to handle it, it looks like you’re about to be connected to entertainment no matter where you are.

This announcement goes hand-in-hand with the uptick in use of networked backed services like Hulu and the first time ever drop in pay-TV subscribers. The market as a whole lost over 200,000 subscribers and I’m sure part of that group are still glued to their TVs, mobile devices, and PCs happily watching streaming on-demand content.

It’s about time that old media realize that pay-TV is quickly becoming a thing of the past.

Netflix iPhone App Video from Netflix on Vimeo.

Specify Stylesheets for Different Media Types with $html helper

I’m expanding my CakePHP experience and now I’ve delved into displaying the application on multiple devices and of course, print.

Print stylesheets can be tricky to design, but it took me a while to figure out how to have cake automatically add them to the template using the $html helper.

<?php 
	//you specify the file name first, then the media types at the end.
	echo $html->css('simple', null, array('media'=>'print'));
	//
	
	echo $html->css('regular', null, array('media'=>'screen')); 
	echo $html->css('simple', null, array('media'=>'print')); 
?>

This will output something like this:

<link rel="stylesheet" type="text/css" href="/css/simple.css" media="print" />

CakePHP: Join results from multiple tables

Have you ever wanted to expand on your pre-set model queries with some table joins or other fancy footwork? You can join your model query to another table or tables like so:

				
$market = $this->Market->find('list',
	array(
		'joins' => array(
		array(
			'table' => 'companies_markets',
			'alias' => 'CompaniesMarkets',
			'type' => 'left',
			'foreignKey' => 'CompaniesMarkets.market_id',
			'conditions'=> array('CompaniesMarkets.market_id = Market.market_id')
		)
	),
	'conditions' => array(
			'CompaniesMarkets.company_id' => $company
			),
			'fields'=>array('Market.market_id','Market.market_name')
	)					
);

What’s we’re doing here is specifying the ‘joins’ option along with a slew of other pieces to designate what to join, how, and by which field. The ‘conditions’ simply sets which fields I want to check for a certain value and which fields I want to use for this list.

How To: CakePHP form input without labels

One of the great things about CakePHP is how easy it is to get very common tasks accomplished in a short amount of time. Form building is no exception, but there are many options to specify – and at times those options are not immediately apparent.

The standard input code syntax appears like this:

input(string $fieldName, array $options = array())

To have your form inputs not show labels, you can specify ‘label’=>false in the input options.

For example:

<?php
echo $form->create(‘User’, array(‘action’ => ‘login’, ‘class’=>’header-login’));
echo $form->input(‘username’, array(‘label’ => false));
echo $form->input(‘password’, array(‘label’ => false));
echo $form->end(‘Login’);
?>

This will show your form inputs without the label elements.

Demystifying Web Development: What It Means to Be a Modern Web Developer

The world of modern web development is not understood by anyone outside of it. The intricacies, the intense segmentation, and the true strength of the professional community is often overlooked by the layperson.

“So what do you do?” they ask. “I’m a web developer.” I pause for a moment. “I build and design websites and web applications.”

“Oh cool I used to do some of that at my old job with Frontpage.”

I’ve had about a million conversations with people that start off like this. For sake of brevity, I usually leave things at this – but secretly I’m steaming inside. Not necessarily because they’re not familiar with my realm, but because how the profession is written off as something almost trivial. The value is constantly being eroded and stereotyped, making educating clients and consumers that much more difficult. This is partly because to get your hands dirty in development the only thing you really need is a text editor and a web browser. That’s where many people think development ends.

If web development was an iceberg that would be the 18 feet sticking out of the ocean. What you don’t see is the remaining monstrosity that sinks the hive-mind Titanic as it approaches and blows people’s minds so much so that they nearly refuse to acknowledge it exists or is even nearly as complex as it truly is.

Being a web developer means three things:

  1. You program for the web – anything you program or develop is meant to be executed on a web server or presented to an end-user in a browser
  2. Most of the work you do is never seen or understood by those who use it. They just accept that it works and don’t ask questions as to why or how.
  3. You have a specialty. You are awesome using AJAX, web design, PHP, Haskell, ASP.net, Actionscript, Zend Framework or any of the other 149.54 million tools, methods, languages, and utilities that help make web development such an interesting field.

This escapes a lot of people even in 2010. Think of it in terms of construction. You want to build a house (or website) so you draw up plans that meet your needs, find a suitable plot of land for it, start estimating costs, and start assembling a team to complete the job. You’re going to need a general contractor or foreman, a drywall crew, framing crew, clearing crew, electricians, plumbers, masonry crew, cabinet crew, and the list goes on. And within each of those general fields there are also long lists of specialties. You have to be careful to select the right candidate for the right purpose and stay mindful of each crew’s specialties and core competencies. Don’t expect your master masons to be able to run electrical wiring…

The same is true in web development. Given the nearly endless array of specialties and qualities that development professionals possess, the world that consumes the fruits of our labor needs to know what it truly takes to make a monster like facebook, a twitter, a blog, or even a digg or reddit. This comes through on sites like craigslist where someone wants to create the next facebook or myspace – for a budget of $220 and a 24 pack of Miller Light. There is no concept to what it takes to actually create something from the ground up, make it function properly, design a great user interface, and get people to start using it.

As professionals we all develop specialties to serve a certain purpose – it’s about time we stop generalizing and start educating. The next time someone asks what you do for a living tell them as succinctly as possibile – any of the following are good examples:

  • “I’m a web developer. My main focus is developing applications that balance the servers for large sites like facebook and myspace so that they will run smoothly even though 18 million people are using them at one time”
  • “I’m a web developer specializing in designing highly usable web sites and applications. I make the web sites your love easier to use – so it just works the way you expect it to.”
  • “I’m a web developer and build the technology that powers web-based video streaming so you can watch the latest “Keeping up with the Kardashians” on hulu.”

Don’t cop out. Tell people what you do – don’t be mad at them for having no idea what it means to be a developer. Educate them.

Joomla! migration headaches

Recently I moved an installation of Joomla! with VirtueMart to a new web host. The previous web host had restricted most of the export functionality in cPanel so I had to FTP everything over to the new host manually.

This created a lot of extra headaches. The most persistent was not being able to consistently save/update/create users in the administrative back-end. Every so often the form would time out and give the error message ‘Error Loading ModulesMySQL server has gone away’.

It took around 24 hours of constant searching, but I finally found a solution that worked for me at the Joomla forums.

Basically it states that the configuration.php needs to be edited so that it is in UTF-8 encoding without BOM. You can open the file in Notepad++ and set the encoding to this, then upload it and VIOLA.

Hopefully this saves someone else a headache.

Find and Replace a letter/number and batch update with MySQL

I had the need to do a batch update of a large MySQL data table that held thousands of products and their information, including SKU numbers. Recently the company has changed how they manage the SKU numbers and needed to replace the leading ‘2’ with a ‘4’ for simple accounting tracking.

It was easy enough to use REGEX to find which ones started with ‘2’, but I was still unsure of how to replace the ‘2’ with a ‘4’ in all of the necessary records.

I knew that if the SKU started with a ‘2’, that it had to be changed to a ‘4’ so I started out using the IF() function to compare SKU’s as follows.

SELECT sku, IF(TRIM(LEADING '2' FROM sku) &lt;&gt; SUBSTRING(sku FROM 2),sku,INSERT(TRIM(LEADING '2' FROM sku),1,0,'4')
)
FROM product

So what this does is select all the SKU’s in the table and return the ones that need to be changed with what the change would look like. The first TRIM() function takes all of the SKUs and trims off the first 2, then it is compared to a substring of the original SKU starting at the second position. If there is no leading ‘2’ in the SKU, then it will not match the substring since nothing was trimmed.

The next argument is telling the function what to return if the TRIM() and SUBSTRING() values differ. It will return the original SKU since we don’t need to change it if it doesn’t start with ‘2’.

The last argument is telling it what to return if TRIM and SUBSTRING are equal. For this value I’m trimming the leading ‘2’ and INSERTing a ‘4’ at the first position of the SKU.

The above query lists the original SKU and what it should look like once I put it into an UPDATE query.

The UPDATE doesn’t look much different:

UPDATE product
SET sku =
IF(
  TRIM(LEADING '2' FROM sku) &lt;&gt; SUBSTRING(sku FROM 2),sku,INSERT(TRIM(LEADING '2' FROM sku),1,0,'4')
)

This actually updates the table with the changes that I wanted. There may have been a more elegant way to do this with REGEXP but this did the trick. I verified that only the SKUs with a leading 2 were changed to a leading 4 and the others were left as they were.

Ubuntu 10.04 LTS: First Thoughts

I have Ubuntu installed on my laptop as a dual-boot and on my work PC inside a VirtualBox. I use it for all kinds of things that Ubuntu just does better – especially heavy development.

After yesterday’s public release of Ubuntu 10.04 LTS I decided it was time to get my hands dirty and install the new version.

A few things stuck out during the first boot and installation process:

  • Slick Graphical Interface during installation (see screenshot)
    4-30-2010 1-39-49 PM
  • More emphasis on making the user aware of features: sliding panels explaining features and benefits during installation just like Windows OS install process
  • Seems more readily geared towards a wider user base – features like music store, built-in social networking and instant messaging platforms
  • It boots up in seriously just a few seconds. Really great benefit.
  • Default theme and desktop configuration are attractive…and surprisingly not orange/brown!4-30-2010 1-53-32 PM
  • Tweaked window layout: note the ‘close’, ‘minimize’ and ‘maximize’ buttons in the top left
    4-30-2010 1-56-47 PM
  • The feel of the OS seems much more familiar than it used to. I’m impressed and I think this is a great leap towards a wider user-base.

Well, those are some first-impressions. I’m really excited about the level of polish that has been reached with Ubuntu 10.04. Props to everyone involved in the project.