Best way to make a logo that doesn't look like crap on big screens/phones?

Question

I am working on creating a simple text logo that fits in a 110x300 pixel space for a website. The thing is, at this small resolution, it looks pretty crappy using Photoshop. So, I tried Illustrator because I believe you can save vectors with it (I'm new to all this). From what I know, vectors don't lose quality when zoomed in (or on big screens). However, I have no clue what I'm doing. I tried to "save for web" a logo as a png 24, and it still looks like crap. Am I doing something wrong, or is it just not possible to save a high quality image at that size?

Answer 1

So, there is no way to save a vector image for a website?
SVG. Flash. HTML5 canvas objects (JavaScript).
That was what SVG was really made for, but it never found widespread use.
That's a pretty broad-based (and misleading) dismissal.
Use of SVG is increasing, not declining, and practically all current browsers now support it. So with such a statement, you would need to quantify "widespread". Of course SVG (like Flash and canvas) is and probably always will be less common than raster formats, but that's always been true of vector-based graphics in general, even in print. Less "widespread" use of something superior is an advantage to those who employ it. Sites which employ it effectively can be more engaging and dynamic than the far more "widespread" ones which don't. That's the whole point.
Fonts are also vector-based graphics and are certainly pretty "widespread" in use on the web. (Consider the potential of this in the light of things like font embedding and GoogleFonts.)
From what I know, vectors don't lose quality when zoomed in (or on big screens).
Stallone, your question is really more a matter of the platforms / browsers you are targeting. You have to be aware of what kind of zooming you are talking about and what is happening on what you're referring to as "big screens."
For example, you can easily launch Inkscape, create an SVG graphic consisting entirely of vector paths, and include it in a static web page. It will be displayed and rasterized on-the-fly by the local machine, as vector graphics are intended to do. But now, who or what is going to "zoom" it? Are you talking about mere screen "magnification" by the sight impaired in which the whole page is zoomed? Are you talking about pinch zooming on mobile devices in which the whole page is zoomed? Are you talking about projecting on the conference room screen in which nothing is actually zoomed (re-rasterized) at all?
Everything that anybody views on a computer monitor is a raster image, because the monitor itself is a raster imaging device. That's even true of vector paths you draw and view in programs like Illustrator. Vector-based graphics get re-rasterized on the fly--so long as the system in which they are being printed/viewed is capable of supporting that. The question boils down to when the rasterization occurs and what is doing the zooming.
Historically, web browsers don't do that. The "intelligence" (programming) involved in rasterizing vector paths on the fly has to be effectively "embedded" in the graphic or in an add-on program (browser plug in) which performs the re-rasterization locally on the viewer's machine. That's why Flash requires a plug-in and SVG has to be viewed in a browser that understands the XML upon which it's based (which most current browsers nowadays do) and HTML5 Canvas has to viewed in browsers which can run its JavaScript-like programming (which is still developing).
All this is constantly changing as mobile devices and platforms and ebooks proliferate, and all this is why designing for the web always entails some amount of experimentation on the platform(s) for which you are developing.
It's a big subject; not something you can get a crash course on in a forum like this.
JET