Month: July 2013

8 scenarios to think clearly about mobile first

What is mobile first?

Mobile first.  This is the new mantra for web design.

We design the smallest screen first and design the larger screens later.

Does mobile first help me position my service?

As the owner of a service, I like mobile first.

Mobile first constrains me to think clearly about the main purpose of my website.

The small screen prompts me to edit, edit and edit again until I am saying what I need to say, simply and completely.

Where can I get good examples of mobile first?

Though the mobile first mantra has become a mantra, when I google mobile design, I have found very little advice about how to think about mobile design.

Oddly, blog posts promising 50 best responsive sites, for example, immediately contradict the mobile first mantra and show the desktop layout first.

In short, much to my frustration, I haven’t found a good catalogue of examples of responsive design that is mobile first.

What advice on mobile first is out there?

The advice out there is either very generic (think about what the customer wants) or very technical about media queries, for example, or very sophisticated, such as have dummy actions to make the user think your website is more responsive than it is.

To get started on using mobile first, I am going to have to think through the principles for myself.

How does mobile first clarify my service design?

The scenario

Mobile users are probably on the go somewhere.  They are unlikely to be at their desk.  They don’t have a keyboard.

Not only are they away from the conveniences of their own desk, at any time their signal might fail.  They are very likely to be interrupted by something going on around them, or by having to break off a task and ‘move on’, get off a train,  say.

They not even all that likely to be sitting down.  They may be on public transport with their bags and worldly possessions between their feet, with one hand hanging onto the overhead strap, and only one hand and a thumb to work their mobile phone.

What mobile users want and need

Clearly, the interaction between mobile users and myself must

  • Obvious at a glance
  • Not disturbed by noise and activity around the user
  • Manageable one handed with a thumb
  • Complete in itself in a very small window (a few seconds).

This list feels dull and pedestrian.  It is certainly “micro”.  Can I really conceptualise my interaction with a user as a matter of seconds?

Mobile interactions are small

The smallness, if not meanness, of mobile engagements, stopped me in my tracks.  Has life come down to a few seconds?

Alternatively, I can ask was life ever about more than a few seconds?

What did we do before we had mobile?

If we arrived at the supermarket without a shopping list, for example, what did we do?  Instead of calling home to get oyur list, we had to guess?

Before we had mobile, when we were sitting on a train, we made a plan in our head for what we would do when we left the train.

After all, we still do this when we are driving, or when we don’t have a signal.

Plus ca change – has mobile changed anything?

I am not totally convinced that mobile has changed anything.

To continue the supermarket example, we might be able to call home to get our shopping list and rectify our own confusion, but our relationship with the supermarket does not change.

The supermarket doesn’t have our goods waiting for us when we arrive.  Nor, do they send us scooting around their warehouse with an efficient map like an Amazon worker.  Nor, does a robot fetch our goods for us.

Our relationships with our users persist even with mobile

The relationship between user and supplier, at least in the case of the supermarket, has not changed.  All that has changed is that the user can be a little more efficient.

I am going to use this insight as a heuristic and generate all the relationships we might have with a user and look where our offering of a mobile experience might allow them to be more efficient.

What do we do when we are mobile and don’t have a signal?

When we are driving or sitting on a plane without a signal, how do we think about lives and our relationships with the various people on whom we depend?

What do we want to know and what decision have are we thinking about making?

What will make us happy and feel we have achieved what we set out to achieve?

Scenario 1

I am whiling away the time and hoping for something to do to pass the time.  If I don’t have an internet connection, I might pick up a free newspaper or an inflight magazine.

Scenario 2

I might feel at a loss in the setting and not want other people to see that I feel at a loose end.  If I don’t have a mobile connection, I might scribble on a notepad or pretend to look seriously at the artwork on the walls.

Scenario 3

I might want to catch up with news, international or purely social, and be taking this moment because my movements precluded doing it earlier.  Without a mobile connection, I might look at a newspaper for news or glance at my email or social media messages.

Scenario 4

Particularly at the beginning of the day, I might be looking for amusement and entertainment as a mood-maker to start the day with a smile.  In days gone by, I would have looked for the daily cartoon.

 

Scenario 5

Particularly at the end of the day, I might be hoping for some inspiration or distraction to contradict a disheartening day, or recent encounter.   Anything, which allows me to jump the tracks of despair, and to creatively restore hope, will do.  Without rich resources, I would have depended on my imagination and memory.

Scenario 6

I might have a specific problem to solve and I am hoping that someone has put a clear solution online. For example, how do I check my foot size before buying shoes?  Or, how do I think economically about mobile design?  Is there someone out there who is sufficiently expert to lay out the issues clearly?  Without a connection, I might be thinking about how to find out and whom to ask when I am connected to the world again.

Scenario 7

I might be looking out for a specific message from someone – on my email, twitter account, or even on a broadcast service.   I am looking for something specific and I want to go to a url, log in if necessary, and get an answer to my question.  Has the message come and can I relax or move to the next stage of a task?

Scenario 8

I might be hoping to make a specific action.  To take a simple example, I might want to bookmark ten useful sources that I can follow up at home.  At this stage, we might be tempted to mimic a website set up for desktops.  It might be more helpful to think through the basic actions first.  What actions? What information do I need to act and what will the action be?  How do I know when I am done (or when I am half-done)?  How will I remember how far I got?

Using the scenarios to gain insights

Working through the scenarios, I was struck that the first scenario and possibly, the fifth, fall into window shopping.   These services might be important to regular customers of mine but probably of limited value to someone looking desultorily for distraction.

Scenarios 2, 3 and 4 provide services to clients that used to be served by mainstream media and newsletters.  To the extent that we have anything useful to contribute, clients might like this service.

Scenario 6 offered a specific insight for my kind of business.  Design my layout to show the questions, provide sufficient information for the user to judge whether they have found their answer, and make provision to bookmark the link in some way.

Scenario 8 turns out to be the most insightful for me.  So often when we start a new task, the steps aren’t clear to us.  Thinking in the micro terms of mobile helps us communicate the structure of tasks more clearly to our clients.

Scenario 7 seems to be more a matter of general services but will include messages from us.

Moving forward

I am going to begin from here.  Do these insights help me visualize the small screen of mobile and what my clients would like to receive as they, for example, hang from a strap on a jolting train, and attempt to look something up one handed with only a thump free?

 

 

Posted on by Jo Jordan 1

12 steps to rebuild your WAMP server without losing your data

Like many people, I have a WAMP server on my laptop where I mock up new websites and run private websites as internal Wikipedia.

I am currently running WAMP 2.2 and it fails – a lot – three times in six months.  I have no idea why and each time the symptoms are different.

But I do know what the solution looks like. I need to restore long enough to be able to gain access to my database and back up anything that is not backed up and to set any unusual settings to defaults so I can think about an alternative.  But first I must restore WAMP without losing my website files (www) and the databases which are stored in bin.

Here are the steps.

Step 1 Backup your WAMP folder

Simply copy your WAMP folder into C:/ .  Windows will keep it as Wamp – Copy.

Have a break and calm down. This might take an hour or so depending on how much is in your database bin and www folders.

Step 2 Print out your passwords and permissions

Try to recall your user, host, password table.  If you can log in to phpmyadmin, you will find it there under users.  If your can access your mysql console, open it; ignore the password; and type

Select user, host from mysql.user;

The table will show you your usernames and hosts but not your passwords.

Note well that if you are an organized person, this is a table that you might want to keep on hand for emergency purposes.  But right now we will proceed assuming that we cannot quite recall what we did when we set up WAMP.

Write down what you can remember and do it now before you start guessing and create chaos later.

Step 3 Print out all the files that you might have edited when you set up WAMP

  1.  wamp/apps/phpmyadminVerNo/config.inc.php (this is where you put your user name and password and where you might have set up authentication and ports)
  2. /wamp/wampmanager.tpl (you might have changed http://localhost to http://localhost:81 if you have changed the port for apache from 80 to 81  three places)
  3. /wamp/bin/apache/apacheVerNo/conf/httpd.conf (if you changed the above, you will also have changed Listen 80 to Listen 81 and localhost:80 to localhost:81)
  4. /wamp/bin/mysql/mysqlVerNo/my.ini (you might have changed the port for myql from 3306 to 3307 – three places)
  5. /wamp/scripts/testport (where you might have changed 80 to 81 in several places)
  6. /wamp/lang/English (where you might have change Port 80 to Port 81)

Also write down the Version Numbers for Apache, MySQL and Phpmyadmin.

Check whether your computer is 64 bit or 32 bit.

You are now ready to start restoring WAMP.

Step 4 Download the correct version of WAMP

Find WAMPSERVER on the internet  and download the correct version of WAMPSERVER.  Don’t be tempted to upgrade while you are restoring.  Keep the task manageable.

Step 5 Uninstall WAMP

Go to your Control Panel (from Start) and uninstall WAMP.  Uninstall removes everything except your www and bin folders.

Step 6 Install the correct version of WAMP

Install WAMP.  I use all of the defaults (IE and dummy email).  If I need to fix my email, I do it in a separate exercise.

REMEMBER to enable the rewrite module in Apache. Go to the WAMP menu, Apache, modules.  Click on rewrite. And close. Then check again. Sometimes the “tick” doesn’t stick.   If you don’t enable rewrite, your websites will not be able to read “pretty urls” that you carefully set up for humans to read and you will get baffling errors.

Step 7 Let WAMP start

When WAMP asks, let it start itself up.  You will see the icon in your bottom tool bar and it should go GREEN.

Step 8 Check you have access to localhost

Got the WAMP menu and check you have access to localhost – that is the list of your websites in www.

If your config.inc.php file shows a password (see Step 3), then you don’t have access to Phpmyadmin – fix that in the next step.

Step 9 Fix your password in config.php.inc so you have access to phpmyadmin

Got to your config.inc.php file (see Step 3). If it differs in format from the one you printed out, then you have installed the wrong version of WAMP. Close all services, exit and start again!

If you have the correct version, then change your user name and password. If you have changed your ports, then do nothing else right now.

Stop all services and restart all services (from the WAMP menu).

Check you have access to phpmyadmin.  If you get a pink error message #2002 or #1045, then in all likelihood, you have put in the user name and password incorrectly.  But sometimes you have little choice but to try to reinstall (start again).  In short, at this point, you should have access to Phpmyadmin and clerical error or confused working procedures is a more likely cause of failure than anything more complicated (Don’t google  it. That is like looking for medical information – you will just panic. Calm down and work systematically.)

If you have access to phpmyadmin, you should be able to access your user table.

Steps 10 & 11 Access a website

Now go to localhost and access a website. If you did not change your ports, everything should work fine.  All done.

If you did change your ports, you have one of two options.  Change the port settings on your websites to match the defaults.  Or, carry on and edit all the files that you printed in Step 3.

To change the port settings in Drupal, the port setting for mysql is in /www/sites/all/default/settings.php. You have to go to Properties with a right click and change from read-only. Change the port to the default of 3306.  Save and set the Properties back to read-only.  Remember you will have to do this for every website.  Also remember if you test this on one website and then go on to change the port settings, come back to change the port setting to the new number.

If you have edited all the files in Step 3,  then this time stop all services, exit and restart WAMP and then all services because you have edited the menu as well as the services you call.

If all goes well, you should be able to access all your websites.

Step 12 Consider changing your server

WAMPSERVER 2.2 seems unstable to me. I don’t know if 2.4 is anybetter.  What I do know is that the config.inc.php file in WAMPSERVER 2.4 is radically different from the one in 2.2 and I cannot see how to update the ports.

Also the version of mysql is different which requires an undate of your data tables as well as your software. To upgrade, you might do better to treat the job as a migration and back up all your websites and all your mysql, rebuild your server and then rebuild your websites.

 

There you go –it might take you an hour to get back into action. If anything goes wrong, it might take several hours. But don’t panic.  The web is littered with half instructions and panicky notes.  Don’t go near them.  Just work very systematically. Check as you go so that you don’t cause more chaos. And everything will work.

Posted on by Jo Jordan 6

Add a Save button to the top of a Drupal post

One of the annoying features of Drupal 7 is that its submit button is below the fold.

Inevitably when we are writing a long post, we become distracted at some point and posts are left unsaved.  Without an automatic save feature, it is equally inevitable that posts are lost.

To make life a little easier, it is cool to put a Save button at the top of the Add Content form. And it is easy to do.

  1. Install and enable the module Content Type Extras
  2. Go to the list of Modules and Configure Content Type Extras
  3. The Module allows for all manner of extra buttons that I don’t use. I will just forget what they all do.
  4. I go to Extras and check two boxes to add a Save button to the top of each Content Type.
  5. Save and buttons appear whenever you add  a new Article, Book page, etc.

Now you have saved yourself a needless task of scrolling down to find the Save button and given yourself a prompt to Save when you are distracted.

Posted on by Jo Jordan 0