Blog
We write about web development and working in a small business: how we think it should be done, ideas and suggestions, things we like, and the odd random realisation. Subscribe to our RSS feed.
If you find our web design agency blog articles interesting or useful, please feel free to include our content on your website (we just ask that you reference us and link to the original blog item).
Should I pay more than £500 for a website?
Posted 6 September 2010 | 
| 
0 Comments
If you're comparing quotes, we won't be the cheapest (or the most expensive). We charge around £2000 for a typical brochure site, while some companies charge £500 or less. We believe we give that extra value in the quality and service we provide, but we understand it's not easy for you to make a judgement from the outside. The price of a website isn't about the number of pages you need, but the service and quality you get.
The real cost
In our experience most websites will run for 3-5 years, so consider the cost over this whole period. If you've bought a simple website, what happens when you want to add extra pages or content in the future? If you run a new marketing campaign, how much will it cost to add individual landing pages or update the search engine content of your website? If you want to change web designers in the future, how much will it cost to start again?
We build a long-term solution and develop your content management in parallel with your website, not as a bolt-on. This means you can always edit your content and even add new pages yourself at no cost. We code in a way that makes it easy for us and other companies to update your website in the future, and we don't tie you to us or our hosting. Aside from hosting and domain renewal, we don't charge any ongoing costs.
The real value
Your new website is an investment over a number of years, and will impact all your sales and marketing efforts by convincing visitors to get in touch or buy online. If you're spending money on marketing which relies on your website, is 'cheap and cheerful' good enough?
We've provided nothing but web design since 2001 and between our six staff we have the experience to design and build a website that will promote your business and look after your users. We learn about your business and your customers first, so we can create an effective website that delivers real results.
Paying for service
If you pay £500 for a website, you're probably buying a template or hiring a "one man band". There's nothing wrong with small companies, but what happens to your business if they go on holiday, shut down the business and get a new job, or just get too busy with other clients? Is this enough for your business?
We're a team of six and our clients like our position between the limitations of a "one man band" and the high overheads of a larger agency. We've developed our project management process over a number of years, handle multiple projects all the time, and always have more than one person involved in your website. We've been growing since 2001 and have continued to grow even through the recession, so we're here to stay. More »
Know what you're paying for
We're not saying you shouldn't pay £500 for a website, but you should understand what you're getting whether you're paying £500 or £2000. If you're ready for a real investment in the future of your business, give us a call. More »
Quick list of what you get for £2000
- Content management built around your site
- Edit content and add your own pages for nothing
- Professional code that makes future changes easier
- Free to move to other suppliers and use your own hosting
- No ongoing costs other than optional hosting and domains
- Experts in web design since 2001
- 6 staff so there's always someone available
- Grew during the recession and here to stay
- 75% of our work from repeat business
- Established project management process
Integrating Google Maps
Posted 3 September 2010 | | 0 Comments
Google maps can be a very handy addition to any website, especially on contact pages. I have seen many website with an image of a Google map or a link to the Google maps website but did you know it’s very easy to actually embed a live Google map into one of your pages? More »
Google maps API
An application programming interface (API) is an interface implemented by a software program to enable interaction with other software. Luckily Google’s API is very simple to use and Google provide plenty of documentation and examples. More »
Embedding the map
Firstly we need to load the Google maps API, to do this all we have to do is place the following line of HTML into our page header. More »
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
Next we need some JavaScript to create the map and place it where we want it. Its good practise to place this JavaScript in a separate file and reference it in your page header like this: More »
<script type="text/javascript" src="mygooglemap.js">
The contents of the file should look like this. More »
function initialize() {var myLatlng = new google.maps.LatLng(51.90058, -2.08026);
var myOptions = {
zoom: 10,
center: myLatlng,
mapTypeId:
google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
This may look complicated but there are only a few things we need to change. More »
- Where it says.LatLng(-34.397, 150.644) you need to replace the two numbers with the latitude and longitude of where you want to centre the map. You can find this position using services such as Flash Earth.
- Next change the number that comes after zoom. This number changes how zoomed in/out the map will be, a higher number of say 14 is good for showing a building and a lower number of 10 could show the entire town/city.
- Where it says getElementByID(“map_canvas”) we need to replace the map_canvas with the ID of the div we want to place the Google map within.
That’s actually all you need to change, as long as <div id=” map_canvas”></div> (or whatever you changed it to) exists in you page and has a width and height this should work. More »
Automatically post new content on Twitter / Facebook by using an RSS feed with twitterfeed.com
Posted 3 September 2010 | | 0 Comments
Now we have a blog on our new website we wanted to automatically update our Twitter feed with the latest items. Upon researching this we found a simple solution provided at the following address - http://www.twitterfeed.com. Twitter feed allows you to update your Twitter and Facebook accounts from an RSS feed generated from your web site content, such as news items or blog entries.
Firstly you need to generate an RSS feed from the content of your site. As an example this might be inlcude a news title and full story. Once you have this file set up correctly you need to register for an account with Twitter Feed.
Within Twitter Feed you can create a new feed specifying a description and the URL of your RSS feed. You also have a number of advanced options such as update frequency, post content (e.g. title & description), sort order etc. The second stage of the process is where you enter your account details for Twitter or Facebook in order for these accounts to be updated automatically, whether it be a status update or a new tweet. More »
When to use JPG, GIF & PNG image file types?
Posted 27 August 2010 | | 0 Comments
These three image types are used throughout websites but understanding when to use each image is essential for having fast website load times and crisp graphics. In this post I will not go into how these images types work but instead just concentrate on when to use them.
JPG
JPG (or JPEG) stands for Joint Photographic Experts Group. This graphic type is used for images that contain colours blending into each other, for example a gradient fade using multiple colours or a photographic image. It generally creates files of a larger size than gif but smaller than png images. In graphics packages you can usually reduce the quality of a jpg image by up to 20-30% therefore reducing the image file size and see no difference when used in a browser. The main issue with jpg images is that they do not preserve any transparency.
GIF
GIF stands for Graphics Interchange Format and is generally the smallest file size image type. This graphic type is used for images that contain solid blocks of colour with no blends between colours. Gif files preserve transparency but they have to blend the transparency into a colour. For example, if you have a blue circle on a red background the gif will have to be set to blend in to red. If this graphic is then put on a white background you will see a red outline around the circle.
PNG
PNG stands for Portable Network Graphics and is generally the largest file size image type if set to 24-bit. This means that it should be only used when you can't achieve what you want using the gif or jpg image types. Png image files also do not display correctly in IE6 and therefore additional CSS needs to be added specifically for IE6 to get the png files to display transparency correctly. That said, it does achieve both functions of jpg and gif images. It can be used for images with blends between different colours and also for transparency. The transparency of png images is far superior to gif images because it does not need to blend the transparency into a specific colour. This means it works as you would expect transparency to work by having crisp edges and being consistent regardless of what background it is placed on top of. Generally I only png images when I need to include this type of transparency in a website design.
I hope that helps you to decide which image type to use next time you are preparing a design for a website. More »
IE8 Cleartype Font Opacity Problem
Posted 26 August 2010 | | 0 Comments
One of our current projects required a news ticker that faded in and out with new headlines appearing against a background image. Obviously this is an easy enough effect to implement and relatively quickly, we had a solution in place using the MooTools framework to apply the fade. All seemed fine until we looked at the results in IE8. Firefox, Opera, Safari, IE7 and even IE6 rendered the effect consistently, but IE8 pixelated the font when manipulating the opacity.
It seems that the cleartype anti-aliasing of the font was being removed as the text faded in and out. In the end the solution was simply to tween the colour of the font rather than the opacity. In this instance we could replicate the fade by simply tweening to white and then back to the font colour as we had a solid background behind the text. However, if you had a non-solid background this effect would be more of a headache. More »
5 ways to beat your competitors on search engines
Posted 24 August 2010 | | 0 Comments
We've been building websites and getting them on search engines for almost 10 years, and we've boiled all that experience down to five simple steps that don't require any technical knowledge.
1. Research your keywords
Don't make assumptions about what search terms people will use to find your website. For a small investment of time and as little as £10, you can find out which are the most popular terms for you to target.
Set up an account with Google Adwords, create a simple ad and add your keywords. You want to be a big fish in a small pond so choose specific keywords that will get you the most relevant customers. Create lots of variations by looking at competitor's websites, thinking of your own list, and using the "Keyword Tool" in your Google Adwords account. Examples for our website would be "web design cheltenham", "website design cheltenham", "web designers cheltenham".
Once your account has been running for a few days, look at the results and see how many "impressions" each keyword has generated. That's the number of times your advert has appeared, which is also the number of times someone has searched for that phrase. Use these results to create a top 5 or top 10 of your best search terms.
2. Write your content
You should be able to write a separate title, description and keywords for every page on your website (if you can't, ask your web developer why not). Don't just fill each page with keywords, but target a specific and different search term with each page. Use variations of this term in your search engine content and the body of the page itself. For example:
Title: Web design Cheltenham
Description: Web design company based in Cheltenham
Keywords: Web design services Cheltenham
Page heading: Web design Cheltenham
3. Submit to the search engines and free directories
Here's the list we use (all submissions are free and correct at time of writing):
- http://www.google.co.uk/addurl.html
- http://siteexplorer.search.yahoo.com/submit
- http://www.bing.com/docs/submit.aspx?FORM=WSUT
- http://www.dmoz.com/add.html
- http://www.thelocalweb.net/Upload1.asp
- http://my.kellysearch.com
- http://www.aardvarkbusiness.net/directory
- http://www.smilelocal.com
- http://uk.dir.yahoo.com
4. Submit to Google Places
When you use Google to find businesses in a specific location (like "web design in Cheltenham"), you may notice a small map with a list of seven results at the top of the page. If you're wondering how to get your own business on there, the good news is that it's easy and free.
Just follow the link below to get listed. Once your listing has been approved, make sure you ask your customers to add reviews:
http://www.google.com/local/add/businessCenter
5. Test the results
Make sure your work has paid off by carrying out a quick "before and after" review of your search engine ranking. Take your top 5 or top 10 list from step 1 and see where your website currently appears in Google (and other search engines if you want). Wait at least two months for your changes to take effect, and then run the same searches.
You can also use your hosting statistics package to see what search terms visitors to your site are using. And when you ask new customers how they found you, ask them what search term they used. More »
Going further
While these steps will help you get started, there are lots of other ways to improve your search engine ranking by hiring a professional agency to take your site to the next level. Other factors in your search engine presence include writing better code, improving the content of your pages, and getting links from other sites. Get in touch to find out more about how we can help. More »
Designing a Web App
Posted 23 August 2010 | | 0 Comments
Here at Bluelinemedia we're known for our user friendly web development but from time to time we need to be creative and get stuck into Adobe Photoshop/Fireworks.
We currently use an internal web app that allows us to track sales and time spent on individual projects. This gives us a better idea of how much to quote, as well as a handy way of keeping everyone on the same page.
Over the next few months we plan to revamp this software and as part of that I decided a new design was in order. I have played around with web design as a hobby for few years now but had never designed a web app.
Layout
Designing the initial framework of a web app is tricky. You often have a large amount of information to display, information which may change on a daily/weekly basis. Putting together a layout that not only looks good but is practical is something that can take quite a few attempts.
I always recommend keeping things simple and minimalistic. Don’t crowd the user with lots of buttons, menus and text, just display the necessities. A good way of displaying additional information is on a mouse action, such as on hover, or click. This way additional content is readily available but hidden initially.
Planning ahead
As you click away in your preferred design application try to keep in mind how you’re actually going to code your design up. HTML/CSS obviously has its limitations, so is everything going to work when you turn your layered image into the finished website.
Remember content will probably have to be dynamic which limits you on images, fonts and gradients you can use.
Conclusion
You should always have a good idea of what you’re designing before you go ahead and design it. Bolting on additional features after you have your design can make it look cluttered.
Don’t expect your first go to work out perfectly it make take a number of attempts until you get what you’re looking for. You will often find yourself saving a design as a “maybe” and starting again from scratch.
Use plenty of inspiration but don’t copy. There are plenty of web design showcases out there, find a few designs you like and get some ideas. More »
JavaScript versus Flash
Posted 23 August 2010 | | 0 Comments
It used to be so simple – when you wanted to add something more, well, “flashy” to your website you used Flash. Where JavaScript was clunky, no good at transitions or animation and was riddled with cross-browser inconsistencies, Flash was smooth, presentation rich and as a plug-in was consistent across browsers. However, with the advent of frameworks such as MooTools and jQuery and increasing browser functionality, the decision is no longer straightforward. Perhaps now the starting point when implementing a “whizzy” feature should be “why can’t we use JavaScript?”.
Statistically speaking
Whilst it’s difficult to ascertain accurate figures for both the install base of Flash and the number of browsers with JavaScript enabled, it seems that most sources agree both are available to 90-95% of users. In both instances, it is most likely to be large corporations with locked down internal networks that block both the execution of JavaScript and the installation of 3rd party add-ons. Bearing this in mind there is no in-built advantage in terms of market penetration for either of the two protagonists.
Accessibility
Another area of concern with both methods is the accessibility of content. Flash has a reputation for being rather flaky in this area, but in a lot of instances this is due to lazy production techniques. By the same token, whilst JavaScript manipulates standard HTML, badly-written code and CSS can still obfuscate the accessibility of content.
However there does remain an underlying issue with Flash and its proprietary behaviour - user interface basics such as the back button and standard page loading cues are potentially lost where users expect them. Whilst JavaScript (specifically in conjunction with AJAX) can also suffer from these issues they are much less likely to occur and the default behaviour and accessibility of browsers is more likely to prevail.
Graceful Degradation
If your users do not have JavaScript or Flash installed what are the alternatives? Both methods have the ability to supply alternative content to users, but there is an inherent downside for Flash developers in that the alternative format is completely alien to the Flash development. For instance, if data is being supplied to the Flash file from a database or XML source and you are implementing a genuine fall back, this means writing a solution in a back-end process to extract the same information for presentation as HTML.
The immediate advantage that JavaScript has is that it takes standard HTML as its data for manipulation in the user’s browser. This means that the process used to present this data can also be used to supply the fallback presentation.
The advantage of this to your users is that the non-JavaScript alternative is much more likely to stay in sync with the JavaScript presentation - with much less effort from the developer.
SEO
Search engine optimisation is one area where JavaScript wins hands down. As long as the code used to supply the content is standard HTML then search engines can analyse it with ease. Flash does provide SEO capabilities, but this places the onus on search engines to be willing to delve into the Flash mechanisms to ascertain the relevant content.
Applications
Complex animation and video players remain the most obvious reasons to use Flash and JavaScript simply cannot compete in that regard. Whilst HTML5 will reproduce these features directly in-browser this is not currently an option. Where frameworks such as MooTools have caught up with Flash is in the domain of slideshow-style transitions, slides, opacity etc. This type of functionality is well suited to JavaScript as the code is lightweight and in many cases the non-supported fall back is often much easier to implement.
Conclusion
The number of applications where Flash is still a de-facto choice is shrinking and will continue to shrink with the adoption of HTML5. As mentioned earlier video, complex animation and other types of functionality that the underlying browser technology does not support is its stronghold and JavaScript does not at the moment provide a viable alternative.
On the other hand, JavaScript with its lightweight implementation provides the best solution for adding “bells and whistles” to websites and online applications. The graceful degradation of these “bells” is easier to implement and, critically, if the content contained within is SEO critical then JavaScript is the obvious choice. More »
Sending SMS text messages from a website
Posted 17 August 2010 | | 0 Comments
One of our clients recently contacted us and asked if were possible to send SMS messages from their website straight to their users.
Knowing that this was possible we we looked into a variety of options and decided to use the services provided by FastSMS.
FastSMS provides not only an online interface to send SMS messages directly from their website but they also provide a feature rich developer API that allowed us to integrate
directly with our clients web application. This integration allowed our client to either send SMS messages to specific users of their system directly, or to send out SMS messages along with any email correspondence that's sent out to their users.
Integrating this type of service with a website is often something that's overlooked due to unnecessary misconceptions such as the need to have specialised server hardware or large licensing fees but as the web becomes a more established software platform more and more services like SMS become available to developers, clients and ultimately the end users of our websites. More »
What professional experience does a web developer need?
Posted 13 August 2010 | | 0 Comments
There are many different skills and experiences required for being a web developer, but if we look at the skills and experiences that we would look for based on the technologies we use.
- Ideally a developer will have 2 years experience working in PHP, if this is commercial experience then that would be more beneficial
- Working in frame works
- Working with MySQL databases, setting up and managing existing databases
- Basic knowledge of JavaScript
- xhtml and knowledge of webstandards
- Good problem solving
Most of the projects we undertake require a team of developers to work together on designated tasks to ensure deadlines are met. A web developer would need to work well in a team as well as on thier own for smaller projects. This also involves good time and task management all contributing to efficiency.
As our work is predominantly technical development there is a low level of graphical knowledge needed, although a good knowledge of Photoshop or Fireworks or a similar graphics editing package in order to rework imagery would be beneficial. More »
