Build crisp, high-resolution landing pages 💥

design
ui

#1

Hi everyone!

For those of you concerned about the way your pages look to your visitors, and those of you who spend time building pages and popups in Unbounce, I’m excited to share some brand new, hot-of-the-press, designer-friendly updates!

I’d like to point out that one of these releases was our top feature request here in the community, and your feedback helped push this forward on our product roadmap, so thank you (and keep it coming)!

These days, phone screens and computer monitors come in all shapes and sizes, which means that a one-size fit all approach to web images doesn’t cut it. The visitors to your pages expect you to put your best face forward to and represent your brand with high-quality (and fast loading!) web content. With that, I’m happy to announce that as of this morning, Unbounce customers can build sharper, more beautiful landing pages with full access to…

Retina image support in the Unbounce page builder!

enhance

Unbounce now supports SVG and retina images so your logo and page designs look crisp on the smallest phone screen or the biggest desktop

But that’s not all…

As of today, you can also…

Use .SVG images with Unbounce!

Using SVG images is an easy way to make sure your logo and images are retina sharp (without having to worry about image size and pixels) – and they can help you keep your page size small (and page load times fast). :rocket:

But wait… There’s more!

We’ve also rolled out…

Alignment and distribution tools in the Unbounce page builder!

When you select 3 or more elements in the page builder, you’ll see controls to align and distribute those items on your page. With alignment and distribution tools for page elements (at long last!) and text editing improvements, you can spend less time fiddling with your page to get the design you want

You can find a more detailed description of these new releases in our documentation here.

HEADS UP :loudspeaker:
We’ve given all Unbounce customers access to test retina images and SVG support between now and August 14, 2018. After that, retina images and SVG support will be bundled into our Essential, Premium and Enterprise plans. If you think you might be on an older plan, click here to double check. If you have any questions, hit me up @jess in the comments below! :point_down:

This release is the first of several of usability improvements that our team is working on so stay tuned for even more updates!

As mentioned up top, many of you here in the community submitted feature requests for these new improvements, and that had a lot to do with our choice to push these along. I’d like to give a personal shout out to @Phillip, @Dan_Jones, @Robert_Love, @Paul_Kos, @Domen_Kert, @ayedlin, @doratang, @Luke_Donoghue, @NikitaShilenok, @Sandeep_Bapna, @Roohbir_Singh, @Brett_Simonson, @Michael_P, @Michael_Ford, @Tim_Corlett, @Adri, @yosh_pdx, @Nicole_Williams, @Andi1, @DarrenDavis, @Angela_Buttjes, and @Robert_Brown! You’re all rockstars!

As always, if you have any questions, give me a shout in the comments below! :slight_smile:

Enjoy, and happy page building!


How To: Add High-Resolution Retina Images to your Landing Page (for use with retina screens such as iPhone, iPad...)
#2

#3

Amazing!! This is awesome!! :tada:


#5

Very cool (finally). How do I activate/use the retina image feature? Is this automatically happening for historically created pages (where image quality was high enough)?

Also, when I click on the link about additional documentation, the page says: Oops
You’re not authorized to access this page. :slight_smile:


#6

Hey @jradig! I goofed and linked to our internal documentaion, but I’ve updated it now and it’ll take you where you need to go! Also, @Cole_Derochie is going to give a bit more information with regards to activating retina images (he’s the product owner and he has way more insight than I do, plus I’m rushing off to a meeting :running_man:) Hang tight, he’s drafting something now! :slight_smile:


#7

Nice, I’ll use Align and Distribute all the time.


#8

Super happy about the align feature!


#9

Hey @jradig

How do I activate/use the retina image feature?

Now, when you select your images in the builder you’ll notice some new UI in the right-side properties panel

image

To check to see if your images are high enough quality you’re going to want to make sure it get’s :white_check_mark:'s next to your desired resolutions. You’ll see as you resize the images, these indicators will update.

Is this automatically happening for historically created pages (where image quality was high enough)?

As long as you have the high enough image quality (your image has the :white_check_mark:'s), all you’ll need to do is republish!

As an example, let’s say you have an image that is 1000x1000 by default. Without resizing, this will only get 1x. In order to get 2x, you’ll want to resize it in the canvas to at least 500x500 and publish.

Hope this helps!


#10

The align and distribute feature is not showing up for me. Is this something that needs to be turned on or is rolling out slowly?


#11

I am not seeing the new UI elements in the properties panel when I have an image selected.
I am also not seeing the align options.


#12

Hey @areid1220, that may be related to your account. I’ll send you a DM :slight_smile:


#13

Nice updates @Jess. How will this impact the page load time? Anything on the roadmap to help minify assets? Not straightforward I’m sure.


#14

This is like getting cake (retina images) with a cherry on top (alignment/distribution tools)!!! :heart_eyes:


#15

Hello, I am not seeing the alignement buttons. How do I activate it ?


#16

This is such amazing news!! :smile:


#17

Hey Etienne! This was happening for somebody else earlier but it resolved itself. Perhaps try a hard refresh in the builder? Would you mind sending me a DM with your account ID? I can take a closer look. :slight_smile:


#18

Whenever I attempt to upload a .svg file, I receive this error https://goo.gl/A2GB9T

How can I go about uploading .svg files - I’m using the normal method (Image -> Upload New Images).

Thanks!


#19

Hi Barney!

Great question! I chatted with one of our developers, @Mark_Wainwright, and he informed me:

Adding an SVG to the page will add to page load time just like any other image. But SVGs are usually way smaller in file size than raster images, so they’ll make much less of an impact than a JPG/PNG/GIF would.

For retina images, we load the smallest possible version of the image for the display the visitor is using. So on a standard 1x pixel density display, there will be no difference to page load time. But on 2x or 3x displays, the page load time may be slower because we will load bigger versions of those images (as long as the builder shows that the original image is large enough to support it).

Let me know if you have any questions about that :slight_smile:


#20

Hey Josh! If you wouldn’t mind sending me a DM with your client ID I can take a look and figure out what’s going on. :slight_smile: I’ll keep an eye out for your message!


#21

Great new features Jess!!!

Thumbs up for the shoutout also! :slight_smile: