At a time when mankind is using a smart phone for a third of all searches on Google, Internet sites must correspondingly be optimised for mobile devices. For this purpose, there are some technologies you can use to create professional Responsive Web Design. In our previous article we already reported extensively on Off Canvas Design, a technology for responsive web design. In this article we deal with Responsive Images.
What exactly is Responsive Web Design?
A brief summary to put you as a newcomer in the picture right away: Responsive web design is the mobile optimisation of a website, in order to have an optimal appearance on mobile terminal devices such as smart phones and tablets. A modern and contemporary website is scalable in resolution with the respective terminal. For this purpose various technologies are used, such as the Off Canvas responsive web design that you already may know from the mobile version of Facebook. Images are a major challenge for websites. Images have the property that they do not automatically adjust the size in responsive web design and it is necessary to apply adequate creative technologies in order to convert pictures into Responsive Images.
What are Responsive Images?
Have you ever seen a website or even created one yourself on which on browsers like Chrome all images looked perfect but the appearance on a smart phone was completely disappointing? This is called a Non-Responsive Image. Images must be adapted to Responsive Web Design in a particular way at the present moment. There are many different methods. The challenge is that in the age of mobile surfing another broadband level is used then in the comfort zone of VDSL. In addition to the loading time of a Responsive Image, the resolution is of great importance since Retina Displays are on the rise. This means for web and webpage developers in Responsive Design that images automatically need to adapt both to the terminal and its charging time and to the resolution. If these criteria are met, the general expression is professional Responsive Images in Responsive Web Design.
What technology is so far available for professional Responsive Images?
Until a few weeks ago greatly varying technologies were used. Some programmers use for Responsive Images a classic adaption of the image by CSS3, in which the height and the width of the parent DIV containers were adjusted. This work was relatively common, although a little messy. As an alternative to the ID assignment for images backgrounds in the DIV tag were sometimes used. However, this has the disadvantage that the respective background image is not automatically adjusted in height or width, so that the Responsive Image is programmed rather inelegantly. Many web designers favour an image adaption using JavaScript for Responsive Web Design but it has not become prevalent. Only one option remained: Responsive Images must be produced in different CSS-variants.
What is the source of these problems with Responsive Images?
The difficulty with Responsive Images is that classic HTML is not designed for responsive web design and similar requirements. HTML itself brings only a form, whereas CSS controls the contents and design. The combination of HTML, PHP and CSS has sometimes enabled a very innovative variety of designs, as Off Canvas responsive web design proves. It quickly became clear that a new form of HTML is necessary. There was a lot of discussion about which form of a Responsive Images would really be useful, how to implement it and what preconditions were created. Various lists and suggestions for Responsive Images were discussed and only a few weeks ago the next milestone was reached!
Conclusion: A new solution and exciting developments
There is a completely new HTML element, the element. Using the picture element a Responsive Image is possible although the syntax is strongly reminiscent of the embedding of video clips in Responsive Web Design. Responsive Images are a proof that there are many developments going on in the web designer industry and there is always interest in solutions. We think that in the next few weeks more interesting news will spread on the Internet with respect to Responsive Web Design, Responsive Images and automatic image resizing on mobile devices. It will be fascinating!