Buttons and Nav Images in PS and Illustrator

Hello Everyone!

I was wondering what your thoughts are on creating buttons and background elements like nav bars in Photoshop and Illustrator as opposed to purely using HTML elements and CSS rules to do so? One of the main advantages I have found in doing so thus far is the fact that you can use the power of Adobe for the actual design off the elements, as well as for creating button/nav bar text that does not have to be rendered by the browser and therefore remains the same across devices and also allows you to use whatever font you desire.

Are there any clear advantages or disadvantages in doing things this way that you all can think of?

Thanks for sharing your thoughts!

Ant

Unfortunately there is a disadvantage. It’s not possible to create a button without using that functions really well for disabled users. Especially the screenreader uses the information in the button. And blind users depend on those screenreaders. But keyboard users depend on the browsers rendering of buttons as well especially when using focus to find a fast way to scan a website.

Text in an image is not available for screenreaders. Even if you put it in an alt-text, it’s not enough on a button or link.

Therefore you should always use the html markup. And style it with CSS. Otherwise you won’t pass the accessibility audits.

You’d better use the websites of Google, Mozilla, Microsoft and Apple to give them some feedback on the problems you encounter. If we all do that then one day they might change the browser’s rendering of those elements.

This is how it used to be done ~10-15 years ago: there isn’t really any advantage now, because HTML/CSS allows almost any styling & fonts. The accessibility issue mentioned by @Joke is a huge downside: it doesn’t just affect less-abled users. You end up with text that isn’t text, it’s just images of text, and is not selectable, it’s not accessible to users or search engines, etc etc. It means you’re making images of HTML elements instead of actual HTML elements, which breaks/complicates many things. You now have a set of elements that cannot be changed except by having a copy of PS/Illustrator and manually reuploading every time you need to change anything. With CSS/HTML, you can generally just change a few lines of code. With PS you can’t do that: it tends to create very-difficult-to-maintain web pages.

The programs are fantastic for designing web elements, but are not good for generating elements, with the exception of SVGs from Illustrator/other vector drawing application (normally used for icons). Then you’re generating actual DOM, though even then manual editing/cleaning of the generated code is normally necessary

1 Like

@Joke Ahhhh I didn’t even think about that but it makes a ton of sense. Thats why I posed the question to those more knowledgeable than myself:) Thank you so much for your input! I guess that would really be a huge disadvantage for several reasons, especially those which you outlined.

@Joke @DanCouper The reason I asked the question is because I am creating a site the will basically be a repository for images and videos for an upcoming fishing trip to Holland that my friends and I are taking. Although none of us are disabled I wasn’t even thinking of that aspect of the site design originally. I guess you can’t go wrong in developing good habits early so I will stay away from using PS and Illustrator to design any actual HTML elements.

Thanks again to the both of you!

1 Like

@Network_Ninja Good luck with creating your site. And I wish you lots of fun on your fishing trip!

1 Like

The key thing is that with those applications, what you’re designing is a picture of what you want the design to look like, and that picture is kinda fixed in terms of size and format etc: with PS it’s a raster image that’s a set height and width in pixels (with SVGs in Illustrator that’s not the case, but SVG is a bit funky and has quite a lot of gotchas)

HTML doesn’t really map to that model very well: for example, if you’ve got a button, you can change the text in it and the button will expand to contain the text. You can adjust the colour, the borders etc by just changing the CSS. And so on. Normal workflow is design in PS/Illustrator/etc, where it’s easy to get things up looking how you want, then translate to HTML/CSS

1 Like

@DanCouper I understand what you are saying with raster vs. vector and how those formats may not map onto buttons very well. What I did was to storyboard the site in PS first and then I was thinking that the font I was using looked really good but it was something that I know that not every browser will be able to render so I just thought “What if I just use PS to design the buttons and text as an image and then use HTML coordinates to for linking?”.

Thanks to the advice from you and @Joke I will not be doing that. I’d like to develop good habits early so once again thanks to the both of you!

1 Like

If you like how a button looks in PS, why not save the image and add it to a button? All images use alt property.

To a screenreader the text on a button is not the same thing as an alt-text in an image. They are just two different elements on a web page and therefore the screenreader will treat them in a different way.
And text in an image isn’t easy to read if enlarged. Both are important to people with difficulties with their eyesight.

Even if you think your website won’t be used by those people Google also won’t like what you did. The search engine is totally blind and depends as much on good coding as the screenreader does. It might even effect your ranking in the search results.

On top of that in some countries it’s against the law to make your website inaccessible for disabled people.

And then there is the usability as well. A button should look like a button to make sure people find it. What looks nice may be ineffective if people don’t use it. That could cost the website owner a lot of money.

So it’s better to create other nice things on a website and to make sure buttons are buttons and text is real text and no image. :slight_smile:

I think most of the people commenting on this page about screen readers have never used one. It’s an insane amount of information a screenreader reports on a single page.

@joke: You are absolutely incorrect about the alt attribute. Screen readers can describe an image using alt attribute.

<img src="/images/mydog.png" alt="2 year old poodle">

If you look at Amazon.com and its website,. we could all agree that they’re not hurting for business. Yet if you view the html for its site,. you’d see several of the things people are suggesting to do on this thread., frankly aren’t true.

The only reason I stay away from images is because the load speed of a webpage. Outside of that,. there’s no other reason I can think of why to avoid images. Even so,. once the browser caches the image on the first page load, the images will load almost instantaneous.

Screenreader accessibility ranks very low as a priority.

I also want to comment that I’m a full-time developer who has create hundreds of websites. I’m not reading this stuff from a book. It’s from sheer experience.

@kerafyrm02 Screenreaders do read alt text, but to them it’s just a description of the image, it’s not the same as the text on a button.

It’s that insane amount of information that makes it important not to create extra steps for blind users.

In general you should use real, html text for text.
And of course the use of images is no problem. Just don’t use them to replace semantic html.

@kerafyrm02 This discussion wasn’t about images and ALT text. It was about replacing buttons with images and replacing html text with text in an image.

I can read. My suggestion was to make a button with an image.

<button><img src="/path/mydog.png" alt="a two year old poodle"></button>

The OP gets his image,. and the screenreader user gets a description.

1 Like

I found a work-around to the screen reader issue
Utilized it in this page.

In this case css was not going to give me the exact look I wanted. Which was the cut-out magazine letters.Using photoshop I created the first name and last name in these letters.
html

<h1 id="title"><div class="top">EvaRIStO</div><br><div class="bottom">ParamOs</div></h1>	

then the font color is set to transparent and the cut-out letters are used as a background image for the division containing the word
that way it is visible to screen readers. As can be seen in this image.

the same approach would work for any other element
rules are meant to be broken, you just have to know how to break them the right way

Never use <br>. Even though it is valid HTML., you should only use CSS to style.

yeah, I could have used css to move the elements up and down seing how I’m using it to rotate them but a break got the job done with less code so why not?

Why not?

Because HTML creates the elements, CSS styles and JS gives it behavior. If you were needing to modify the page at a later date and you wanted to remove the space., you would need access to the HTML of the page.

In some cases,. HTML is rendered by the server. Not everyone wants new employees to have access to the server side code, whereas CSS is already accessible to everyone. So it doesn’t matter if you give a person (say it be a new employee) access to your CSS files.

I also disagree with your @import with CSS.

This prevents your css files from loading concurrently. Which means longer page loads.