Web Design Tips for Presenting Text on Your Web Page

There are thousands of articles on writing copy for websites and ten times that number that discuss the various aspects of the art of web design, but very few zero on in on best practise for laying text out on your web page and marrying that to your web design. How you display your text on your web page can be as important as what text to put on your web page and is an important element of web design.

This group of tweets mostly discusses best practice for presenting your text on the page. Some of the tweets talk more specifically about which are the best words to write (the skill of copywriting) but this article is going to concentrate on the presentation of text within your website design over which text to write.

The Web Design Tips Tweets

Web Design Tip 37: Break up paragraphs of text with bullet points Large blocks of text look daunting when your users land on your web page

Web Design Tip 38: Relevant photographs can also help to break up blocks of text and give a visual clue to a visitor when they land.

Breaking up blocks of text on your page makes it look more appealing to your website’s visitors. When you land on a web page you generally skim before you read. You want to make sure that this is the right web page before you put your time into it (given the billions of webpages out there, there’s a chance that this is not the web page for you).

Bullet points not only make the page look a bit more friendly but also allow your users to latch on to section of relevant text and digest it quickly. If it is what they were hoping for then there is a better chance they will take the time to read the rest of the information on your website.

Pictures also break up a page and gives a visual clue that the visitor is in the right place during that valuable ‘first eight seconds’ when your website visitor decides if they are in the right place or not.

Breaking up Paragraphs on Your Wesite

Web Design Tip 39: Use Bold Text on the pages keywords. This gives a quick visual clue to the visitor and it breaks up blocks of text

Web Design Tip 40: In Text Links work in the same way as bold text but they lead away to relevant supporting pages

Re Web Design Tip 40: Again, search engines take your link as a clue to the nature of your page and the one you’re linking too

Re Web Design Tip 40: Bold text and in text links all make up the rich tapestry of visitor experience & SEO

Bold Text in a paragraph helps words that are key to the theme of the page stand out and offer another all important quick clue to the visitor as they arrive on your web page. Bold text also gives a clue to search engines. This tip can only be used very sparingly though. Short phrases and only once or twice throughout the page.

In text links can be used a little more liberally than bold text. Links will firstly stand out and, assuming the text you are using for your link is relevant to the theme of your web page, will give another important clue to you and Google.

Bear in mind that links need to link to something (duh!) and may take the user away from your page. Ideally you will be linking to another page on your own website that will give the user an opportunity to find out more about a specific topic.

Also remember that all links form a new branch in the path of a customer’s journey and we want all journeys to end with a sale or a contact.

Quiet Week in Staffordshire Next Week

The Staffordshire Web Design Team are taking a break next week, so the tips will be taking a break too but there will hopefully be another tips article. If not we will have to redouble our efforts the week after. Bear with us, its been a busy couple of weeks and even web designers need to cool their jets and recharge their batteries (if I may mix my metaphors there a bit)

Staffordshire Web Designer Viewpoint: The Double Edged Sword of Being Busy

What a couple of weeks it’s been at Web Design Staffordshire HQ.

A large number of new customers joining the Rake Mark Web Design family, an explosion in enquiries and a major project deadline looming. The deadline was yesterday. We met it. Last night we celebrated. This morning I woke with a slightly fuzzy head.

The point of this blog is just to let anyone know if they have been waiting for a response since late last week that,
1. I have spent today getting up to date with all my correspondence and open help desk tickets so you should now have been contacted and your query looked into. If you haven’t then you need to call in.

2. I’m sorry.

Sincerely I am so sorry. I have been essentially locked in a cupboard for the last week and a half. I haven’t taken many calls and I haven’t written many emails. I did take a few hours off on Sunday (snooze in the back garden listening to Test Match Special) but apart from that it’s been all hands to the pumps.

And this is the double edged sword of running your own business, where 16 hour days are not uncommon. If you’re quiet then you wish you were busy and if you are going a bit mental working all hours you start to dream of Sunday morning lie ins and having just a few minutes more looking after your current customers.

Getting Back to Normal At Staffordshire Web Design!

So I haven’t written a blog, haven’t posted in Facebook and went through over 30 comments on the blog today. So if you were wondering why you hadn’t received a response to a blog comment then now you know. New web design blogs will now be written, tweet web design tips will continue and Facebook updates shall be entered.

Next week we’re taking a breather, looking forward to the (very) long jubilee weekend and coming back ready for the orders we still have to fulfil.

Web Design Tip Wash Up: Optimising Your Website for Different Screen Sizes

Screen sizes are as diverse as the resolutions that your website visitors will use on them. There is no standard screen size or standard screen resolution for you to work to. Your website and your website design simply has to work with them all. Sorry.

This kind of nutty issue is where your professional web developer separates themselves from the hobby web designers and really earns their corn. When your home made website breaks on certain screens and you don’t know how to fix it, then this is when you might wish you had just paid that little bit more and gone with a pro.

The Screen Size & Resolution Web Design Tweets

Web Design Tip 34: Web pages that scroll from side to side are really hard to use. Keep things user friendly & easy to use, no side scroll

Web Design Tip 35: Test your website in different screen resolutions a wide screen monitor may not have side scroll but other screens may do

Re: Web Design Tip 35: Even monitors of the same size can have different screen resolutions, more in the blog #webdesign Staffordshire

Web Design Tip 36: Generally speaking Rake Mark develop websites to be about 1000 pixels wide and never more than 1024 pixels wide.

Re: Screen width for websites, some users will still have the old 600×800 resolution, but not many, so you can go for 1000 wide, more coming in the blog

Screen Size & Resolution: The Wash-Up

Along with the tweets I’m trying hard to keep up and offer some extra information in a blog that can expand on the 140 character limit that the web design tips tweets has. This follow up blog had become affectionately known around the office as ‘The wash up’.

The trickiest thing about developing a website for different screen sizes is that you really have no idea what screen size your website will be viewed on or what resolution your website visitor will set their screen resolution to. Rather conveniently this also translates into the simplest thing about web design. You know that there is a very large combination of screens and resolutions (especially when you include the explosion of browsing on phones and tables) so you have to make sure your website works on all of them.

This ‘design once and work everywhere’ (even on all mobile devices) is called ‘Responsive Web Design’. These tweet blogs are really aimed at non-pro web designers and so it’s really not the forum for a full tutorial on responsive web design (and web design is Sarah’s area of expertise anyway, I’m not the man to help you with that).

What I can give you is some simple web design advice that all designers, pro, hobby, inhouse or dabbler, can follow.

The most important thing is testing. Once you have completed your web design, test it. Change the screen resolution of your monitor. Change the size of your browser window and check that your new website scales nicely at different sizes as you expand and collapse your browser window.

If your website isn’t ‘fully responsive’ then at some point it will ‘break’ and have a side to side scroll. It is really important that you don’t have this side scroll at a resolution below 1024 pixels wide. Very few of your web visitors will have a lower screen resolution, so its OK to trade off a lower web browsing for 1-2% of your website visitors for the increased experience of greater screen real estate for the 99% majority.

More Web Design Tips: Responsive Web Design Next?

As I have been writing this from the office (with the sun gently warming the Staffordshire Web Design HQ) I am thinking that we need to put some articles up on Responsive Web Design. This trend began to emerge late last year / early this year and I blogged about it as one on the trends we had noticed. So I’ll have to nag Sarah to put down her mouse and start writing up some good information for you on responsive web design.

Don’t forget to follow us on the Web Design Staffordshire Twitter Feed and keep checking in on the blog for the latest web design tips wash up article.

IE9 Use Rises At Weekends: Surprising New Web Browser Stats Out

New research released by StatCounter shows that it is not only Google Chrome that gains a bump in usage figures at the weekend, but the IE9 Web Browser gets its own bump on Saturdays and Sundays. The firm’s research arm StatCounter Global Stats reports that, while total IE usage dips, IE9 usage peaks at weekends.

StatCounter CEO, Aodhan Cullen said, “We have previously noted that Google’s Chrome peaks at the weekend at the expense of IE. This seems to suggest that many home (as opposed to business) users prefer Chrome to IE.”

Although Chrome has climbed steadily in popularity with web browser users it seems that IE9 is joining the club by also rising in popularity, at the expense of older versions of IE, when users can choose the browser they get to use.

“This shows that while IE6, 7 and 8 usage falls off at the weekend, IE9 spikes.” Aodhan Cullen said.

Some organisations, especially government and NHS departments often still insist on using the older IE6 web browser, leaving both Chrome and IE9 unused in those workplaces. Also, Windows XP is unable to utilise the newer IE9 web browser.

Viewpoint: Staffordshire Web Designers Perspective

Philip Brassington, Director at Staffordshire Web Design firm, Rake Mark Web Design, has written in the past how his love of all things Microsoft, including Internet Explorer ended with Internet Explorer 8 (IE8).

“I had a night of crashes and problems, total productivity loss and web design deadlines looming, so I had to look to alternatives” he said.

He moved to Firefox and loved the transition. For a while.

“As the versions of Firefox rotated through I found that with one particular version my PC started to slow up after an hour or two and when I looked in task manager I could see that Firefox was using a huge amount of available memory, which meant I had to close and reopen the browser to free up the memory and start again. More productivity loss.” said Mr Brassington

Having already ditched IE Philip Brassington installed the Chrome web browser.

“Getting started with Chrome was not simple. It wasn’t intuitive to use at all, different to IE and Firefox web browsers.”

The Chrome web browser takes its own approach to web browsing, doing away with some conventions and making the whole browser experience more like using the Google search engine. This new approach comes without baggage seems to be working well.

However, Mr Brassington has found recently that Chrome has started to eat into large chunks of memory and also sometimes needs to be closed down and then opened again, promting a return to IE, specifically IE9

“From a user perspective. IE9 is modeled on Chrome. It also runs far better than the older versions of IE. I still predominantly use Chrome but I don’t get a feeling of dread in the pit of my stomach when I choose to open Internet Explorer”

Philip Brassington is a director and technical lead at Rake Mark Web Design Staffordshire. He lives and works in the county town of Staffordshire, which is Stafford, with his fellow director and wife, their three kids and their rabbit, flopsy.

Web Browser Wars Hot Up as Chrome is King For a Day

According to StatCounter, a free web analytics and web research firm, Google’s Chrome web browser was the world’s most popular web browser, but only for one day. StatCounter’s research arm, StatCounter Global Stats, on Sunday 18 March 2012 Chrome was the most popular browser in India, Russia and Brazil which gave it worldwide number one status worldwide.

Web designers and interested web industry insiders are following the most recent round of browser wars with keen interest. Aodhan Cullen, CEO of StatCounter commented on the achievement saying, “While it is only one day, this is a milestone,”

Most web industry watchers agree that although Chrome is rising in popularity it still faces an uphill battle to take the number one spot permanently. The global gap between IE and Chrome is narrowing but Chrome is firmly in second or third place in China, United States and Germany.

Mr Cullan noted an interesting trend is the weekend upsurge in Chrome web browser use. He attributes this to users being away from the workplace and having a free choice of which web browser to use.

“The trend towards Chrome usage at weekends is undeniable. At weekends, when people are free to choose what browser to use, many of them are selecting Chrome in preference to IE,” he said.

StatCounter data is based on over 15 billion page views per month (4 billion from the US) to the StatCounter network of more than three million websites.

From the Desk of a Staffordshire Web Designer: Viewpoint

Philip Brassington, director at Staffordshire web design firm Rake Mark Web Design, wrote of the issues with IE8 and his subsequent move to Firefox over a year ago. At this time Firefox was still battling as the established number 2 web browser and Google Chrome was a new browser struggling for share.

Over the last few months he started to have memory issues with Firefox and having already ditched IE installed the Chrome web browser.

“Getting started with Chrome was not simple. It wasn’t intuitive to use at all, different to IE and Firefox web browsers.”

The Chrome web browsers seems to be taking a fresh look at using a web browser and rather than following certain web browser conventions, decided to re-invent the wheel, or in this case, the web browser. This fresh look without baggage seems to be working and word has spread with steady increase in the uptake of Chrome over the last 12 months.

“Chrome being a king for a day doesn’t surprise me at all. Once you get used to it Chrome is a massive improvement on other browsers and seems to be the model that IE9 is following. Whilst IE9 is a huge improvement on IE8, I’m now fully adopted to Chrome and there is no reason to move back”

Web Design Tips to Power Up Your Contact Forms

As the Rake Mark Web Design Tips series continues so do the web design blogs that expand on the web design tweets and help to fill in any gaps that 140 characters via the Rake Mark Twitter Feed doesn’t allow.

These five web design tips tweets were aimed at helping website owners and website designers make the most out of their contact forms, so this is a shorter web design blog article but all regarding powering up your contact forms specifically.

Holding Personal Data? You Need a Website Privacy Policy

Web Design Tip 29: If you are going to ask for personal information via a sign up or contact form, then you need a privacy policy

Since I’m a web developer in Staffordshire and not a legal expert I can’t advise on the specifics of a website privacy policy. I can tell you that there are widely available boilerplate website privacy policy documents where you can ‘fill in the blanks’. We have one that is licensed to Rake Mark and for our clients and this is included in our legal document package in our web design packages.

Of course you could just find a website with a privacy policy and substitute pertinent information with your company details. The Google website privacy policy used to be very popular for this, I don’t know if it still is.

Required Fields Can Do More Harm Than Good

Web Design Tip 30: Keep contact and sign-up forms simple with the information you need. The same goes for required fields, try not to insist

Web Design Tip 31: On contact forms, required fields can annoy your website visitors. If you don’t absolutely need their phone number, ask but don’t insist

Required fields are the fields on a form that the website designer says you have to fill in and can be one of the most annoying things about contact forms. If you want a quick answer to a question about rabbit food then do you really need my address? Of course not. So if you would like the address then ask for it but don’t require that field on a contact form.

Your contact forms require a way for you to get in touch with the person asking the question (email usually but a phone number will also serve) and then the enquiry itself. That’s all. End of. A name is nice, but not needed, its not required.

Lots of required fields will increase your ‘abandon rate’ on forms, website visitors just won’t fill them in, they’ll leave your web page or website instead.

Website Form Validation: Handle with Care

Web Design Tip 32: Another contact forms tip, keep validation to a minimum. Not everyone will agree that a postcode has to have your exact format

Web Design Tip 33: Another contact forms tip, keep validation to a minimum. Some people want to put in brackets & spaces when entering their phone number

Web Form validation is using computerised rules to make sure that the information that a web visitor enters makes sense. So your web designer might say that the phone number box can only be filled with numbers or that a postcode box should be filled in a set format.

The issue with this can be that your visitors might not take the same view as you regarding a phone number only being numbers. I always enter my phone number with gaps, so the number for the web design staffordshire offices would be 01785 256 222. This isn’t just numbers (it has space characters in it) and would be rejected. The same would be true if I bracketed the area code.

Website Contact Forms: The Golden Rule is Keep It Simple

It is essential that you keep any web forms on your website as simple a possible. You want your visitors to fill these in to sign up to newsletters, to ask you questions and to engage. Requiring extra information and making them difficult to fill in with unnecessary validation will turn your web visitors off and send them running into the arms of your competitors.

Keep up to date with the Web Design Staffordshire team by following the Rake Mark Twitter Feed.

Social Networking Site LinkedIn Announces SlideShare Acquisition

The largest business network on the Internet with more than 161 worldwide members, LinkedIn, has confirmed its agreement to purchase the professional content sharing community SlideShare for $119m (£74m).

SlideShare allows for the online creation and hosting of presentations, videos and PDFs, and having launched in 2006, now has 29 million unique monthly users. LinkedIn, meanwhile, can attribute its success to the popularity of social media sites such as Facebook, although whereas the latter focuses on connections between real and random ‘friends’, LinkedIn places the emphasis squarely on professional networking.

The result is that the site has become a key resource for ambitious professionals with an interest in making new business connections or acquiring new staff, with recruiters and service providers having also made use of the site to engage in transglobal headhunting and directly contact top CEOs with Internet marketing content.

Social Networking Site, LinkedIn announced on May 3 that the SlideShare purchase would cost it $119m in cash and stocks, with an approximately 45%/55% split. It added that the acquisition “perfectly” aligned with LinkedIn’s mission, with plans already afoot for SlideShare to be integrated into the network’s core site. LinkedIn stated that this integration would allow professionals to access tools enabling them to create and share work online, which would also make the site significantly more attractive to new users.

SlideShare and LinkedIn CEO Statements

Jeff Weiner, LinkedIn’s CEO, said that presentations played an instrumental role in shaping professional identity, being one of the main ways in which professionals captured and shared their knowledge and experience. He added that these professionals were able to increase their career productivity and success by using such presentations to discover connections and make new insights.

CEO at SlideShare, Rashmi Sinha, stated that SlideShare had been built so that professionals could “share presentations and connect people through content.” Describing the link-up with LinkedIn as “the most natural extension of this vision”, he expressed excitement “about what we can build together”.

In a blog post on the SlideShare website, Sinha elaborated further on the deal, saying that it had become “clear how great the fit is” between the companies as a result of past collaborations, including work on a LinkedIn developer platform. He also took the opportunity to reassure SlideShare users that their service would not “go away” as a result of the acquisition, as well as that he would continue to run the company.

It meant, he told users, that the site would “remain a place where you can continue to upload, share and find presentations that help you grow professionally,” adding that the LinkedIn relationship would allow the site to “grow faster” as the team continued to “develop new features and make the site even better.”

Have you switched to the ‘Timeline Side’

It has been almost 8 months since Facebook’s Mark Zuckerberg announced that they Social Media Facebook Website Design was being updated and they would soon be rolling out the redesign for all developer’s (at the time in beta) but users could also sign up if they wanted. Since then a lot of users (business and non-business) have been forced over to the updated ‘timeline’ version.

The design at the time was said to be “more nicely designed” and included the tile affect that was thought to make organization, archive and keeping up-to-date with friend recent activity even easier. Released at the same time was the “Cover” which in brief is the Large Image that you are given the opportunity to upload that is designed the assist in the individuality profile that Zuckerberg seems to be striving for.

Since then there has been much talk of likes, dislikes and quite a bit of reluctance to switch over so much so that I still know a few (and I mean 2 or 3 that’s all that is left) that have not been forced to the “Timeline Side”

Talking to our clients and friends we have found that some just simply don’t like change (what was wrong with the way it was before), some worry about the security and the mandatory, automatic ‘opt-in’ feature that the new Facebook Website Timeline has and some don’t like the “re-jigging” and left/right column switches that goes on.

According to a Mashable survey done at the beginning of 2012 “79% of more than 1,500 voters wish that Facebook Timeline were optional.”

We think that this figure has most likely altered over the last few months, so we have decided to do our own survey and actually see what you guys think now.

We have popped a Facebook Poll up, go vote and let us know what you think, we’d love to know.

More Web Design Tips For Quick Wins on Your Website

Another installment based on the web design tips tweets that we put out most days at 10am on our twitter feed. If you have just stumbled onto this web design article then this is aimed at all website owners who manage their own site rather than employ a web designer or web marketer to manage it for them.

The tips are designed to provide a quick win for the website owner who can apply the principle in the tweet simply and in short measure. The follow up blog post or ‘wash-up’ as they are becoming known is designed to flesh out any information that was difficult to put into the 140 character twitter limit.

One final twist in the web design tips series is that I am trying to group tweets together into relevant web design groups so that readers get a number of web design tweets on managing content or using visual clues as a group, and then the washup will discuss that group of tweets.

This means that the number of web design tweets in each article won’t be the same for each one. Previously I had imagined that I would add the tweets into web design ‘wash-up’ articles in groups of ten, but this seems unnecessary. This article contains web design tweets 21 to 28

Tweets on Managing and Updating Content on your Website

Web Design Tip 21: Will you need to update your pages in the future? If you will find out the cost of this with your designer before you start your project.

Web Design Tip 22: If you need to update your own web pages regularly then a Content Managed Website will allow you to do this yourself

Web design Tip 23: Do you need to add new pages to your website? Again, there is a cost to this, so find out before you start off

Web Design Tip 24: Some content managed sites allow adding pages.

Most websites grow over time. Your users will expect to see new content, perhaps blog articles or news stories. You may find your product range changes or grows. So decide with your web designer in the early stages of your web design project how you will add new pages and what the cost for this will be.

If you want to add lots of new pages for blog or news articles then you will probably need to add these yourself. Discuss different blogging software, ask for a demo and make sure you are happy using it.

Selecting Your Content Management System

Web Design Tip 25: Some Content Managed Websites (CMS) are easy to use. Some, not so much. Check you are happy using yours before you start the project.

Web Design Tip 26: Unsure about how easy your CMS website will be to use? Ask for a demo of the web design package before you start

There are so many content management systems on the market that it can be difficult to know which one to use. Some web designers only like to support their favourite CMS and not any others. The issue for you might be that the CMS they want you to use is great for web designers but overly complicated for you to use.

If you need to add or edit pages regularly then make sure that you can both do this in a cost effective way and on a simple content managed system that you can use easily.

Getting Your Web Content Where it will be Noticed

Web Design Tip 27: Important information needs to be ‘above the fold’ This is the area of the screen that you see without scrolling

re: Web Design Tip 27, ‘the fold’ is a newspaper term. Imagine your newspaper on your lap folded halfway. The top half is above the fold

re: re: Web Design Tip 27. In the newspaper, advertising ‘above the fold’ is more expensive than that below the fold because it is more prominent.

Web Design Tip 28: Information ‘above the fold’ on your monitor may be different to that of others. Check your website in resolution 1024×768

When a web page loads the area that is first displayed is known in marketing circles as the area that is ‘above the fold’. This information is viewed by the user without any further interaction by them and therefore the area information ‘above the fold’ is the most viewed area of a web page.

It naturally follows then that the area ‘above the fold’ should contain the most important information on the page. Don’t waste this valuable web real estate, make sure that the key benefits are there with a call to action for the user, don’t make them scroll down to find out why they should be contacting you or buying your products.

Follow the Web Design Tips Series

The Rake Mark web design tips series continues on the Rake Mark twitter feed. Follow Rake Mark and join the thousand odd others who get their web design tips daily at 10am. Our follower numbers are growing all the time, thanks to those who follow.

You can also find out more about the Rake Mark’s new Email Marketing product by following the Rake Mail twitter feed…

Small Businesses – So you’re using Facebook in your Social Media Mix

Last week we did a very brief outline of what, as a small business, you might use in the way of Social Media Marketing.
This topic is quite wide so we are going to chop it into bite size pieces so that it is easier to follow. This article we are going to cover the use of Facebook Business Pages.

Right to start with every Facebook business page needs to be set up from a personal/individual account. Now this doesn’t have to be the account you post all you family pics too, if you already have an account that is, in fact we would recommend that it isn’t (remembering to keep private and business very separate) so set up an account using a different email address and password and use this as “the Business Facebook Account”. Go to www facebook.com and set up a new account.

Ok, so you have your new/separate account set up and you’re logged in. Go to the very bottom of the page and you will see along the base of the page a link that says “Create a Page”, click on the link and follow the wizard answering all the relevant questions (remembering to use your business details).
For now it’s probably best if you ‘skip’ adding details when prompted (we will do that later).

Adding a Profile Picture

Upload and Good Quality (not blurred) image that is easily recognisable in a few seconds. It should remain constant throughout you Social Media activity, Blogging, twitter etc. maybe a slight variant on your original logo if required or maybe your main logo but be consistent. The size should be approx. 200 x 185 pixels – the visible area is 176px wide so make sure you leave reasonable border around your image.

Adding a Cover Picture

The cover picture should be 815 x 315 pixels in size and should take into consideration the bottom left corner being the placement of your Facebook Profile picture (this sits on top of you cover picture) Don’t make it anything too busy, but memorable and informative with reassurance that your visitor has come to the correct page.

Add General Profile information

The more information that you can provide for your followers the better, Hover over the section that you wish to update and an “Edit” box will appear. Update your company information and times and then it just a matter of adding updates, photos, posts and of course now you have put so much effort into setting it up promoting your Facebook page to ensure you get plenty of “likes” and good feedback.

Good Luck and Happy Facebook-ing …. Oh and don’t forget to pop along to Rake Mark’s Web Design Facebook page and click ”Like”