Streaming live at 10am (PST)

Tutorial for IE compatibilty using custom code?

#1

Please could Webflow provide a tutorial on making websites compatible with IE?
Using a browser testing site, I tested Webflow’s own website and saw that it looks fine on IE and that this is due to custom code. I have clients that still use IE or have stakeholders that do so it would be amazing if Webflow could share with us how to do this?

1 Like
#2

I agree.

I just recently shared my photo website with a bank manager who was potentially interested in working together and when she opened it in her IE browser my site was pretty terrible looking.

In particular the images (im a photographer) were stretched out and distorted across her screen. There were other issues with button and layout as well but regardless. Less than professional. ahahah.

any help or tips would be super valuable to me. cheers
www.briandesimone.com

#3

@briandesimone - If it was only that easy. If supporting IE is a requirement, then you are forced to make choices about what CSS/Browser features you will use and what workarounds you might need to implement.

As you test your site in IE you can then see the issues and work to resolve them.

Caniuse.com can help you determine where issues are likely to occur. There plenty articles out in the tubes to help you slog through the issues and workarounds.

You are free to design using modern features or not. That is not really up to webflow. That is up to the designer or the client.

#4

Thank you @webdev!

I will check out these articles. I am new to web design and hadn’t realized that IE was even an issue until today. Happy to know that it is being phased out. Much appreciated.

Cheers!

#5

I totally agree…a tutorial on every type of fallback for IE is unrealistic. However, I think a tutorial on how to use css grid with webflow and include IE / Edge fallbacks would be great. I suspect that is what a lot of the IE layout issues for folks are stemming from. It doesn’t have to be super complex. Simply a couple common components and how the fallbacks are implemented with custom code. I have yet to use css grid for production because I’m not really sure how to best implement fallbacks when it comes to webflow. Just a thought.

#6

One of the challenges and benefits with webflow is that CSS is generated for you. You can’t edit the CSS unless you export the site and host it externally.

So for sites that need IE support, I suggest exporting your site, editing the CSS code, testing it offline, when ready take the new CSS you appended to the stylesheet and add it to the custom code area back on your webflow site.

Make changes, rinse and repeat.

Is it worth it? Yes If it is in the spec, that means clients are paying for the extra work. If it is not in the specs then I don’t need to deal with it. I do let clients know that up front. When they see the additional price for IE compatibility, most dump it. They have the choice.

#7

Thanks so much for your response!

When I looked at Webflow’s code I saw that they were using placeholders.js. I’m not a coder so I was having a hard time figuring out how to use this. But I was thinking that I could make the site how I wanted it using all the modern features, then once it’s finished, duplicate it. Then I’d make the duplicated version IE compatible then export the Javascript of that site and using placeholders.js, put it into the code of the original site. Do you think this would this work?

#8

This is only designed to address adding placeholders to input and text area fields. So no.

https://jamesallardice.github.io/Placeholders.js/