Archive for March, 2012

How to create a professional website using WordPress as a non-digital Graphic Designer

Posted on: March 27th, 2012 by Fransgaard 3 Comments

On Twitter, a talented graphic designer I know recently asked how he could learn HTML code so he could become a digital designer (as in digital art director/UX designer rather than a digital artworker/template designer/frontend developer).

While knowing HTML has its benefits, I don’t think it is a requirement as a digital user experience designer to be able to code HTML to a professional standard. Rather than getting bogged down learning HTML from the ground up, I believe it is much better understanding what can be done with HTML without being able to do it yourself. It gives a much broader foundation faster.

However, the question is a part of a broader series of questions I am regularly asked which can be summarised into a single question:

“How do I become self-sufficient in producing a professional digital presence?”

The quick options are setting up a blog, A facebook page, a flavours.me profile etc, but at the end of the day nothing beats having your own domain with your own website under your own control.

Instead of learning how to hand-code a website I recommend downloading and installing a self-hosted WordPress CMS system… Now now, don’t run away yet. Let me take you through the steps…

0: Secure support

Best option is find a friend who understands the web, not necessarily a professional, just somebody who “gets it”. You may not need that person, but it is nice to have somebody just in case.

Linkedin is full of helpful groups dedicated to WordPress.

1: Sort out server space to host your website

WordPress a server-side scripting language called PHP using MySQL database. Don’t worry about what it means, just remember the words “PHP” and “MySQL”. You need to find a host that has those words in its sales material.

I use www.one.com because:

  • They do domain and hosting in one go
  • Their setup process is fast and simple
  • Their welcome emails are simple and complete
  • Their support is amazing

There may be other equally good hosts, but since I have never had any problems with one.com I have never shopped around for other providers.

2: Learn to transfer files to your server space

Get an FTP program. I use FileZilla; Simple to use, does what it says on the tin.

Login to your new domain using the details you got from above and upload a file to your server space. A jpg picture is good, a simple HTML file is better. Here’s a simple test HTML file.

It is like moving files between two folder. Just one of the folders happens to be on a different computer than your own.

TIP: You can open the sample HTML file in a text editing program such as TextEdit (mac) or Notepad (PC). Try and modify the file and upload it again to see changes happening.

3: Install WordPress

Download the latest WordPress from WordPress.org and follow the instructions that comes with the Zipped file. More detailed instructions can be found here, but the attached instructions should be enough to get you up and running.

4: Understand WordPress basics

Don’t start any design work yet. Instead play around with the basics of WordPress by adding new pages and posts. Posts are blog-like posts with categories, tags and date stamps. Pages are less time-sensitive content such as About me etc.

Remember you can always delete any content later on.

5: Understand the power of plugins

Find plugin

Imagine functions you would like on your site. For example a tag cloud, a twitter stream a gallery light box etc. Go to the plugins section and use the add new section to search and find relevant plugins. Install a couple to familiarise yourself with how to make use of plugins.

Make sure to explore the widgets options as well. Some plugins have widget options giving you some control over where the actual plugin will appear on your site.

As with content you can always delete the plugin later on, but this exercise is designed to show you how big an arsenal of functions the wordpress community can offer.

6: First baby-design step.

ThemesOnce you feel confident using plugins the first step of designing your site is to find a WordPress theme that roughly does what you are looking for.

Start with a free theme. There are loads out there to download from here.

Note, some free themes add credits to the footer which I think is fine, but some also adds ads you do not have control over, which I find a bit more problematic. A few plugins do the same. keep eyes out for potentially unwanted content appearing on your site.

Also note some themes may have problem displaying some of your plugins. It’s all trial and error. More often than not though you won’t find any conflict.

Step 7,8,9….etc

Themes often offer the ability to change headers and colours. Make use of those to modify the design.

In time you might want to change something very specifically by editing the HTML or even the PHP code. I won’t go into details with that. All I’d say is make a copy of the Wordpress theme you want to modify so you can quickly switch themes if something goes wrong.

the good thing about WordPress is the ability to quickly turn things on and off.

Let me know how it goes.

Responsive design – The next evolutionary step in website design

Posted on: March 20th, 2012 by Fransgaard 1 Comment

Image generated using browsersize.googlelabs.com.The original version of this article can be seen at the award-winning Capgemini – Capping IT Off blog.

If you have been involved in procuring a website chances are you would have heard pitching web designers say something like:

“A screen resolution of 1024X768px ensures that your new website is displayed correctly to the vast majority of users”.

And they are correct… or they were?

How did 1024x768px screen resolution become the standard?

In the early days of graphic web design first 640x480px, then 800x600px were considered the lowest common denominator, but around 2004-2005 screens offereing 1024×768 resolutions became widely available and affordable.

Around the same time the public in general started browsing the web, which made companies aware of the value of being online. This in turn resulted in a surge in the industry of graphic-driven interfaces and a process of creating static templates in ‘designer’ tools such as Photoshop was established.

These factors all played a role in establishing 1024x768px as the most common screen size.

Why a new era in digital design is required

However, the 1024x768px methodology is rapidly becoming outdated as on one hand people are getting bigger and bigger screens and on the other hand people are also increasingly accessing the web via the smaller screens of mobile devices.

The result is the group of people who get maximum benefit of a fixed 1024x768px design is getting smaller every day. The question then becomes: How do we maximize the user experience for all users?

Modern web design is Responsive Design

Simply put Responsive Design repurposes content for different screen sizes. Let’s look at an example of how this could affect a website following a traditional three-column layout:

Stadnard 1024x768px

With wider screen widths traditional three-column design remains fixed. However, by applying Responsive Design the layout modifies itself in steps adjusting it to different brackets of width.

Shown are two potential steps. The first step expands the width of the main content area. As the screen gets even wider the second step is deployed and both expands the width of the right-hand column as well as adds additional content to make best use of the increased screen real estate.

Wider screen resolutions

Vice versa, as the screen becomes smaller Responsive Design can modify the layout and repurpose content to avoid horizontal scrolling.

The opportunity is also there to remove content as well as deliver content that is specifically tailored for a specific screen size. Even changing the flow of the design from a traditional navigation-driven web design to a task-oriented process ideal for mobile browsing is an option.

Narrower screen resolutions

How to move forward with Responsive Design

  1. Look screen resolutions stats for your users. Group related screen resolutions together to determine key layout configurations. Look at usage vs benefit of low-use screen resolutions.
  1. Plan for responsive delivery from the start. How much bandwidth is there to produce tailored content for different layout configurations? What are the benefits does tailored content bring to the user journeys?
  1. Let go of the utopian ideal of the pixel-perfect fixed design and embrace the new world of Responsive Design to the benefit of your users.

How do you feel about Responsive Design? What ideas does it trigger? Share your thoughts below.

 

User Experience Design in a Social Enterprise Environment: External Influence & Employee Brands

Posted on: March 13th, 2012 by Fransgaard No Comments

The original version of this article can be seen at the award-winning Capgemini – Capping IT Off blog.

In the previous articles Connecting the Dots and A Consistent Experience I looked at a holistic view on the building blocks of the Social Enterprise and why it is important to deliver a consistent user experience and brand experience to employees.

In this article I will be looking at the Social Enterprise from the outside.

Influencing the champions within a social enterprise

We are moving to a future where the lines between work and personal lives are being blurred and as I covered in the previous article it is important that employees can represent the company and the brand correctly at any time whether they are at work or not.

The individual employee is representing a direct communication option to the company, an important fact for external marketeers. And the question becomes: “How can we give champions of our products and brands the tools to spread the word to their colleagues within the walls of the Social Enterprise?

Yam It or Chatter This

Creating the ability to for people to share to their social enterprise environment from the public web is one way to go. Granted it is possible for an employee to copy and paste the link into the corporate interface, but this is where the history of user experience design can be beneficial:

For a long time user experience designers where arguing back and forth whether having a print button or a bookmark button on a website was beneficial or clutter. After all it duplicates standard browser functionalities available (sort of) to the users.

But it became clear the argument was missing the point. The question was not whether the buttons duplicates a function or not; The question was: Do the buttons make it easier and are they more inviting for the users?

I suspect the answer played a part in the success of Facebook ‘Like’ and “Tweet this” buttons that social media brought to us: It makes it easy. I think it is reasonable to assume that similar options for sharing from the public web to the Social Enterprise will prove effective for the same reasons.

Technically sharable documents

I am not going to discuss the value of quality content as there are loads of good articles on the subject. Instead I would like to direct your attention to the delivery mechanisms.

In a consumer environment some delivery tools are better than others (horrible flippy pages anyone?) but for most part all can be viewed by the target audience if they wanted.

However, it may not be as straight forward for users on a corporate network. Your target organisation may still make use of older browsers or restrict access to plugins such as Flash and Java. Make sure any content work in older versions of browsers/ file readers and don’t rely on any plugins to be installed.

Employee Brands

To finished off this series of articles on User Experience Design in a Social Enterprise Environment I want to highlight a new and exiting concept called “Employee Brands”.

The Social Enterprise supports a more flat corporate structure. Due to the collective ownership of content and responsibility more power is in the hands of the employees and some individuals are better at handling, distributing and manipulating the stream of information making them influencers within the Social Enterprise regardless of job title.

  • They become known sources of good information
  • They become known by name
  • They become Employee Brands

Connecting with these Employee Brands seems like a feasible way of reaching inside the Social Enterprise wall, but how can they be identified?

Employee brands have two facets: Their public profile, reach and influence which can be destilled from all the hints of the public facing web (Have many Twitter followers? How many Facebook likes on the last blog post? What’s their Klout score and Peer Index?).

The other facet is their profile, reach and influence within the Social Enterprise and here I fall short of an answer because I am not aware of any capabilities able to measure an employee’s personal influence or “brand power” within a Social Enterprise from the public web.

One way might be to use their public presence and how it relates to the public presence of fellow employees, but this is merely a shadow of their Social Enterprise presence and may prove misleading.

Another way might be using what traditional account management and PR has taught us: Get to know the employees. Engage with them in the public social channels. Start conversations and use the information gathered to create a picture of the brand value of the employees.

I agree; The concept of Employee Brands is difficult to gauge, but looking at how the power of communication and information is spreading throughout organisations I think it is a concept well worth exploring.

What are your thoughts on influencing the Social Enterprise?