So the biggest thing these days is responsive design and making your site completely mobile ready out of the box, as opposed to going back and making everything responsive after the site is done, or making a whole new mobile site. One of the biggest ways to make the process easier is to work with the SVG file type, as well as prepare yourself for the different browsers available on desktop and mobile devices everywhere. What necessarily works in Safari on an iPhone isn’t gonna always work on IE 7 on a desktop PC running Windows ME.
http://dev.texaspolitics.utexas.edu/
The above site has a header that’s in the SVG file format. SVG stands for Scalable Vector Graphics and is basically just that, a scalable image that’s vector based. (Check out more info here: http://en.wikipedia.org/wiki/Scalable_Vector_Graphics.) The image by itself is here: http://dev.texaspolitics.utexas.edu/sites/texaspolitics.utexas.edu/themes/custom/txp/images/banner/txpbanner.svg
Try resizing your browser to see what happens to the image. The image of course will resize with the browser, however if you have a browser that doesn’t resize the image there’s an easy fix. This image is simply just a jpg http://dev.texaspolitics.utexas.edu/sites/texaspolitics.utexas.edu/themes/custom/txp/images/banner/txpbanner.jpg.
However, for browsers where the scaling may not work, it should now scale the image. It’s completely possible to have both images on the same site just in case we run into browser that either don’t work with SVG or won’t scale the SVG file.
The following code will do just that:
< img src=”/sites/texaspolitics.utexas.edu/themes/custom/txp/images/banner/txpbanner.svg” onerror=”this.src=/sites/texaspolitics.utexas.edu/themes/custom/txp/images/banner/txpbanner.jpg” alt=”The Texas Politics at The University of Texas at Austin ” class=”header__logo-image” >
Simply put, you put in the normal code for an image, and just include the onerror=”your other image url” which causes a browser to switch to the other image if it can’t read the image or something occurs which makes it need to switch to the other image, such as scaling a graphic for a mobile device.