How Image Editor Helps Responsive Websites

Blog > How Image Editor Helps Responsive Websites

Posted By Create

Tags: website images, website design, Mobile Templates

So you've got a responsive site but what about your website images? Do you understand the importance of aspect ratios and consistency in your design? 

Learn how using Pagebuilder, responsive templates and your new image editing tool will get your website looking the best it has ever looked. We dig deep into the advantages off all three of the new features together and explain some of the new ideas along the way.

 

A bit of history

It’s been over nine years since the first generation of iPhone was released. The dawning of the ‘mobile web’ was upon us and has since completely changed the way we all consume for the web.

In 2014 mobile eCommerce sales overtook desktop and the explosion of new devices has resulted in a huge ecosystem different screen sizes to design and build for. To put this in perspective: in 2015 create.net received visits from 1031 unique mobile devices. Each of these with their own unique screen size.

To meet this growing demand of mobile traffic we have released a number of mobile centric features to bring your sites up to date with the current mobile trends:

  • A range of mobile-friendly templates
  • Pagebuilder - a mobile-friendly layout tool
  • Responsive images - providing your customers with the perfect sized image based on their screen size … more on this in a bit

Now that the above three features are safely embedded into the Create system and your websites, we are really excited to announce the last piece of this responsive jigsaw puzzle, your new image upload and edit tool!

You’ve probably already read of all the exciting new features it has to offer:

  • Crop
  • Rotate
  • Add effects
  • Pagebuilder integration

How can I make the most of the new image editor?

So here’s 3 pieces of practical advice on how to make the most of using all of these new features together to achieve beautifully consistent responsive pages.

1. Aspect Ratios To The Rescue

Maintaining consistent image shapes is key to creating a beautiful page layout. With the new crop feature and the range of preset shapes, or aspect ratios, it’s just a click away.

Notice the inconsistent dimensions with a custom cropped row of images.

Pagebuilder images cropped to custom aspect ratios.

Now compare those with images cropped to a single aspect ratio, in this case 4:3.

Pagebuilder images cropped to 4:3 aspect ratio.

Adding consistent aspect ratio images to Pagebuilder pages instantly improves your overall layout too! This is because our responsive templates and Pagebuilder pages are divided into percentages so your content will scale perfectly. It’s as if we planned the whole thing!

2. Forget About Fixed Sized Images

There are a few key concepts to responsive web design:

  • A website’s layout will scale and shift position to fit into the available screen size
  • In a very narrow screen the most important content will be at the top of a page and lesser important content will be toward the bottom, or even hidden
  • A page’s content will also scale to fit the available screen size e.g. text, video and images

With 1000+ different devices visiting your site, each scaling your content at different sizes, there isn‘t a single size that will be right for all.

That’s where we introduce responsive images. With your large image uploaded to Create, we work out a range of suitable sizes that fit your template and page layout. Then, with some clever behind the scenes calculations, we display the best fit size to send to your visitor’s screen size.

This means that mobile visitors don’t experience page bloat with huge download files on slow connections. Likewise, larger screen sizes get lovely crisp full-size images on faster connections. No compromise to user experience or visual impact. Double win!

It’s important to note that the image is the same aspect ratio, just smaller in delivery size.

Image scaling with single aspect ratio.

3. Sit Back & Relax

This basically means, from now on you only have to upload your best quality and largest image, crop it to your chosen aspect ratio and we’ll take care of the rest!

It’s probably also worth noting that only the largest image counts against your storage space, we store the rest. So have one on us! In fact, have 6!

All Create sites will have the new image editor in their accounts later this year - but you can upgrade now! Simply sign in to your account, add an image as usual and you’ll be shown a prompt to switch to the new image editor. Click the switch button and you’ll see a confirmation that you are now using the new editor.

We’re really excitied about adding this to your account and seeing the beautiful websites you build, please share your thoughts and feedback in the comments below.


Blog Search


Search

Get In The Loop


Receive business tips and web news direct to your inbox.