I've been asked by a client if i could jazz up their tagline on their website i'm developing/designing. I've thought about the options and want to stay as SEO minded as i can but i'm struggling to think of a way i could strike a balance between having a really smart, anti-aliased looking heading at the top of their site under the logo but have it searchable/crawlable by the big G (google). Sifr? Cufon? Images? What do people recommend in terms of SEO and visual niceties?
Cufon only works with freeware fonts and most fonts are not freeware. sIFR is the best bet for cross browser compatibility. If you arent supporting older browsers, you should definitely go with the #font-face CSS attribute. Web font services like TypeKit, Font Squirrel, or the free Google Font Library are good bets.
Related
When I create a site there's a lot of white space around a section. That's the only section and I'd like to have very little margin.
Is ti possible to change the margin / padding?
It helps to distinguish between classic and new Google Sites when asking questions, as the answer is not always the same for each.
Assuming you mean new Google Sites then as far as your question is concerned, the answer is no.
New Google Sites is pretty good at automatically configuring the output for different sizes, and orientation, of screens to support monitors, tablets, and phones. The trade off for that is that you loose some control over how the content is displayed; including margins and padding.
You can embed your own HTML, and have far more control of what happens with that section of display. But not outside of it.
very quick one, I was always wondering, do internet browsers use for rendering OS API functions to create buttons, render mages and so, or do they render it all on their own?
I first thoght that it uses system api, but there are some effects like when screen fades into grey and you see only small window in the middle, you know, thet effect used on many picture albums online, which I dont really how to achive using for example only Win32 calls.
EDIT: To be more exact, I know that final drawing on screen will always use system API, but you can send prerendered image as you want to it. Thanks.
Web browsers use their own rendering engines rather than OS API. Using OS API to render buttons totally depends on the design decision of a particular rendering engine. However, to run on various operating systems these engines prefer their own rendering to offer same look-n-feel across platforms.
Gecko, for Firefox
Trident, for Internet Explorer
Presto, for Opera
KHTML, for Konqueror
WebKit, for Apple's Safari and Google's Chrome web browsers.
Ref: http://en.wikipedia.org/wiki/Web_browser_engine
Do browser rendering engines useOs api for creating buttons, writing text, creating boxes, etc., or do they render all of this on their own using OS API just for actually show the rendered image on the screen?
I implemented something of a browser rendering engine (see e.g. Table of Supported Elements and Supported Properties for a list of the HTML elements and CSS properties that it supports).
I use system APIs (.NET Framework APIs, which are thin wrappers around underlying O/S GDI APIs) to:
Measure words (strings of text)
Paint words
Draw lines and boxes
Fill rectangles with solid color
These are the kind of API functionality that's implemented by the Windows GDI.
There are also some system (O/S or .NET) APIs that I use, to draw buttons and combo boxes (see Rewrite standard controls like edit, combo, etc?).
Becouse, the whole rendering of text, graphics and so seems pretty hard to write completely yourself
Yes, implementing CSS and everything does take a while. You've seen how long it took the browser developer teams to implement: several calendar years, many person-years.
I tested my site on a mobile device and it loaded pretty quickly. However i had to scroll right to see all of the text. The text was pretty big as well.
How can i redesign my site so i dont need to do any scrolling and have smaller text? I know i I seen this before but i cant remember what site did it.
i removed my css and the device scrolled right until the end of my largest div. So i need css to solve this? What css do i need to make the text not big and not cause the user to scroll (horz) no matter how small his screen is?
Also do i detect the user agent in .NET and link an alternative css file or do i detect which css to use elsewhere?
yes you should design an own css-file for the mobile version of your website. either you check the useragent if it's a handheld or you work with the css media type handheld (which is not supported by older browsers) to load the different css-file.
edit:
with css you can also replace images with text
Is there a good way to create crisp, clear, LARGE font in webpages? I need to create a tag cloud effect on my homepage with different font sizes and colours.
I've got it set up in HTML/CSS but on the older browsers or OS's which don't support anti-aliasing as default it looks a bit... crappy.
I've played with sIFR, which worked beautifully but gave me some horrible load effects but I'm now wondering if there is a way to:
a) do browser/OS detection to split users by browser/OS combinations which I KNOW support anti-aliasing (they get raw HTML) and by "others" who get an image tag.
b) Some sort of JavaScript to add antialiasing?
c) Permanent solution to load a BG image in the div and hide the HTML text. (I know, I know, Google horror stories about de-indexing... but is it possible?)
a) Of course you can use browser detection. The easiest way to do this is probably using jQuery's browser method. (jQuery is an awesome JavaScript library that makes a lot of JS-development easier in case you haven't heard)
Depending on what browser (or OS) results you get, you could present the user with different solutions, from normal text to something like a Flash solution.
However, I advise against it. Things look better on new machines than old ones. That's just the way it is, which is why I recommend against spending precious time on minor glitches in older browsers. -- Unless users with older browsers are your main demographic of course. In this case, how about you just do it in Flash altogether? No use coding up two solutions if one always works, right?
b) You can in fact create anti-aliased text via JavaScript. Have a look at my project Die Stimme Gottes ("Voice of God" -- not for the religiously squeamish) for an example. In this project, I used the excellent typeface.js for this.
c) Just use CSS, maybe?
h1.welcome {
background: url('the-welcome-image.png') no-repeat;
color: transparent;
}
+1 Hank's comment. You have very little to gain by doing this. Some desktop browsers (including IE7+ and Safari) turn on anti-aliasing by default even when it's off at an OS level, and modern (post-XP) OSs tend to turn it on by default anyway. By forcing AA on the rest, you'll:
(+) improve the display a little for IE6 and XP+Firefox users who unwittingly don't have AA
(-) make loading slower for everyone (but especially users of limited mobile devices)
(-) defeat preferred font sizes
(-) unnecessarily annoy the luddites who deliberately disable anti-aliasing because it's “all blurry”(*)
(*: there are limited cases where this does even make sense, particularly for old, fuzzy CRT monitors.)
By the looks of it the best methods (in no real order) are:
1) Use an image. If you rely on SEO for the site then by all means add html and hide it using css using one of these methods
2) typeface.js - JS which will work across most modern browsers. Has some bugs and glitches but works nicely. If you're going to force anti-aliasing on your users then this works. Use sparingly. Author working on Opera and IE8 compatability though...
2) sIFR - Excellent script which dynamically replaces your selected areas of text with flash movies. Again some bugs and glitches, but if you're simply interested in awesome looking font then this is perfect. Increases your page load though, so as ever more is less, use sparingly.
I tend not to go with JS heavy solutions, as I like to have lightning quick page loads, but if you HAVE to have some good looking fonts, then these seem to be the most graceful and simple methods.
-webkit-font-smoothing:antialiased;
Force background color, redefining it for the class or element with the same background color. It works.
span.your_class {
writing-mode: tb-rl;
filter: flipv fliph;
background-color: #006cb8 !important;
}
Flash or Silverlight are your best bets for great looking font rendering
I have a DotNetNuke site where my main logo is a PNG file using transparency. I tried GIF but the quality wasn't good enough.
Anyways it worked great on IE7 but I just saw my site in IE6 and noticed that the transparency isn't working with my logo.
Does anyone know of a quick way to fix this in a DotNetNuke portal?
I don't know that it's a DotNetNuke issue as much as it is IE6. Anyways, here's a site that shows you how to work around IE6's png issues. Hope it helps.
http://24ways.org/2007/supersleight-transparent-png-in-ie6
For a DotNetNuke-specific way to fix the issue, you can install the DotNetNuke Widget Suite, and use the IE PNG Fix widget on your site (probably include it in your skin).
That said, if you're going to need to integrate something into your skin anyway, the widget doesn't give you a whole lot of advantage. If you're able to evaluate and integrate the techniques in the accepted answer, that's probably a better route to take.
IE6 doesn't support transparent PNGs. It isn't a DotNetNuke issue. You could try looking into some JavaScript solutions that help with IE6.
Googling "pngfix" should find a lot of different techniques for enabling alpha transparency in IE6.
One common one is a HTC behaviour file.
You can't. IE6 only supports a specific, and visually ugly, version of PNG transparency. I believe its PNG-8.
You can use a conditional comment to handle IE6 differently:
<!--[if IE 6]>
background-image:crappy.gif
<![endif]-->
There are some discussions regarding this on dotnetnuke.com forums, but I had the wrong date criteria in my search so the reason I didn't see any responses previously and thought I would ask here.
I think I found what I am looking for from a dotnetnuke perspective its a module that you install on your page which fixes this problem automatically. But unfortunately you have to pay for it. (I won't post the link since I don't want people thinking I was am asking just to advertise for them.)
It has nothing to do with DotNetNuke, it's an IE6 thing. IE6 doesn't do very well with certain transparent PNG.