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).
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 1st November 2013 | Category: Company |
There's a new epidemic sweeping the planet, and it's not what you think. Sure, there are diseases, wars and food shortages across the globe. But what about web developers? Coding all day without sunlight, eating nothing but takeaways, and of course spending all their time at the desk.
Here at Bluelinemedia, we're working to stop Causes of Sedentary Situations (CSS). We're going to change the world one step at a time with our War on Weighty Workplaces (WWW). So let us tell you How To (be) More Lean (HTML).
Are you a web developer? Do you know a web developer who needs our help? There's no need to stop coding! Just fit in our five simple exercises while you work. Read more...
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 15th August 2013 | Category: Web Design |
1. Don’t use dropdown menus
At first sight, dropdown menus appear to be a good way to structure and present complex website navigation. However visitors are often confused by their use. For instance, we analysed a previous incarnation of our own website which used dropdown menus and quickly realised that nobody clicked on the top level item pages (our most informative pages) because they thought they were just headings for the dropdowns.
The alternative to dropdowns is clear sub-navigational structures in the relevant pages instead. For instance, your "About Us" page could have a sub-menu for "Our Team", "Our Values" etc.
2. Make menu items simple and familiar
Beyond ditching dropdown menus, there are a number of ways to help users navigate your site. Adhering to standard conventions such as presenting a textual menu with familiar items like Home, About Us and Contact Us helps users feel comfortable browsing your site. The use of such pages helps them identify where to go if they have specific questions and actually clarifies the main navigational structure itself. 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...
page 1 of 26 Next >