Domain names are vital to how the web works and we use them each and every time we visit websites, but what are they and how do you choose one?

To understand what a domain name is and why they are important we need to look at how the world wide web works, a simple website is made up of a set of files (text, images, sound etc) that are stored on a web server which is a computer connected to the internet with the specific job of hosting websites. Each web server has a specific address called an IP address, these are unique to each server on the internet and let users connect to a specific web server.

These IP addresses are like post codes each one is a way of refering to a unique web server on the internet, take this website for example the ip address of google.co.uk is 74.125.224.151 if you type this IP address into your browser it will load the website (give it a try and see). The problem with IP addresses is they are not very friendly, easy to remember or descriptive of the content that’s on the website, the solution to this problem is domain names. A domain name is a user friendly way of referring to the web servers IP address by giving it a name.

When a user types in a domain name it will be used to look up the IP address of the web server so that the user can connect to the website, there are some limitations to the content of domain names but all in all they are allot more user friendly then IP addresses.

How to select a domain name

Now we know what a URL is next we will look at how to chose one, domain names should be easy to read and remember so it’s best to go with something short and recognizable such as your name (eg. Alex-Wells.co.uk) or something that describes who you are what you do or your product (eg. AirportTaxis.com or BirthdayCards.net)

It will Benefit your SEO strategy if you choose a domain name with some keywords in it as google will give you points for it, for example the domain name usedcars.com will get extra points for the search term ‘used cars’ but it’s a balancing act stuffing lots of words into your domain name will make it hard to read & understand and on top of that google will detect you are trying to stuff lots of keywords into your site and you will lose any SEO points.

Once you have chosen the domain name you want you will need to select an extension, this is the bit at the end for example the .com or the .co.uk

Which one you choose is upto you (check out the possibilities and their intended uses here) but if you are a UK company a .co.uk would be best followed by a .com as these are the two that people are used to seeing and using, if they are already taken you could opt for having a .net but failing that I would suggest thinking of something new.

There are several websites that will let you search for domain names and register them for you, I use www.123-reg.co.uk to register domains but prefer Heart Internet’s domain search

If both the .com and the .co.uk domains are available I would suggest registering both to ensure no one else can.

http://designbeep.com/2012/04/24/importance-of-color-in-web-design14-useful-free-pdf-ebooks-for-web-designers/

if you get chance to read and find them useful let me know.

With more and more users wanting to update the content of their websites themselves there has been an increase in the number of Content Management Systems (CMS) available for web developers to use, but with so many available which one should you use?

In this post we will look over the top 3 freely available CMSs that are in use today so that you can ensure your website is powered by a system that is not only secure but also maintained and updated. Whats the main benefit of using a popular publicly maintained CMS? Using one will mean that any security threats identified will be patched in the next version of the CMS all you need to do is ensure you keep it updated which with the modern systems is easily done in a few seconds via the admin area.

Using a popular CMS means that if you need to find a new web developer or move creative agency you will be able to find someone else who will be able to update the website, you wont get this flexibility with a bespoke CMS. It also means that you wont be left with an out of date system if for example your web team decide to stop supporting your CMS as the system is maintained by volunteers contributing to the open source code. This coupled with the fact that thousands and thousands of websites around the world are using any one of these CMSs means that there will always be someone willing to update the system as there is money to be made in maintaining open source code (for example wordpress.org which is free to use is maintained by wordpress.com a commercial version).

WordPress

Lets start by looking at the most popular CMS around, WordPress is used by 16.4% of websites (source) and out of websites that use a CMS 54.2% are powered by this open source CMS. Moving forward 22 out of every 100 new active domains in the US are running WordPress (source) shows that WordPress is here to stay.

There are 2 versions of WordPress the first is their commercial outfit using the software to provide users with blogs at wordpress.com – users can sign up for a free blog but need to pay for extras such as a custom URL (domain name) or for storage space.

the second version of WordPress is the open source CMS which is the same ‘software’ as the .com version however it has all of the features enabled such as custom themes and the ability to install widgets making it a much more powerful CMS. This version requires you have your own website hosting set up which supports PHP and also needs a MySQL database. If you are not sure check with your website host as many like http://www.heartinternet.co.uk/ not only offer WordPress support but include a simple to use installer that means you can have WordPress up and running in a matter of seconds.

The best thing about WordPress is how popular it is, this means that there are thousands of themes and plugins available to extend your website quickly and easily, take a look at the WordPress.org theme gallery for some of the freely available themes you could install on your website. Not all website projects will be suitable for out of the box themes but the amazing thing about WordPress is anyone can create their own theme or even edit an existing one which means that if you cant find what you are looking for you can built a perfect bespoke theme to meet any of your needs.

With a theme in place the next thing to look at is the plugins available, head over to the WordPress.org plugin directory to search through thousands of free plugins containing all of the functionality you could need, from social media plugins to shops it has everything. Just like the themes anyone who knows how to code in PHP / HTML / CSS will be able to create their own plugins to ensure the website has the features it needs to meet the clients needs.

Another thing worth mentioning is the admin area of WordPress is very intuitive and easy to use which is why its my CMS of choice.

Joomla

Joomla is another vastly popular CMS that has been written in PHP and since version 1.6 it is using object oriented programming bringing it right up to date with modern programming standards.In march 2012 Joomla reached a milestone with over 30 Million downloads! this hugely popular CMS is used by websites around the world including several governments showing that it is more then capable. You can get Joomla via their offical webiste www.joomla.org or instal it via Heart Internets one click install. Joomla has themes available as well as having a large extension library

Want to know more about creating themes, extensions? or just about setting up and using a website CMS based on Joomla take a look at their extensive documentation http://docs.joomla.org/ and forum.

Drupal

Next up we have Drupal another freely avaliable open source CMS that has been built on PHP, sold as the perfect CMS for large websites it is more then capable of running websites with a single page to websites featuring a vast database of information.

Drupal can be extended with pre made extensions (more information) and you can even make your own extensions and release them for other peoples to use. Drupal websites can also make use of free themes – use the offical search feature to locate themes just watch out for which version of drupal you are using.

Drupal offer links to developers that have contributed to the project which means if your project needs help you can turn to people who know their stuff via Drupal training dont forget to check out the online forums and documentation for help if you need it.

Wireframes have been around for years and chances are you have been creating them for all sorts of projects – not just web / website related ones. It is essentially a name given to the process of drawing out rough sketches of what the website will look like, so all of those pencil sketches you have been doing when thinking about your website, poster, business card etc could be classed as Wireframes.

There are varying levels of wireframes from the simple diagram showing how many columns the website will have to the complex coloured designs that overlaps with fully fledged website design, however as a tool the middle ground provides the most benefit to the project team. This method of representing the design in its simplistic form enables the whole project team to review the structure of the page and make changes quickly as the changes can be implemented in a fraction of the time required to adjust a full website design. It also enables members of the team who have a good understanding of the project but not design to produce a visual guide for the designer to work from – this could be the client who wants to define the structure of the site before paying for a full design or a web developer ensuring the website has a sound SEO strategy in place.

The speed at which the design can be reworked means the project team can create an initial wireframe of the site which is submitted for review by the internal project team or even the client to gain feedback, with the results the wireframe can be updated to address the feedback. If you are familiar with Agile Programming wireframes allow the same methodology to be applied to the design process.

Looking past clients changes wireframes give the website developer input on the design ensuring that it is functional and works with the sites SEO strategy, it also means that all elements on the page go through a review process so ‘design’ features that look good but add several hours of additional development time can be removed to make the project more streamlined.

 What tool should you use to create a website wireframe?

While it is possible to use software you already know (word, powerpoint and photoshop for example) there are some dedicated wireframing tools available, my favourite is Pencil which is a free program that runs on Mac, Windows and even Linux it is also available as a firefox plugin. I would suggest downloading the independent program so that it is not affected by Firefox updates.

Being free and available on all the major platforms it is the perfect tool to aid the creation of wireframes by the creative team as all members of the team (and even the client!) will be able to edit the wireframes if required.

Example of the Pencil interface

Resources

33 Great Examples of Web Design Sketches – some really nice examples of hand drawn wireframes showing that you dont need to use a computer to achieve good results!

1

<?php echo get_num_queries(); ?> queries in <?php timer_stop(1); ?> seconds.

this will let you identify wordpress websites that are under performing and help you locate and correct the code thats causing the errors.

source:

http://www.wpbeginner.com/wp-tutorials/how-to-show-number-of-queries-and-page-load-time-in-wordpress/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+wpbeginner+%28WordPress+for+Beginners%29&utm_content=Google+Reader

1

add_filter('widget_text', 'do_shortcode');

add the code to your functions.php in your themes folder

source:

http://www.wprecipes.com/how-to-add-shortcodes-in-sidebar-widgets

M11 Business Link is a property website I worked on while working as a website developer at Simpsons Creative, the project was to show the benefits of the office development located close to Bishops Stortford.

The website project involved updating the old M11 Business Link website to the new design created by the in house design team at Simpsons Creative, the website was also updated with a bespoke web app ensuring that mobile visitors to the website are able to view the site in a style that suits their needs.

The mobile version of the website has been built using HTML, CSS, PHP and JQuery.

To View the web app visit http://www.m11businesslink.co.uk/iphone on your mobile phone or have a look at the preview below. (please note the preview is not fully functional and the web app is best viewed on an actual iPhone)

This useful tool lets you quickly and easily create wire frames for website projects as well as apps and database processes, being available on Windows and Mac means that all members of the creative team / process will be able to view and edit the wire frames.

Make sure you download option 2 so that it runs as a standalone application and not a firefox plugin as when you update firefox it disables the pluign :

http://pencil.evolus.vn/en-US/Downloads/Application.aspx

http://www.adobe.com/support/contact/cscleanertool.html

http://www.itjobswatch.co.uk/

the solution is to give the parent element of the drop down a position of relative and a higher z-index value

http://brenelz.com/blog/squish-the-internet-explorer-z-index-bug/

update:

this bug has caused more problems with navigation in IE, dropdowns in IE hover hovers, menu pop downs

This post will look at what you can do to optimize your website for mobile visitors, mobile visitors are users who are accessing your website via a mobile device such as a tablet (iPad) or a mobile phone (iPhone). The number of users accessing the web via a mobile device has dramatically increased in recent years mainly due to the improvements in technology that make it possible to do nearly everything you do on a desktop on a mobile device.

Mobile phone web access has grown dramatically in recent years, rising from 0.2% of all UK web traffic in 2009 to 15% in 2011 Source

With this rise in mobile visitors set to continue it is more important then ever to ensure you are catering to the mobile market, in this post we will look at what you can do to make mobile visitors enjoy the experience they get while on your website.

Do nothing

The first mobile visitor strategy we will look at is doing nothing, this may sound a strange way to to approach the problem however in some cases it may be the best option, the creators of mobile devices such as Apple with their iPad and iPhone know that the web is full of content that has not been optimized for the smaller screens and have built into their devices the capability to render full size websites and automatically adjust some features to make them more mobile friendly, an example of this on the iPhone is the auto linking of phone numbers – the iPhone will automatically link any numbers so when a user clicks on them they will automatically call the number.

This means that most websites will be usable on mobile devices already the important thing here is to try it out and see how the devices deal with your website, some can work well especially on the tablet devices and may not need any further input but others do not transfer well onto the mobile platform – those that rely on hover over effects that can’t be duplicated on touch screens for example or content that is created using flash (see below)

 Remove Flash content

The majority of mobile devices do not support flash this means that a website using it will not display correctly when being viewed on a mobile device, if the content being deployed via flash is not vital to the websites structure or the rest of the page content it may not be a problem however many sites deploy flash to power features such as their navigation with the end result being mobile visitors can’t browse past the home page of your website. The solution? to remove flash content from your website or provide alternatives for devices that do not support flash content,  if you are unsure on how to do this contact your website developer for more information. Modern websites make use of JavaScript to achieve the same effects that older website deploy flash to achieve and with the rising popularity of JQuery a JavaScript framework there are large numbers of freely available plugins to achieve the effects without needing to know how to program in JavaScript.

Responsive website design

The biggest limitation of mobile devices is the small screen size, this means that websites need to make the most of the screen real estate that is on offer, the best way of doing this is to upgrade your website so that is is responsive simply put what this will do is let your website adjust its layout automatically to the different screen sizes your visitors are using to view the website. To learn more about responsive website design check out this blog post.

Other options

To create a truly mobile device optimized experience there is other options that may need your needs better however they will both require creating a separate version of your website which may not be the most efficient method as it will require separate updates.

Native App

This option will involve creating a native application for all of the device operating systems you wish to target, the native app will then be distributed via the devices authorized software store – for example the Apple App Store. Creating a native application will give you access to the devices features such as the camera and GPS that the other options will not, the downside being for each device platform you wish to target you will need to produce a separate native app. For example if you wanted to target Apple, Blackberry, Windows and Android  you would need to create 4 different native apps.

Web App

An alternative to creating native apps for each mobile platform is to create a single web app, this would mean that apart from only needing to create a single app in the start when you update the content of your app you will only have one app to update. A web app is essentially a website that uses a JavaScript frame work such as JQuery Mobile to give the appearance it is running as a native app. What this means is users can add the app to their home screens and unlike websites the app can run in full screen making it look just like a native app. To learn more about web apps check out this blog post.

What to do next?

The next step is to review your site looking at it on the mobile platforms you wish to target and decide on which route to take, if your website works well and does not contain flash content you may not need to do anything but if you want the best performance and access to the GPS and camera you will need to go down the native app route. The majority of websites that need to do something will end up creating a responsive website as this is the most effective option from both an end users view point as it scales to fit different screen sizes but also for the owner of the website as it will be cheaper to implement then the other options but also because there will only be a single ‘system’ to update.

If you are still unsure what to do or would like to get some help with your specific project please feel free to contact me or leave a comment below

this is my example code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

do
{
$number =rand();
$number .= date('ymdhs');
$number .= rand();
echo $number;
echo '
';
ob_flush();
flush();
}
while ( is_dir('uploads/'.$number) ==false)

the section of code that outputs the data is:

1
2
3

ob_flush();
flush();

the source for this information is: http://www.icemelon.com/tutorials/20/Output_While_Script_is_Still_Running.htm

In this post we will look at adding an icon to your website for use on the iPhone / iPad, these icons will be shown when users add a link to your website to their devices home page and makes the short cut look more like an app which means it fits in nicely with the rest of the apps the user has on the device.

The first thing you will need to do is create the icon, this needs to be 57px by 57px and 72dpi make sure you save the image as a png the image below is the iPhone icon for this website, feel free to save it and design your icon over the top of it:

One thing to note is the icon will have its shine and rounded corners added automatically by the iPhone so you dont need to add these when creating the icon.

Note: You can prevent the addition of all effects by naming your icon apple-touch-icon-precomposed.png (this is available in iOS 2 and later). Apple

next you need to upload the icon to your website and insert the following code into the head of the site

1

The link can be relative if required,

and thats it you now have an icon that will be added to the home page of iOS devices

if you need help with adding the code or creating the icons for your website please feel free to get in touch

the first thing is the size the image needs to be 320px by 460px and at 72dp, my example is index mode and saved as a png file

The above image should already be the right dimensions and file format for you to use as a template simply import it into Photoshop and design your loading screen over the top of it.

With your new splash screen created add the following code to the head of your web app:

1

<link rel="apple-touch-startup-image" href="http://www.rscnet.co.uk/app1/startup.png">

replacing the link with the location of your own slash page, make sure its a direct link and not a relative one as it will not work – more information regarding the direct link is available here

Apps are small programs that you instal on your mobile phone through your devices software provider, with apple its through their app store. The number of apps has exploded in recent years with apple currently offering over 500,000 through its app store, the vast number available shows how popular apps are. The problem with native apps that are available through the app store is that the app will only work on apple devices, you will need to create a new app for blackberry and another for android and yet another for windows 7 and yet again for each possible type of mobile device out there, with a web app however it is possible to create a single app that will work across all of these mobile platforms.

Web apps are created using the same skills as required when creating normal websites, that means that if you know how to use HTML, CSS and JQuery you already know how to create web apps and you wont need to spend time learning how to code for each specific device.

The example below is an example app that i have created using Jquery Mobile a java script library that helps to speed up development and provide web developers with common elements. To view the web app on your device visit this link on your mobile device: http://rscnet.co.uk/app1/

There are a few things to keep in mind the first is that as the app is essentially a website it will not have access to the mobile devices features such as GPS and camera, you can still install the apps onto the devices home screen by adding it via the browsers menu. The other drawback with web apps is they will require an internet connection to work however they do not take up memory on the device itself like native apps – this does have an advantage because if you update the web app all users will automatically view the latest information without needing to update the app.

If you are interested in mobile apps or want more information on how your website could be adapted to work better on mobile devices please feel free to contact me

One of the latest trends in website development is something called responsive website design, but what is it and why should it matter to the average user?

Responsive website design

Standard websites are designed for a fixed width to ensure they display correctly on the largest range of desktop / laptop computers, the size that currently fits the most devices is 960px wide. This method ensures websites look the best on as many computers as possible, on smaller screens it fits snugly on normal / average screens it will have a background on each side of the page and on larger screens it will have more background space.

In recent years the boom in mobile devices that can access the internet has increased meaning that users are accessing websites on devices with a wide range of screen sizes and a simple one size fits all approach is no longer viable.

Mobile phone web access has grown dramatically in recent years, rising from 0.2% of all UK web traffic in 2009 to 15% in 2011 Source

The solution to this problem is responsive website design, this method of creating websites involves the design responding to the different screen sizes, the response to smaller screen sizes could be to reduce the size of images or simply remove sections of the website. If you want to see it in action grab the bottom right of the screen and reduce the width of the widow – this website is responsive reducing the width will reduce the size of the logo and remove the side bar before finally changing the navigation to a suitable format for use on smaller screens.

The above images show this website and how it appears on a laptop and on a mobile phone, the advantage of responsive design is that the same website can be used on a range of different devices.

Why should I care?

There are 2 main reasons website owners should be interested in responsive website design, the first is the fact that mobile internet browsing is a rapidly expanding market meaning meaning there is a large numbers of users accessing your website on a mobile device.

The second reason is that a responsive website is a much cheaper option then creating a bespoke proprietary app and has the advantage of working across all mobile platforms making it the most efficient option for people considering converting their website into an app.

Can my website be made responsive? and what should I do next?

Some websites are more suited to being made responsive then others but as long as your site is built using modern web standards (mainly CSS and defiantly not using tables!) then it should be possible to make it responsive.

If you are interested in getting help upgrading your website to be responsive then start thinking about which elements you will re-size and which you will get rid of. Then talk to your web designer who will be able to offer advice, if you need help or want me to offer advice on if its possible to upgrade your website then please feel free to get in contact with me either through this website or via my work as a web developer at Simpsons Creative

In the next few days all Facebook pages will follow the personal accounts and switch over to the new timeline layout, this means that all of the pages will need updating to ensure they take full advantage of the new features being offered by the update,

there are however a few rules for using the new cover image feature, mainly no calls to actions, contact details or any mention of likes or shares, more information is available here: https://www.facebook.com/help/?faq=276329115767498

Cover images must be at least 399 pixelswide and may not contain:

• Price or purchase information, such as “40% off” or “Download it at our website”
• Contact information, such as web address, email, mailing address or other information intended for your Page’s About section
• References to user interface elements, such as Like or Share, or any other Facebook site features
• Calls to action, such as “Get it now” or “Tell your friends”

Another really good resource on the new layout covering more then just the cover image is available here: http://www.quicksprout.com/2012/03/12/the-marketers-guide-to-the-new-facebook-pages/

Next up some time line gallery’s for inspiration:

20 Beautiful Facebook Timeline Covers For Free Download

70 Free Facebook Timeline Covers

Finally a Facebook fan page GUI PSD:

http://misz.com/index.php/free-download-psd-facebook-new-fan-page-gui/

Navigation is vital to websites and with mobile devices becoming larger users of the web accessible navigation is a must, this website outlines some possible solutions to the mobile navigation dilemma. With the several possibilities listed it shows that each website design is unique and a solution that fits one may not work with another.

this post is an excellent demonstration of the possibilities and well worth a bookmark
http://bradfrostweb.com/blog/web/responsive-nav-patterns/