01242 244620
Get a free website review

Blog > Web Development

Our web development blog includes free resources and code examples. We’re happy for our content to be copied to other websites as long as you link back to us.

Responsive design and how to size your website images

Calendar Posted 20th November 2013 | Category: Web Development | Feed Icon

Justin

We are currently re-designing the Bluelinemedia website (watch this space!). One of the new changes we are making is to code the site to the HTML 5 standard and with this we want to make the site responsive, so it re-sizes for smartphones and tablets.

One of the issues we came across was what to do about images in a responsive website. We don’t want site users to have to download large images only to have them resized using CSS to fit their screen resolution, especially if they are using a mobile device. There are a lot of different methods to achieve responsive images, each with pros and cons depending on your website. Since there is no current HTML 5 standard for responsive images (according to this article we decided to use the method I have detailed below.

Bigger is not always better

We decided to go with quite a simple solution that proved to work well. In our CMS whenever an image is uploaded we automatically resize it to four sizes. The sizes of these images are what we judged to work best with four different screen resolutions when viewing our website. When a user visits our site initially the HTML just loads up the smallest images. The JavaScript then checks the users screen resolution and amends the image directories accordingly so that the best size image can be served to the user. Read more...

Simple parallax backgrounds using Mootools

Calendar Posted 30th September 2013 | Category: Web Development | Feed Icon

Simon

The parallax background scroller popularised by Nike's Better World and other similar sites has recently been implemented by Google on their Nexus 7 microsite in a nice subtle way. So, we thought we'd have a go at replicating the functionality using MooTools and CSS ourselves.

The parallax effect itself

Using the Nexus 7 page as an example, when scrolling down the page the breaker images scroll at a slower speed than the rest of the page creating a nice subtle illusion of depth. Essentially all you need to do to create this illusion is to move the background graphic at a slower speed than the foreground and your eyes do the rest.

So where do we start?

The first step is to create a nice and long vertical scrolling page such as the one we use in our parallax scrolling demo. The page is broken with 2 large pictures of Sirbastian's face and an overlaid paragraph in white. Read more...

Mobile page templates for SagePay

Calendar Posted 29th July 2013 | Category: Web Development | Feed Icon

Ben

If you're building a responsive or mobile-friendly e-commerce site with SagePay, you may be surprised to find that they don't provide standard template files for mobiles. Their default files have fixed width fields that can't be scaled to a small display, so customers get a page that's too wide for their screen.

iPhone and Android-friendly SagePay pages

You can either create a custom template yourself, or you can download ours below. We've created a mobile page template for responsive websites that scales for different size screens. Now your customers can get a nice mobile site all the way through the shopping process, suitable for Android, iPhone and iPad.

The template files below are for the 'low profile' version of SagePay's integration, which is where customers stay on your website and use the SagePay forms within a frame. We had to make some changes to the SagePay low profile templates themselves and also change the IFrame that we use to embed the card process into our sites. Read more...

Our top 10 online web developer tools

Calendar Posted 6th June 2013 | Category: Web Development | Feed Icon

Justin

We have compiled a list of our top 10 online web developer tools. These all come in very handy throughout the development of a web system.

Beanstalk App (version control)

Beanstalk

Excellent online SVN repository that enables us to manage code updates whilst at the same time providing a valuable offsite backup of our core applications. The simple online user interface makes using SVN a breeze.

Pixlr (image editor)

Pixlr

Simple and accessible online image editor. We use it to cut, paste, crop and manipulate images for inclusion on websites when we don't have access to any other tools. It is also something we recommend to our clients for them to edit images before uploading via the CMS. Read more...

Playing around with HTML iFrames

Calendar Posted 5th November 2012 | Category: Web Development | Feed Icon

Justin

There has been mentions recently in the press about websites using the browser full screen mode for spoofing websites. This can help those Phishing attacks trap even more users.

With this in mind we thought it might be interesting to see how far we could go spoofing a website by simply using HTML iFrames with separate websites content.

In this example we thought it would be amusing to include a negative news story about Microsoft regarding Apple within the Microsoft website. Read more...

page 1 of 8 Next >

We use cookies to help make our website better.

At the moment, your preferences prevent us from using cookies. OK otherwise Find out more.

How we use cookies

Google Analytics is a marketing tool that allows us to see how our site is used, for example how many visitors we get and which pages are viewed most. This information is anonymous but requires cookies to track your actions on our website.

ShareThis is included in our blog pages to provide links to social media tools like Twitter and Facebook, and enable you to bookmark or recommend our pages. This code includes cookies so that ShareThis can track how people use its service.

YouTube is used where we display a video on our website, and includes cookies that track actions such as clicking on related videos.

You can find out more about cookies at www.allaboutcookies.org/manage-cookies

If you'd prefer us not to use cookies, please click here, or if you don't mind us using cookies please click here.