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).
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 »
Why online marketing works better than offline marketing
Posted 10 August 2010 | | 0 Comments
It's no secret that the trend of advertising spend is moving to the internet (as struggling newspapers and commercial TV stations are well aware). This isn't to say that offline marketing doesn't work, but moving marketing to the internet is about more than just following the audience. Online marketing has several advantages which especially favour the small business.
Timing. When someone searches for your product or service and clicks on a free or paid link on a search engine, you are in the unique and powerful position of presenting your business at exactly the point someone is looking for it. Most advertising is a numbers game, where only a tiny portion of readers or viewers are actually interested in what they see, but with search engine optimisation and pay-per-click advertising, everyone is interested.
Information. Probably the most important marketing tool because it tells you what's working and what's not. Email marketing tools can tell you who's read your email, when they opened it, and even what links they clicked. Google Analytics tells you how your web visitor found you and what actions they've taken. You can decide how to spend your money, and importantly for small businesses, you can start with a low budget and only increase when you know it's working.
More "touches". Successful marketing means contacting your customer a number of times, so they'll remember you when they need your product or service. Online marketing is incredibly integrated and allows you to communicate with the right group of people. When someone visits your website, they can also sign up to your email newsletter, follow you on Twitter, subscribe to your blog via RSS, or become a fan on Facebook. All of which allow you to keep in touch.
It's real. Done right, online marketing and especially the use of social media gives potential customers a real view of the people and personality of your business. This kind of online marketing is about communicating with people who could become your customers, giving them free information and resources if you can, and being there when they want to buy. More »
Should we use frameworks?
Posted 9 August 2010 | | 0 Comments
Frameworks appear in most programming languages and there is often many different types per language. The idea of a framework is to provide a certain structure that the programmer must follow. This structure will usually include functionality that can just be called upon rather than the programmer having to write it from scratch. A lot of this functionality will be based around the mundane or highly replicated programming tasks enabling the programmer to concentrate on the core elements of the software that is being developed.
Frameworks are incredibly useful and can significantly speed up the development process. Due to the programmer having to follow a specific structure the end product should be a lot easier to maintain, have less bugs and use less code.
One major issue with frameworks is the time it takes to learn them. To get the most out of the framework you need to understand its full capabilities and structure which is very time consuming. They are also often limiting if you have not written it yourself and sometimes you will find yourself using part of the framework and then bolting on your own code.
Personally l think frameworks built by someone else should only be used in programming languages that are just supporting the software/ website being built. For example at Bluelinemedia we use the MooTools JavaScript framework. Since we just use JavaScript to provide front end functionality we are happy to use a framework as it saves a lot of time and its functionality is just placed on top of the core code. Also due to the MooTools developers spending a lot of time on all the different functionality the framework provides they have been able to perfect certain aspects. It is not worth spending all the time on recreating that for ourselves when we could just use their framework to get a perfect solution.
In regards to the back end we program the core of the software in PHP & MySQL and since we want to have complete control and understanding of how this works we use our own framework that we have developed over time. Due to developing it ourselves we have been able to create it to just do exactly what we want and we all have an in depth knowledge of how it works making it very easy to update and improve.
A framework is definitely something l would suggest you use although l would write your own one if you plan to use the framework for the core parts of your code. More »
Email marketing
Posted 29 July 2010 | | 0 Comments
If you didn't already know, we offer a great email marketing service to help you send professional, trackable emails. If you've ever considered email marketing or been frustrated with the results of your own emails, let us help.
We design and send effective, engaging emails and work with Campaign Monitor to give you a complete online resource to manage subscribers, write and send campaigns, and view reports. We can even integrate with your existing website or software so your subscriber list is always up to date.
Find out more at www.bluelinemedia.co.uk/emailmarketing.php More »
