Artefact 5 – Evaluation

Posted by on . No comments.

Thought I had done this, but obviously it didn’t post.

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

Exhibition Pieces

Posted by on . One comment.

I’ve chosen to do 3 assets for my exhibition and these will be different to my catalogue ones.

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

Nightmare with iPad support

Posted by on . No comments.

Thoroughly tested my site on every possible device and browser and it all worked fine. Then use an iPad at my tutorial today and my fixtures page isn’t displaying the iframe properly. Brilliant.

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.

iPad portrait to landscape problem

Posted by on . No comments.

It’s through thoroughly testing your final product that you always come across niggley problems in your site. Daryl Brunsden made me aware of this topic on stack overflow. When I tested my site on iPad, typed in the url while in landscape mode and it worked, then flicked it to portrait and it responded to the width change. However I didn’t test it the other way, portrait to landscape.

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: