Cross Browser Compatibility
Cross browser compatibility
I designed my mashup half in Firefox and half in Chrome but somewhere along the way I got too hung up on me failing at PHP and JavaScript programming and completely forgot about cross browser compatibility. So I stopped and tried to make it look as good as I could in Chrome, Firefox and IE at least. The pipes seemed to be outputting ok in all of them but some of my styling syntax didn’t.
· Scroll bar- I knew that I was going to have a lot of content so I accepted the fact that I would most likely have to have scrollable content. My first set of YouTube pipes wouldn’t let me grab the ’image gallery’ that yahoo pipes provides so I was a bit unsure how I wanted to style them. I tried to style the scrollbars using jQuery but I found that every time I tried I broke a different part of my code and I was already having trouble with PHP. After some searching I found a source with a few very useful lines of code to change the appearance of the scrollbars in my mashup to make them a bit more aesthetically pleasing. The syntax was set to webkit but I assumed that It was cross browser compatible, but it wasn’t. Right now the scrollbars look alright in chrome but still pretty terrible in Firefox. However the lack of time and more urgent bugs to fix resulted in a half styles scrollbar with not so good cross browser compatibility.
· Image sizing- I started using the CSS3 image sizing featured for divs as it takes a 10th of the time as resizing them all in Photoshop and uploading them. As I have been working and designing from my own laptop I have been designing the mashup in Chrome where this seemed to work fine. But when I checked in Firefox and IE it didn’t seem to work even though I included the lines of code to support the function in all three of these browsers. Unsure if it was only my browsers (even though I updated them all) or if this would occur for everyone I went back and did some re- sizing to stay on the safe side.
· Border radius- The border radius syntax seemed to display the same problem as the image re-sizing when it came to displaying in IE. I did notice that the syntax was slightly different to support this function in IE but even after the right code was entered it didn’t seem to want to work.
Slow loading –Once I had placed all my pipes in my mashup the site was unbearably slow… I Think I crashed both Firefox and Chrome at least 10 times within an hour. First I thought it was my computer (that seems to dislike me using a lot of programs and functions at once). When I went back to my pipes I realised that I was outputting about 400 results or more each time the page loaded. After I set them to output 10 results at the time it seems to work a little bit better.
Search not working- I set up a search function so users can search through the tutorial content to find what interests them. The search works fine when I preview it in the pipes but sometimes it doesn’t show anything when searching on the actual mashup. After trying to debug my code a fair few times I am starting to think it’s my computer playing up. I have matched it to the code we have been shown in the tutorials so I’m not sure why it doesn’t work sometimes.
Grids – When researching other tutorial websites I found some that included downloadable grids. As cool and different layouts are a very important feature in comic book style art I wanted to incorporate this function in my mashup. The grids are displayed as a list of thumbnail link layouts that allows the user to download and print to allow for use when watching tutorials.
