Artefact 4 displayed how Responsive websites were dealing with their content and how they went about displaying their content on a multitude of devices keeping an enhanced experience throughout. I learnt that the best way for a news site was through percentages otherwise you would get to certain resolutions and you wouldn’t get such a good experience.

I went about applying what I have learnt to one of my original artefacts. I re-created the reuters website and tried to display snippets of news in their best possible form. I wanted to add styles to my basic responsive news website to add appeal but I also wanted to compare a text based news website directly against a image based news website. How would they both compare ?

Initally looking at the image only site, I found that I was drawn to articles through the image that was displayed, I wasn’t drawn through the headlines. However the text based site I wasn’t drawn to any headlines, but it would be the first thing I read when I look at the site. This lead me to beleive imagery gets your first part of attention rather than large text.

When degrading the sites through devices, the text based website worked better at lower resolutions as you could scan down the snippets quickly to find the article you want, however the image based site I found myself scrolling and stopping at each picture, rather than scanning quick down.

From trying something new and seeing weather image news websites can benefit over a plain text site, I found a medium between the two is the best, getting some where in the middle is the best method for a responsive news website.

Since writing this the BBC have implemented my answer at http://m.bbc.co.uk/news

Number 1 is chosen but 2 & 3 I have created alternatives that I cannot decide between so thought I’d post them up.

2 – a

2 – b

2 – c

3 – a

3 – b

Thought it would be a case of a quick bit of .CSS code in the media query for iPad. Nothing was working. Then I find out that iPad offers next to no support for iframes (ref:http://stackoverflow.com/questions/6139564/iframe-size-on-ipad). But why was it working for me when I tested on my ipad ? Older iOS supported iframes to an extent, however since Apple have updated their iOS they have dropped what little support they did have for iPads off.

So how do I go about fixing this problem.

I thought I could just display:none; on the mobile and tablet media quries, which was great. However iPad landscape uses desktop styles so would still display the iframe and I could not display:none; on this as it was functioning perfectly fine on all desktop browsers.

(ref:http://www.tonylea.com/2011/youtube-iframe-not-displaying-correctly-on-ios-devices/)

I then found this bit of code that uses PHP to detect if the user is on a iPad, iPhone or iPod and then runs a certain bit of code and then if not runs the original code.

The difference between the two peices of code (HTML) is that one has an iframe and links that target the iframe; this would be for desktop (or devise that doesn’t use iOS). The other part is code that doesn’t have an iframe and links that target a new page (devises that run iOS).

This has solved the problem however I have had to install a plugin that runs PHP code in wordpress pages as by default you cannot run PHP in wordpress pages.

One final ending to the story is Android support. Android does not support the scroll attribute on iframes. So when using the iframe on an Android devise it displays the whole page. (ref: http://stackoverflow.com/questions/4748573/android-iframe-browser-support)

….AND breath. Client project handed in. Just need to upload to clients server once hosting is bought.

When I did I got the following results:

Portrait

Landscape

As you can see the layout doesn’t fit the screen size, it’s zoomed in.

With adding a little bit of javascript:

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
        document.body.addEventListener('gesturestart', function () {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}

This essentially stops the site from being scalable from when you change orientations, it’s not until you apply a gesture to the screen that it is scalable. Thus stopping the zoom when changing from portrait to landscape.

So when changing from portrait to landscape I get the following: