What is responsive web design?
You may notice that the featured images on your website homepage look a little bit different depending on whether you're looking at the site from a computer, a tablet, or a mobile device.
Far from being a problem, this is supposed to happen and is a best practice in current web design. It's called responsive web design, and it ensures that your website will look great regardless of the device your website visitors are using. Responsive design automatically adjusts not only the images on your site but the information displayed there as well.
In fact, responsive design is Google's recommended design pattern, and Google rewards sites these sites with higher rankings in search results. Websites that don't incorporate responsive design show up lower in search results.
Because in 2018, people are viewing websites from a variety of different devices: desktop computers, laptops, tablets, and smartphones. If your website looks great on a large desktop computer but not on a smartphone, it's going to be much less user-friendly.
How does artcloud adjust my images depending on the device?
For the featured images on your homepage, the focus will always be on the center of the image. With larger screens, you'll see more of the image and with smaller screens, you'll see less.
Check out the examples below to see what the same image would look like on a variety of different screens.
On a desktop or laptop computer
On a larger screen, your viewers will see most, if not all, of the image you uploaded.
On a tablet
Tablets are more narrow than desktop and laptop computers. Notice that you don't see as much of the image here, but the screen maintains focus on the center of the image.
On a smartphone
There's simply no way to see the entire image on a smartphone; the display screen for most smartphones is less than 6 inches (15.24 cm). However, just as with larger screens, the focus remains on the center of the image.
Also notice that the website navigation menu went away and is condensed into the three bars in the upper right hand corner of the screen. That is another element of responsive web design!