How to create a responsive website banner in Adobe Illustrator?

[kobalt_3864]

I need help creating a responsive website banner in Adobe Illustrator. I'm looking to design a banner that looks great on all devices, from desktops to mobile phones. How can I set up multiple artboards for different screen sizes and ensure the design elements scale properly? What are the best practices for exporting these banners to maintain high quality? I want a responsive banner for my Kobalt (More Information )website to effectively showcase our tools and provide a seamless experience for users on any device.

Any tips or detailed steps would be greatly appreciated.

[kobalt_3864]

Adobe doesn't allow me to add links to my website in posts, so I'll include it here in my reply. If any expert wants to see my structure for giving better advice, they can visit my Kobalt website at (
https://kobalttoolsinfo.com/) . Thank you for your help!

[Anubhav M]

Hello @kobalt_3864,

Thanks for reaching out. Would you mind trying the suggestions shared in this help article (https://adobe.ly/3WN5pgb) and letting us know if it helps?

Looking forward to hearing from you.

Thanks,

Anubhav

[Monika Gause]

Posting a URL in this forum makes your post appear as spam and even get deleted completely. 

If you want to show something, make a screenshot and embed it in your post.

Responsive means that the layout gets adjusted when you change proportions. That can be done in InDesign.

Or you could check out Adobe Express for it. Illustrator doesn't do that.

[Kurt Gold]

This is not something that can directly be set in Illustrator.

Depending on your specific needs, you may use SVG files which should be recognised by all common web browsers nowadays.

If you instead are dealing with raster graphics, you'd have to create different versions of your banner and make sure to display the appropriate ones depending on the specific devices and their screen resolutions. Or you may rely on proper scaling capabilities of modern web browsers. Anyway, this is a matter of coding, not something you can set in Illustrator.

In any case, this is still a demanding task, given the fact that there are so many different devices in use. Even the most professionally created (so-called responsive) websites do sometimes look weird on some devices due to unexpected or overlooked conditions.