SEO for imaged typography [closed] - html

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 9 years ago.
Improve this question
Since font rendering is a nightmare on cross platforms (i.e. windows has very ugly anti aliasing, and TTF fonts are not anti aliased at all) I came up with the idea to create a png file for every heading in my design.
My question however implies that if I would create a H1 html element and hide it with CSS while the title is shown by a png image, would search engines this work around?

What you are proposing is a very common method for replacing text with an image. Search engines don't mind.
I would suggest that instead of hiding the element, move it off-screen, -5000px or so. Also, your users are probably going to hate you, since your site will be slow. Best just to deal with the typography as it is. I don't know what Windows system you're using, but anti-aliasing works just fine on all of my Windows boxes. If you need a different font, consider web fonts.

Related

HTML elements and inline CSS in text fields [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed last month.
Improve this question
I'm trying to find ways to customize a website where I can only edit the content (text and image) via Contentful’s content management interface (the company that developed the website refuses to integrate the corporate identity and style guide and says it "might" be for future versions).
What do you think about adding HTML elements, inline CSS, or even adding style and loading fonts via style elements directly into the text fields? Given that these elements will obviously be in the middle of the body, is this really bad practice in terms of security and SEO (or other)?
Thank you a lot for your time.
I wouldn't say it's bad for security since it's just style (meaning how the users see the website).
Have you thought about linking the style file? It would maybe be a cleaner solution (don't forget you will have to maintain it later, and having it in a clear way will save you a lot of time reading and wondering what you did, so it's better to be clean) than adding everything inline inside body
As for SEO I believe it's more affected by the use of the elements than having the elements. I mean, if you want some content use instead of a tag that resembles by style to a heading.

Differences between CSS images and SVGs [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I was wondering if there are any differences between CSS images and SVGs on your website.
By CSS images I mean images created with divs in HTML and styled in CSS (like this: https://codepen.io/andrewrock/pen/jOEZxrY).
Yes, CSS images are more time consuming, but apart from that they're both animatable, you can use CSS variables on them, make them dynamic with JS, ...
So what are the differences of those 2? (Performance, Rendering, ...)
There are countless reasons why you should use a svg instead of a group of html elements:
Creation
There are hundreds of svg editors that allow in a simple way to realize a drawing or an icon. This is not the case for html. So drawing a building icon in full css would be really painful.
Sharing
The fact that it uses a standardized file such as svg, allows you to export your work to other tools and easily be exploited by someone else. Use tricky css rules to manipulate some span or div can be difficult for a newcomer to your project to understand.
User experience
On a website that use svg, you will able to open it on a new tab or to download it. Thats very comfortable for an user for exemple. If you use html an user will not be able to manipulate and thats can be really annoying
Performance
Because the svg is called most of the time a file you can compressed it on your server to gain more space and performance with some tools like Appendix J

web 2.0 sucks huge floppy disks? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I was able to create a web site 10 years ago with Microsoft Frontpage without learning anything, today with a copy of Adobe Dreamweaver CS6, I can't even figure out a way to change the font size of a simple text. CSS is the thing, so I went through the CSS tutorials in w3 and I get it now. It's a good idea, but It is also a good idea to kill creativity, ie all sites like similar, see screenshot below. It sucks floppy disks.
My questions will be:
Does web 2.0 really kill creativity?
Is there a "modern" web design application that I don't need to go into these CSS thing?
Is there a way to create a circular navigation menu like this using css? I want to have this menu in the middle of the page, and with a button on the corner to activate it.
No it doesn't
You don't have to use CSS. You can use inline styles,
but it won't be right. Using the CSS is a good coding practice and
you just need to learn it better.
Yes. If you google it, you'll find several links. Here is just some examples:
https://css-tricks.com/building-a-circular-navigation-with-css-clip-paths/
http://www.cssscript.com/pure-css-circle-menu-with-css3-transitions-transforms/

How To Create a Resolution Scalable Arrow For Website [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I have seen in Yahoo and other sites including sites for mobile where they have this little arrows pointing up and down and these seem to scale when one zooms into the viewport. They seem crisp on every resolution level as well and I am looking to create something similar. Here is the arrow I am talking about:
arrow image >
This arrow is from the yahoo "Download All" button. Was it done with SVG, is it a UTF-8 symbol? Can this be done in CSS?
You could use something like Font Awesome.
http://fortawesome.github.io/Font-Awesome/
Font Awesome is for use with Bootstrap but there are many similar fonts ets out there for regular use too.
Here's an article detailing some:
http://thenextweb.com/dd/2012/10/12/7-gorgeous-icon-fonts-to-speed-up-your-site-and-your-design-process/
These icon sets are usually scaleable vector icons meaning they will work well at different resolutions.

Web Icons for Open Source Project [closed]

Closed. This question is off-topic. It is not currently accepting answers.
Want to improve this question? Update the question so it's on-topic for Stack Overflow.
Closed 11 years ago.
Improve this question
I am working on a site, and I am looking for basic profile icons such as:
http://akcdn.okccdn.com/media/img/icons/home_new_user_guide.png
I would use those, but I am sure those are typewritten.
Where would I be able to find similar icons that I can use for an open source project?
Thanks :)
Smashing Magazine has semi-regular free icon roundups, including icons in a wide variety of styles. They're also under a wide variety of licenses, so make sure you check before using one.
FindIcons is a great site where you can find all icons that you need in almost any format and any size (may vary). And you can sort search results by color, icon style, license etc. enjoy!
iconfinder.net is my go-to. It's been around forever.