Articles tagged with Responsive

Is your site future ready?

When I first started out building websites, a while back, all that was needed in terms of SEO was a website full of content and a keywords meta tag so that search engines knew what the page was about. Further down the line they became good enough to be able to collect the information off the page and keywords were no more. This is what I dub ‘the collection phase’ as it was just an indexing of the whole internet.

We’re past that phase now and there are a few areas that are going to explode rapidly in the next few years which will greatly affect how we build websites. I’d rather make sure we’re ahead of the curve rather than playing catch up when the changes do happen.

To understand why search engines do what they do we really need to look at the bigger picture.

What is the goal of a website?

Helping visitors complete their goal is the primary aim of any website, even if the business behind it ...

Read post... Posted in 'Web development'

A Responsive Image jQuery Plugin

There are a whole variety of ways that responsive images can be accomplished, but as of yet there is no perfect way of doing it without using a combination of .htaccess, javascript or css. My solution is no different and uses javascript (in the form of jQuery) as the coordinator of the images.

responsiveBreakpointJQ works by specifying the images that will show if the screen of the device is big enough. The data-XXX values are how the appropriate image is specified. If a screen is wider than the XXX value then that image is selected as the best one for the job.

 <img src="small.jpg" data-480="medium.jpg" data-960="large.jpg" alt="Image Alt text" />

If you would like to read more then take a look at the responsiveBreakpointJQ project on github . If you feel you can make it better then be my guest :D

Download the jQuery Responsive Breakpoint Image Plugin from git hub to checkout the code: https://github.com/Designer023/responsiveBreakpointJQ

Pros:

  • Can add as many breakpoints as needed.
  • Breakpoints ...
Read post... Posted in 'Web development'