HTML Tips

[dfw_pilot]

There are a lot of gifted and smart people here, especially in the realm of beer drinking html and css. If anyone has some fun, interesting, or cool html/css tips or tricks that they have come up with or use on their site, please feel free to share.

Like many, I use

Code: [Select]

<meta http-equiv="refresh" content="330" />in the head section of my pages that have graphs, gauges, and charted weather information. I use 330 seconds instead of 300, even though I'm in a five minute update in WeatherCat, just to make sure the page doesn't reload with old data when WxCat is still generating the pages.

Then I got to thinking about using it on my custom 404 page, too. You have a custom 404, right? If you do, make sure you use absolute urls and not relative ones. Otherwise: mydomain.com/bad_page.html will produce a good 404 page, but: mydomain.com/foo/bar/bad_page.html will foo-bar your relative linked 404 page.

Finally, on my custom 404 page, and my submit.php page (the page someone gets after submitting a comment that says, "Thanks for sending me a note") I added this:

Code: [Select]

<meta http-equiv="refresh" content="15; url='http://www.castlehillsnorth.com'" /> which will kick them back to the homepage in 15 seconds. If someone reaches a 404 and doesn't click on a link in the menu after 15 seconds, they just get booted back to the homepage. Same with the submit page. To me, as a professional pedanticist, I just like tidying up what the visitor will see and where they will end up. To get real for a second, my site gets zero visitors, this is just an academic exercise. (My site gets DrudgeReport visit numbers in my mind, though!)

Share your thoughts and tricks here for the rest of us.

[dfw_pilot]

Do you have an old link to your website from years ago that you don't use anymore? I have found, both on this forum and others, people's posts with links to their weather site, like: mycoolsite.com/weather but, sadly, the link is dead. If you change the location of your site but can't remember to go back and change each url on every forum, you can do this: 1) add an .htaccess page in that old directory that forwards visitors to your new site, 2) use the the poor man's 301 DNS redirect with a bit of html.

1) Use TextWrangler to make a new .htaccess page and put it in your old site's directory:

Code: [Select]

Redirect mycoolsite.com/weather/index.html http://www.mynewdomain.com/That way, when people find your old posts and click on the link you provided years ago, it dumps them off at your new site.

2) 301 redirects are best, but html will work too:

Code: [Select]

<meta http-equiv="refresh" content="0; url='http://www.mynewdomain.com'" /> forwards visitors in zero seconds, to your new domain.

[xairbusdriver]

Great idea about the auto-redirect on the "comments" and especially the 404 page. Frankly, I've never seen anyone ever mention that technique in the many 404 page discussions! htaccess files can be very powerful, also!

Unfortunately, many 'dead' sites are due to ceasing to have access to that host. In that case there's not much people can do with what used to be there. That is probably more common with our, usually, personal, non-commercial, one-man "operations"!

You've reminded me that I need to reply to a contact message from a mailed scams site I created some years ago. While I have lots of text concerning what the purpose of the site is, how I'm simply the "messenger" not the SCAMmer, 95% of the contact messages are from folks asking for "support" from the SCAMer! Sometimes I wonder if people's reading skills are even up to the third-grade level! Never mind thinking about their logic skills. Just as many people say, "If it's on the web, it must be true." I'm seeing people, who obviously have zero computer skills, saying, "If the letter has my name and address on it, it must be a personal message to me. Please take my money!"

Slowly move back from the keyboard... and ask someone to disconnect it from the outside world.

[elagache]

Dear Toby, X-Air and WeatherCat "geniuses" . . .

  . . . . Now you've got me - really - confused!! . . . .

There are a lot of gifted and smart people here, especially in the realm of beer drinking html and css.

No, no, no! You've got this completely wrong!  There are a lot of gifted and smart people here, especially in the realm of html, css and beer drinking.   

After all, Stu take his travel trailer caravan all over the United Kingdom in search of the absolute best Guinness! 

  .. Cheers, Edouard 

[dfw_pilot]

Here's another fun html tip: Facebook sharing.

If you share your website as a link on Facebook, you need the proper <meta> tags for the Facebook content scraper to share the title/author/preview image, etc. You can follow this guide to setting up the meta tags in your <head> so that FB scrapes your site the way you want it to.

Here's an example from my header:

Code: [Select]

<meta property="og:url"            content="http://www.castlehillsnorth.com" />
<meta property="og:type"          content="website" />
<meta property="og:title"          content="Castle Hills North Weather" />
<meta property="og:description"    content="Find the current weather for Castle Hills North" />
<meta property="og:image"          content="http://www.castlehillsnorth.com/images/bannerfb.jpg" />
<meta property="og:image:type" content="image/jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="675">

Which produces this when your url is posted to Facebook by anyone:

[xairbusdriver]

No thanks! I don't Twit/FB/Google+/other "social" sites. I have SpamSieve working overtime as it is! I don't even use Google for searching! DuckDuckGo is great! I know "Internet privacy" is an oxymoron, but my family and friends keep in touch just fine with text-only email. OK, some 'friends' don't use a Mac, but that's what SS and ClamXav are for.

If you want Twit here it is, I have returned to Safari after using the Poodle-Proof Chrome, however, since Apple supposedly fixed the SSL exploit.

[Blicj11]

I don't even use Google for searching! DuckDuckGo is great!

I tried the Duck for 2 weeks and went back to Google, which, for the things I need, has a superior search engine.

[xairbusdriver]

went back to Google, which, for the things I need, has a superior search engine

Well! There's your problem! You need to change your "things" you need to search for!

Next!

I agree, DuckDuckGo is not as 'mature' as Google, but what do you expect with a name like "DuckDuckGo"! But your comments helped get me to take a look at the myriad of settings available, thanks!

[dfw_pilot]

With the ubiquity of iDevices out there, adding an Apple Touch Icon to your site is a worthy effort that takes just a few minutes. Some of this was alluded to if you ever downloaded the ipwx.html file from Steve and Elagache. I've added these icons to my sites for years . . . because it's dead easy.

The hardest part is finding an image that you like that will work. This will be an image saved to the home screen of an iDevice when someone "Bookmarks to Home Screen" your site. Make sure it is cropped perfectly square and save it as a .png file at 144 x 144 pixels. You can waste time on different resolutions for different iDevice resolutions, but I just use the largest size and it will automatically scale to each person's device. Name it: apple-touch-icon.png and put it in the top level of your website.

For extra credit, you can add:

Code: [Select]

<link rel="apple-touch-icon" href="/apple-touch-icon.png">to your <head> section, but that's just to tidy things up; it will work without that code.

Now, when someone bookmarks your site in iOS Safari or add your site to their home screen, your image will appear instead of a nasty screenshot of your site. All the best,

dfw

[dfw_pilot]

Not necessarily an html tip, but something I noticed today: color profiles.

Some of my png files were different shades of color, depending on whether I viewed them on Safari or Firefox. It was very subtle, but drove me crazy. I realized that the png's that looked a bit dull in Firefox had no color profile imbedded in them. It's a simple fix with Apple's Preview. Download any discolored image files off your server and CMD-I to get info on it. The Info tab will show you the color profile embedded in the file under "More Info". The slightly off png's didn't have a color profile, and the one's that looked great in Safari had the color profile: "sRGB IEC61966-2.1"

I downloaded the slightly off png's and opened them in Preview. Then -> Tools -> Assign Profile. Pick the profile you like, mine is sRGB IEC61966-2.1. Save, re-upload. Finished! Enjoy even, bold, and most importantly, matching colors across browsers for all your website's images.

[Blicj11]

I downloaded the slightly off png's and opened them in Preview. Then -> Tools -> Assign Profile. Pick the profile you like, mine is sRGB IEC61966-2.1. Save, re-upload. Finished! Enjoy even, bold, and most importantly, matching colors across browsers for all your website's images.

Thanks for sharing these tips. this one is great.

[TechnoMonkey]

Here is one to easily compress your pages.  Just put it a the top of any page to compress.

<?php ob_start("ob_gzhandler"); ?>

[dfw_pilot]

Nice!!

[Blicj11]

I don't want to hijack, but try this link. The best option would be to change your theme to one that does this automatically for you. So many good themes out there already do this, so you can't really go wrong. All the best,

dfw

I moved this here from the other thread because I didn't know where else to go with it. I looked at my theme's header.php and the viewport meta tag is already in there. It's supposed to work (referring to autosizing for iOS devices). That's all I know.