We are in the middle of a recession, so why is it a good time for small businesses to sort out their web presence at such a bad time? Surely, it would be better to wait for the recession to be over and then to start investing again. In this post, I have outlined 6 reasons why you should be thinking about a redesign of your web site now; or if your business is not online, why you should get your business on the internet now.
Your customers are looking for bargains
Your customers have already searched online for the best deals and best products. The internet has helped consumers to drive down prices and be better informed about the goods they are purchasing. The web has enabled consumers to not only compare products, prices and resellers, but also to find out what others think of a product, service or company. All of this is done online. If you have an out of date or non-existant web site, you will miss out on this traffic. By 2007, Verdict Research estimated that £10.9bn was spent online by UK consumers. That was a year-on-year increase of 33.4%. Since then, despite the recession, internet retail sales have continued to increase.
Your competitors have a site already
Your competitors — both locally and globally — more than likely already have a website and are benefiting from the additional traffic that it generates. By not having a website, or not having it updated, you are missing out on the custom that your competitors are enjoying. Would you shut your shop one day a week and put a sign on your door giving directions to your nearest competitor? This is exactly what you are doing if you don’t have a modern web site.
Most consumers today expect a professional business to have a website and to be listed online. You can gain a lot of business by making the right first impression for consumers who may not have known you existed. By being able to answer questions online and show your products or services, you start to build a relationship with potential customers. Those who do product research online may email you a quick question, your answer may build a relationship that subsequently leads to a sale. Brand trust is a key factor in the decisions consumers make.
Why not generate new marketing opportunities with your website? You can market directly to people who have visited your site and subscribed to your updates. You can send them advice on your latest offers, new lines, deals and company information. And it won’t cost you a penny to do!
A website also offers you the ability to be open 24 hours a day, 7 days a week, with no additional staff requirements. It is an advertising dream offering you the ability to advertise your goods and services in a cost effective way. Owning a website is much cheaper than taking out a year’s worth of advertising.
Give contact details to millions of passers by
The internet enables you to offer browsers and passers-by the opportunity to get in touch with you. Whether that is leaving a comment on your blog, emailing you directly, sending you a message through your online form, using a chat room, giving your telephone number and address, adding your listing to directory services and Google…. These days, people don’t look in Yellow Pages™ for business information. They look online. It is up to you to make sure you are there when they come looking.
The recession won’t last forever
You won’t find many market experts telling you when the bottom of the recession will be reached. In fact, you won’t hear them claiming the recession is over until after the economy has scrambled out of the hole and is making a dash for it. You shouldn’t wait for the experts to tell you that everything is going to be fine; you need to make provisions for the survival of your own business and the best way to do that is to spend a little time sprucing up your online shop windows. This will push you ahead of the game when the economy does start to react and you will be leading the field.
Accessible tables should allow data to be readable
The use of tables as the bedrock of page layout in HTML is well and truly over, having been usurped by
divs. This is a good thing because it means that tables can get back to concentrating on their real purpose, which is to display complex data in a simple format. But aren’t tables dreadful for accessibility? No, they are fine for accessibility as long as they are used for their primary purpose and they are used correctly.
In this post we shall look at how to properly code a table so that it is accessible and easy to use.
The data we will use
For the sake of providing an example for this post, I have used a dataset from the UK Meteorological Office from Newton Rigg. Of this data, I am only going to use data from 2006, 2007 and 2008 (for simplicity) and I will be using the maximum temperature, minimum temperature, rainfall and hours of sunshine averaged or totalled for each month. If you want to follow along with this example, you should prepare this dataset in advance.
In theory, the table should be simple to create but as tables become more complex, so does the markup. In principle, the best way to denote table headings is using an ID attribute, which is then carried over to each table cell that relates to it. In this way, you create a grid address for each table cell similar to the way that MS Excel references each cell in a spreadsheet.
Building the table
First of all, we have to get the table started:
<table id="newton_rigg" caption="Newton Rigg weather data 2006 - 2008, UK Met Office." Summary=”This table shows monthly average maximum and minimum temperatures and total rainfall in millimetres recorded at Newton Rigg weather station between 2006 and 2008.” cols="4">
Note that a caption has been given to provide a reader with an indication of what the table is about. A summary is also provided to identify the purpose of the table. This is used in a similar way to ALT text. Together these two attributes are useful for accessibility purposes to inform those using screen readers and visitors with cognitive disabilities.
Headers or Cells?
There are two types of cells within a table:
Table Header cells
These are used to describe the column/row headers within the table and should be given special attention when defining a table that will meet accessibility requirements.
Table data cells
These are the cells of the table that contain actual data or information that is cross-referenced against the header cells.
Defining header cells
Next, we need to define the header cells that will give each column it’s context. This is done simply by adding two table rows
<tr> followed by a series of
<th> cells containing the relevant heading.
Once this is done, we can add a class to the
<tr> tag so it can be styled later and we can get down to concentrating on making the table accessible.
We have four columns in our table, marked as ‘Month’, ‘Max Temp’, ‘Min Temp’ and ‘Rainfall’. The associated
<th> for each of these is given a unique identifier, such as
id=”month”. This is what enables screen readers to read table data within context as it reads the cell. It is important to ensure that the
id attribute is meaningful and descriptive.
You will also note that there are two rows of headings. This is because the year of data will change, because we are covering three years worth of data. The year
<th> spans all four columns, just to make the table a little more complex!
<th id="tmax">Max Temp (°C)</th>
<th id="tmin">Min Temp (°C)</th>
<th id="rfall">Rainfall (mm)</th></tr>
<tr><th id="year" colspan="4">2006</th></tr>
<tr><th id="year" colspan="4">2007</th></tr>
<tr><th id="year" colspan="4">2008</th></tr>
Populating the data
Next we need to populate the data into the table and this is where the
ids for the headings are really important.
Each row contains four cells of data. Each of these cells is referenced back to its table headers. So, for example, the first cell is referenced to the year (e.g., 2006) and to the month. Once we have
th ids in place, this is fairly simple – we reference them using the headers attribute. In the first column, we would code
<td headers=”year month”> whereas the second cell would be
<td headers=”year tmax”>.
The order in which the headers attribute calls the column headers is important as this is the order in which a screen reader will read out the context of the data. In this case it will read (for the first row of data in our table) “2006 January, “2006 Max Temp degrees C 5.6, Min Temp degrees C 0.6, Rainfall mm 34.4”….
<tr><td headers="year month">January</td>
<tr><td headers="year month">February</td>
<td headers="tmax" class="tmax">6.1</td>
<td headers="tmin" class="tmin">1.0</td>
While this is a bloated way of making a table accessible, at the moment it is the only reliable way of doing so. Future changes in HTML 5 may refine and change this method but at the moment (and until screen readers are updated in line with the HTML standards) this is the most likely method to work.
You can see the finished table from this example here and view the complete code by selecting ‘view source’ in your browser. Note, I have styled this example page to make it easier to see how the data is structured.
Rowers by Y
This is the second stage of the 5 Stages of Project Management series for web design projects. So far, we have taken an overview of the 5 stages as a whole and looked at how to write a successful design brief as part of the Inception stage. We are now ready to look at Stage 2, Design.
Before starting this stage, if you have completed the inception stage, you should have a well defined brief and understand the scope of the job. Without these, your project may end up with higher costs and delay because your expectations differ to those of your client. Now you are ready to evolve your ideas into some concepts to present to your client. For now, you are not actually building the site; you are designing concepts to a pre-construction stage that can be presented to and agreed by your client.
The brief may have given you a number of ideas for how to design the site and this stage is intended to consider these ideas, present the best to your client and identify the preferred option. But before you can do that you need to get answers to a few more questions and test your ideas against them.
Some things a web designer should consider:
You need to test your ideas against what users will expect to see. The users of the site are of absolute importance – if you put your navigation system at the bottom of the page, for example, is this what users will expect? Where will they expect to see the logo? There are a number of conventions that users will expect and you should consider these carefully before you decide to go against them.
You also need to consider user-specified items that should appear on the site, such as login widgets, video, interactive elements, forms, etc. How and where will these appear? How important are they for functionality, usability and ‘stickiness’ — the ability to keep users on the site. Create a hierarchy of these objects.
This is another important feature of any site and one that you should start designing into the site from the first drawing. In this sense, accessibility is about the colours you use — do they provide sufficient contrast? — The fonts you use, — are they easily legible? Is the content going to be overshadowed by that great picture you want to use? Are the link methods you are planning to use accessible? Have you structured content correctly, — is data stored in a table and is the table accessible?
The fundamentals of these questions will be put into practice when you start building the site. Creating the foundation of that best practice now, will make life a lot easier further down the line.
Plan the site
You should also have a clear idea of the content that will appear on the site, how pages will fit together — which page will link to which? This will help you to develop your site structure and the overall site map. This is essential for a large site but is also really useful for a small site and will help you to start structuring your Search Engine Optimisation as a core part of the page design.
Do you want to see my sketches?
Before you start anything electronically, you should use pen and paper to sketch your ideas. This gives you the opportunity to see how they look, modify them and hone them without spending hours getting Fireworks, Photoshop, Illustrator, etc. displaying what you intended and finding it doesn’t work. It also gives you some rough concepts to present to your client and seek feedback. You should only start committing them to electronic form when you have some clear ideas on paper.
Sketching a design allows you to play with where elements of a page should go to maximise visitors’ attention and optimise use of the hotspots on the page. It also allows you to ensure that visual elements work together.
What do you get out of following a design process?
There are very clear benefits to working through a design process (no matter how basic). It gives you a structure to work to and elements on which to focus; so, rather than jumping in and getting it wrong, you are able to concentrate on making the design achieve the results it expects before dedicating time and your client’s money to a concept that simply won’t work. Furthermore, it will help you to explain your design process to your client.
At the end of this stage you should be presenting your final mock-ups to your client for approval and to decide on which design to follow. This is much easier if you are able to describe the process you have followed and explain the reason you have made the decisions you have made.
The next stage in the five step project management cycle is construction. If you have developed your design well, you should have:
- A site structure and site map
- An understanding of the back-end data structure
- An agreed design to carry forward
- An understanding of what content will be required
Google Analytics showing a spike in traffic
This post is about how to dramatically increase the readership on your blog overnight and is based on my recent experience with Redcentaur Blog. It involves some Search Engine Optimisation (SEO), some good timing and, let’s be honest, a huge dollop of luck.
Writing successful posts…
To set the scene, I need to tell you a very short story. I recently upgraded my blog installation from WordPress 2.7.1 to WordPress 2.8 and the process did not go very well. Completely baffled, I decided to tweet for help on Twitter, meanwhile re-reading the codec and the upgrade instructions. Eventually, I got the upgrade to take hold. You can read about my experiences of upgrading WordPress by viewing the post I wrote at the time.
When I looked at my twitter replies the following day, I noticed a response from one of my followers suggesting I post an entry about how I resolved the issues I had with WordPress. This is how the post came about. I wrote it quickly to get it out and help others who were experiencing problems with their own installations.
Search Engine Optimisation
When I wrote the post, I didn’t put much thought into the meta tags or excerpt, both of which I always include in my posts. On this occasion, I tweaked the first paragraph of the post to form the excerpt and put together some keywords based on the core of the post. I called the post ‘Upgrading to WordPress 2.8 – Don’t Panic!’
Subconsciously, by going against my usual instinct and not over-thinking the meta tags, I somehow managed to hit the core of the post.
By listening to my follower on Twitter and understanding the needs of people to find answers to the problems they were having, I managed to get the post on my site very quickly and it must have had some value for many people. I offered sound advice and help at a crucial time.
Later that evening, I checked my analytics for site activity and noticed an incredible spike in the hits my site had received. Further investigation showed that this was mainly a result of Google search results and Twitter referrals.
Looking at the search results that brought people to my site I noticed that all but a handful of the top 30 results were related to the WordPress installation post I had published a few hours previously.
Table of search results
I checked with Google search, using the keywords used by people visiting my site and found that I was ranked in second position, right below the WordPress codec itself.
Google ranking of the post
This has been a valuable lesson about the power of writing relevant and useful posts that people need. It has also taught me the true value of SEO when it is directly linked to the content of your page. For a post that was (let’s admit it) rushed, its value has been in helping others to overcome a problem. It was timely as I saw a need and answered that demand; and it involved a huge amount of luck thanks to the follower who suggested I write a post about my experiences.
WordPress can help small businesses
Which Content Management System (CMS) to use for small businesses that wants to update their website content? There are many options available for a small business and these may seem bewildering. In this post, I will give 7 reasons why WordPress is one of the best tools to support your small business website.
With WordPress installed on your hosting server, you remain in control of the site, its software and its content. You are not at the mercy of a third party being responsible for maintenance and upgrades; you have complete control. You can choose to manage the whole thing yourself, or you can pay someone to do the maintenance and upgrading for you, as necessary. You will need to make sure that your chosen web host is capable of supporting WordPress on their servers (most are).
If the standard setup does not do what you want it to do, there are masses of extensions to the functionality of the platform available as plugins. All that is needed is for them to be downloaded and activated and they are ready to use immediately. Plugins offer a huge amount of flexibility to your WordPress installation, making the functionality fairly bespoke depending on the plugins that you install.
If you have problems with your installation, there is a vast community of professionals who are able to assist, unlike other more specialist platforms, WordPress is built on PHP and MySQL, which are languages that are readily understood by many developers and other professionals. As WordPress, PHP and MySQL are open source platforms, there is a huge amount of information and support available as well as a very active and supportive WordPress community. If you have any problems or questions, you will find it fairly easy to get an answer (and no question is too trivial, believe me!).
As WordPress is open source and has a great community following, it offers flexibility and ease of use. Indeed, one of the biggest advantages of WordPress over other platforms is its user-friendliness: you don’t need to understand programming languages, PHP, HTML or MySQL to use it. You can just log in, click and type. Often, it is considered to be ‘only’ a blogging tool but its flexibility is astonishing at accomplishing many different tasks.
Open source and free
WordPress is built on an open source platform and is itself open source. It is free to use for any purpose (personal or commercial). This has to be a huge benefit for any small business or not-for-profit organisation with a limited budget. Also, it is simple to learn and it is quick to keep your site up to date and fresh, so resource use can be minimised and you won’t need to go on any expensive or time consuming courses.
SEO and Standards compliant
WordPress takes much of the pain out of ensuring your site is Search Engine friendly and automatically completes many of the tasks that have to be completed every time new content is added to a web site. It also ensures that new content is compliant with the latest web standards and that your site is accessible and visitor friendly (depending on the theme that is used to display your content). It does all of these essential things out of the box, allowing you to get on with running your business.
No coding necessary
Unlike some other platforms, you may never need to touch a line of code. All the HTML, CSS, PHP and MySQL takes place in the background, where it should be. You don’t need to be an expert in web technologies to use it, which leaves you time to ensure your content is great. With many websites and some other CMS platforms, you would need to have a knowledge of some coding to update, change or add to your existing content. With WordPress, this is not necessary, saving you time and money.
And finally, one more for luck…
You can easily make your web site look and feel the way you want it to with bespoke themes. A theme is a set of ‘templates’ that wrap around your content so that it looks the way you want it to look. Whether you have a brand identity, or an existing web site that you want to pull your blog into, you can theme your installation how you want. There are many existing themes available (some for free) if you want to use something off the shelf. But if you want something bespoke, you can easily get it designed and developed for you by a WordPress expert.
WordPress - how to have an error free upgrade
Yesterday I upgraded my WordPress 2.7.1 version to WordPress 2.8. I approached this with some considerable trepidation because I remember how easy it was a few weeks ago to install the blog for the first time. In my experience, anything that is easy to install is hard to upgrade! So, I took a cautious approach and I’m really relieved I did. If you are considering upgrading to WordPress 2.8 from earlier versions make sure you back up ALL your site files AND your database first.
Most people I have interacted with over the last 24 hours have had an easy time upgrading, but there is a significant group (me included) who have had problems. It is not clear why these problems have occurred – whether it is to do with hosting platforms or certain plugins. Here is what you can do to make your install as safe and easy as possible:
- BACKUP. Make sure you have complete back ups of your site files AND your database immediately before you start any upgrade process. This is essential in case anything goes wrong and you need to revert to your previous state. Store these files on a different server or on a local hard drive rather than on the server hosting your installed WordPress.
- DEACTIVATE all your plugins. There are some plugins that are incompatible with the new version of WordPress, or require further upgrade before they will work. Some plugins will cause either a complete failure of the upgrade, or may cause serious and catastrophic failures following the upgrade. Having them active during the install could cause conflicts. Do not take any risks with active plugins while you are upgrading.
- DO NOT USE AUTOMATIC UPGRADE. This does not work consistently on all hosting platforms and with all installed versions of the application. I seem to have problems with automatic upgrades for plugins and the WordPress application, as do many other people.
- DOWNLOAD the zip from WordPress.org http://wordpress.org/download/ to your local drive and unzip it.
- Use an FTP client to go to your remote server and DELETE
- wp-includes (except wp-includes/languages if you have an older version installed)
- wp-content/plugins/widgets (if you have this installed)
- All other files in the root EXCEPT those mentioned in 6 below.
UPLOAD each folder separately in the following order:
- wp-content/ (except those mentioned above in step 5.)
In your browser, go to www.yourblogdomain.com/wp-admin/
If asked to upgrade your database, click the button then log-in as normal
Identify any plugins that need to be upgraded, download them, delete them from your server in your FTP client, then upload the new files. Again, do not use the automatic update feature while upgrading, especially if it is unreliable on your system.
Activate each plugin one by one and test that the server continues to work. Some plugins cause a 500 Server Error sometime after they have been reactivated and this could be the next time you log in. If this happens, it is most likely to be a plugin error and it is best to activate plugins one by one over a period of time.
Any plugins that do not work (I have had problems with All-in-one-SEO and YARPP), delete from your server, delete from your local drive, download again and upload fresh copies, try again. If they still cause problems, you won’t be able to use them until they have been updated by the developer.
Check all of your SETTINGS.
Check that your blog posts are visible and showing.
- all the files in the root directory (except wp-config-sample.php)
When I first installed version 2.8, I followed the quick process and this resulted in not being able to identify the /wp-admin/ address; so I could not log into WordPress. This is when I followed the procedure above and managed to install a working version of the upgrade WordPress 2.8.
Since then, I have had problems with new versions of all-in-one-SEO, which will not activate and YARPP, which causes an ERROR 500 “Internal Server Error” on my server. I am hopeful that manual installs of fresh copies of these downloads will resolve these issues.
Interestingly, when I try login to my WordPress install, I sometimes get an ERROR 500 message and have to retry several times….
If you are having a similar problem with this or future versions of WordPress, try reading my update to this blog post.
Recently, I wrote a post posing the question, Is IE6 dead? I described how critical it is for web designers and clients to understand who is visiting their site. Only by analysing the statistics available for site traffic, or estimating it for new sites, is it possible to decide whether or not to cater for older technology. In this post, I will show you the ‘industry standard’ tool to use and show you what will be useful to you in making decisions about the development of your site.
There’s a range of analytics tools available. The current industry standard is Google Analytics. It is easy to set up and use and provides a fairly comprehensive data set from which information can be gathered.
Google develops constantly the tool to ensure it meets the requirements of web developers and other users. So, there is additional functionality available for ‘advanced users’, making it a flexible working tool for most web sites. This is the tool I use for analysing the traffic to my own websites and Redcentaur’s clients.
I regularly check the statistics for my sites using Google and it is through this analysis that I make decisions about how to develop my sites in the future. It is one of the first things that I ensure is in place when I am asked by a client to improve their sites; it shows me how visitors to the site are able to interact with it and can show where there are serious problems.
I think it might be useful to share some of the key findings from my own site with you to show how I might change my site as a result of these stats.
1. Browser use
The biggest question on people’s minds at the moment seems to be whether or not designers/developers should still spend time on workarounds for Internet Explorer 6. The position I have taken in previous posts is that the statistics for a particular site should tell you whether or not this is necessary: if a sizable proportion of site visitors are still using older browsers (which might be the case for a number of corporate, technological or age-related reasons,) then this should inform any decision about ditching support for these browsers.
My statistics for May 2009 shows some really interesting results. IE as a whole only catered for a total of 18% of visitors, whereas Firefox catered for a whopping 58%. Safari catered for 13% of visitors. I have little doubt that this is broadly related to the types of visitors that my site attracts, particularly this blog, which is suited to design and development / technology-aware individuals who are more likely to upgrade their browsers and to use current technology themselves. This is not likely to be the case for all of my clients’ sites, which is why it is important to relate decisions directly to the findings for the site in question.
Browser share for May 2009
Delving further into this shows that the majority of Firefox users were using the latest version of the browser (3.0.10); although there was some latent use of earlier versions. Of the Internet Explorer users, 15% of all visitors were using IE 7 and 3% IE 8. None of my visitors were using IE 6 during May 2009. Good news! If this persists, I would consider it reasonable to remove support for IE 6 as a browser from this particular site. I won’t base this decision on one month’s findings though (last month showed 9% of traffic used IE 6).
Browser versions used on Redcentaur May 2009
2. Screen resolutions
Screen resolution remains an issue, especially with mobile browser technology gaining ground and the likelihood that smaller screen resolutions will be used to access the site. My analytics shows that all my visitors are using large screen resolutions, which suggests I’m not currently getting mobile browsers or people using very small (old) screens. I may wish to look to improving mobile browser experience on my site in the future as this is a growing segment of my market that I appear to be losing.
Screen resolutions chart, May 2009
3. Flash versions
If your site uses flash, you can also gather information about the flash versions your visitors are using. This is useful when developing flash on your site. As my site does not currently use flash, this is not important for this site but it would be a useful dataset if I were asked to develop flash site for a client.
Flash versions used by visitors in May 2009
4. Java support
Google does tell you how many visitors had Java supported on their platform. In my case, 10% of visitors did not have Java supported, which is quite a significant number and might affect any applications I wished to develop in the future using this technology.
Java support in May 2009
5. Connection speeds
You might be forgiven for believing that today everyone uses broadband and therefore connection speed is not important. However, for a site that predominantly uses images or multimedia, this is still a factor to consider (and not all areas of the world have high-speed broadband connections). Other factors to bear in mind are that visitors who do have broadband may still have a throttled service, might be visiting on mobile devices using 2G or 3G bandwidth or may not want to use all of their bandwidth allocation downloading a page of your site.
May 2009 data suggests there are still a small percentage of visitors using dialup. Google was not able to identify the connection speed of 35% of visitors to my site, which means a larger proportion of visitors could be disadvantaged by bandwidth munching files or repeated requests to the server for additional files.
Visitor connection speeds May 2009
6. Country of origin
Something I always find fascinating is where visitors come from. Unsurprisingly, a large proportion of my site visitors come from the UK, USA and Europe. There are a number of visitors from other countries and this could lead me to think more about the number of conversions that are lost through not supporting native languages. Google provides further analysis on bounce rates (the number of people leaving the site on the first page) and time spent on site, which I have not covered here, and the language settings for the operating system. Together these figures could lead me to improve my site translation or to provide dedicated sites in the key languages.
Countries of origin May 2009
7. Sources of traffic
Analytics can aid understanding from where people have landed on your site. This provides a useful analysis for the value of ad campaigns, search results, link value, etc. My data shows that I have had a number of hits from Google organic searches (from search requests), from direct hits (typing the address into the browser), from social media, such as Twitter and LinkedIn and from other referrals, blogs and listings. This information is more useful when assessed in conjunction with other data to identify any parts of a site that visitors are landing on and bouncing from. Improvements should be targeted at these areas.
Traffic sources May 2009
A vast array of information can be obtained from simple data. This post just touches the surface of what you can gather about the usability of your site from your visitors. Check out Google Analytics for yourself and see what surprising information it can tell you.
There have been a number of blog posts covering Twitter background images. Most articles give general guidance on the dimensions of the background. Very few of them advise on where to place objects in the background. The reason for this is that the Twitter interface relies on the screen resolution of the viewer’s computer and it is difficult to optimise your Twitter background for all resolutions. This post gives some more guidance on how to develop your own Twitter background.
Why create a Twitter background?
A Twitter background gives you an opportunity to express yourself or your brand more effectively than the 160 character limit available in the bio. It is likely that more people will be interested in finding out about you if you express your personality or brand through your background image, which is an additional piece of screen real estate that offers you an opportunity to tell visitors about who you are.
While the Twitter background does not provide the ability to add hyperlinks, it does give you the opportunity to add URL text to the image, so that people can find your website. So, while they won’t be able to click on a link in your background image and be transported to your web site, they will be able to see your URL and type it into their browser’s address bar. You are also able to express, through text, images or graphics, what you are about.
Create your file in your favourite graphics software (I have used fireworks). You will be optimising the image for PNG, JPG or GIF format later. For now, you need to set the dimensions of the image: 1600px wide x 1200px tall, resolution 72 px/in. This size canvas will help to ensure that your background image does not tile and is big enough to cover most screen resolutions.
The most important areas should be marked out with guide lines. Drag guides to the following locations within your file:
- vertical guideline at 2px from the left edge;
- vertical guideline at 180px from the left edge;
- horizontal guideline at 14px from the top edge;
- horizontal guideline at 80px from the top edge;
- horizontal guideline at 649px from the top edge;
- vertical guideline at 950px from the left edge;
- vertical guideline at 1100px from the left edge.
Add rectangles of different colours to these divisions to give you a basic wireframe that looks like this:
Basic Twitter background wireframe
This grid defines the areas available to you to modify in blue. The black area is the background of your image and can be a gradient or solid fill, an image, etc. The areas in white and grey are used by the Twitter API and anything you put in these areas will be masked by or conflict with Twitter. Note: if you use the blue area on the right hand side of the Twitter API, be aware that this can expand and contract depending on the screen resolution, zoom level, text size and other settings of your visitors’ browsers. It can be partially or totally masked by the Twitter API, or fall off the right hand edge of the browser window at small screen resolutions. For this reason, it should only be used for secondary content.
You can use anything you wish as your background image or fill. This should tie in with your overall theme, your brand and with the Twitter API. Note, it may not be the best idea to use adult themed, explicit, violent or other content that could cause offense; remember, the idea is to encourage visitors to follow you or visit your web site!
Your content area on the left should be used for your important information, contact details (website address, blog address, etc) and logo.
The content area on the right should only be used for secondary, non-important information. You do not have to use this if you don’t want to and bear in mind the notes I made above about how this may be displaced.
Save and upload
When you have finished creating your masterpiece, optimise it as a gif, jpg or png graphic. Gif should be used for any image that uses block colours only, jpg should be used for detailed images and png can be used for either. Make sure it is no more than 800k in size, to meet Twitter’s requirements.
All you need to do now, is upload your finished background:
- Log in to your Twitter account;
- Go to Settings;
- Click on the Design tab;
- Click on the Change background image button;
- Enter the location of the image you just exported and upload it;
- Deselect the Tile background image checkbox, unless you want the image to tile;
- Click on Save changes.
That is all there is to it. You may need to make some slight adjustments to the image and re-upload it. This is normal as the image varies at different resolutions and is affected by the floating Twitter API.
Let me know
Use the comments form for this post to leave your twitter URL. That way, other visitors can check out what you have done. Please let me know how you get on with this How-to guide, and leave any other tips and tricks that you think might be useful.
Creative brief, building blocks of web development
This post is the second part of my 5 stages of project management series and covers the most important aspect of the first stage; writing a brief for a web design project.
Why is this important?
Web design projects are only ever successful if two things can be achieved at the same time:
- You provide your client with a site that fulfills the brief and they are satisfied with it; and
- You have correctly estimated the time it will take to complete the project and you have been adequately paid for the work you have done.
To achieve both of these, it is essential for you to have a clear understanding of what your client wants to achieve. One of the ways we do this at Redcentaur is to set out in a creative brief exactly what the client wants to get from their web site and the reasons for it. This helps us to identify the objectives of the site and to scope the work necessary.
Obviously, the completion of a creative brief is not the be-all-and-end-all of understanding your client and the goals of the web site. It is the starting point, from which there needs to be conversation and discussion to drill down into the responses to the brief.
There are two parts to a creative brief that are designed to give the web developer a clear understanding of the client, their needs, desires, strengths and weaknesses. Paying heed and due attention to the brief can pay dividends for both client and designer in reducing the risk of missing the mark at a later stage.
The creative brief
The key part of the brief is to understand the creative requirements of the client. This can be broken down into four sections. Remember, your client might not have a clear grasp of these expectations themselves. This section of the brief should help them to start pinning down some of these concepts if they haven’t already.
This section should give a general overview of the client and the project as they envisage it. It should state the purpose of the project from their perspective and identify any specific goals they have in mind.
Your client probably has a general idea of who the target audience is for their web site and this section provides you with an opportunity to identify the target market from the outset. By asking your client what they think the target audience is, what they care about and why they would visit the site, you are able to develop an in-depth understanding of your client’s aspirations and the factors that will measure the success of your web design.
In our experience, this is one of the most difficult factors to obtain from a client. Often clients do not have a clear idea of their message or how that message should be conveyed. This section is about what it is your client wants to say to their target audience and why it is important for that audience to see this message. This section may help the client to start defining this message.
In an age when the internet has brought huge amounts of information to every audience, competitive edge is king. You need to be clear on the things that set your client apart from the rest and what factors make your client a success where others in their field are not. This will help you to identify the key strengths of your client that will need to be the focus of the design.
The technical brief
The client may have an idea of the technical aspects of the site that need to be delivered. These can be as fundamental as site logos and photography, copy, contact forms, etc. or more technical issues, such as database integration. The technical brief should be tailored to the services that you are able to provide. This is a secondary part to the brief as much of the technical specification will be a result of the design as it develops, but it is important here to understand if the client has decided the site will form the backbone of its customer relationship management, for example.
Roles and responsibilities
Once you have some answers to these questions, you can start to flesh out what are the roles and responsibilities within the project — who will provide the site images, who will provide the copy…?
It is important to have an understanding of this so that you can accurately estimate the time required to complete the design — if you suddenly find that the client does not have suitable photography, you will have to spend time either getting the photographs or sourcing them; a cost that you may not have factored into your quote.
Once you are clear on the scope of the web site and have a clear brief, you can move on to the Design Phase.
Please leave a comment below to let us know how useful this is to you. Are there other aspects that you feel have not been tackled in our brief? Is this something you don’t find useful? How do you understand your client’s expectations?