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.
Posted 20th November 2013 | Category: Web Development |
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
Posted 30th September 2013 | Category: Web Development |
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...
Posted 29th July 2013 | Category: Web Development |
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...
Posted 6th June 2013 | Category: Web Development |
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)
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)
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...
Posted 5th November 2012 | Category: Web Development |
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 >