The Basic Updates to HTML over the last 15 Years

First let me say that I STILL design my sites using CSS elements and HTML tags and attributes to give my websites improved function and form. I won’t deny that sometimes they are not pretty – but I design to suit my needs now, not for anyone else.

Whilst many other designers are now using purchased templates, I enjoy writing the background code. I enjoy that little yippee-moment when the CSS works.

I remember the first time I built a sprite based header navigation in blogger.com way back in 2004! Because blogger enabled users to modify the HTML and CSS, I spent many an evening tinkering, learning, applying, reapplying, until I had a site I liked. It was also at that time that I started creating graphics for sprites.

This morning I wanted to write an explanation of what I have enjoyed over the last 15 years of coding CSS, yet felt I couldn’t easily put it into words. Thankfully I found Casadaro Shearrod’s simplified yet succinct list displaying the basic differences/upgrades of HTML over the last 20 years.

HTML 1 – linked documents
HTML 2 – linked documents with stylized text and tables.
HTML 3 – more of 1 and 2 with some Browser specific features.
HTML 4 – a re-evaluation of 3 to removes some clutter that arrived in 2 and 3.
HTML 5 – pretty much the same as 1 with the ability to specify document structures and multimedia element.

His last line below is the #1  reason I stopped designing for others. 

Knowing HTML5 in practice means we know HTML and CSS. We can do what used to be done with HTML 1,2, and 3, but we can do those things more effectively, with greater efficiency, and on a larger scale. This is what gave birth to the Web application and server side programing and scripting but, that’s a whole different talk.

HTML and CSS are not difficult to learn, but it is time consuming to both unlearn and learn as updates occur. I chose to stop. I achieved what I set out to do, so was able to tick it off my bucket list of achievements, then move onto new ventures.

And that is where I choose to end this article. Does this mean I no longer code? Are you kidding?! Reading some of the URL‘s linked above gets me fired up and interested again … so I am already pondering my website revamp!

Tool Board

Quotes from What are the differences among HTML2.x HTML3.x and HTML4.x?, written 7.Nov.2014 by Casadaro Shearrod.

Save

Save

Advertisements

CSS Snippets + Sites of Interest

I wrote similar posts to this one a few years ago, but two new loves have stolen my night and online life: Children.

Our first little-man was 2.75 years ago, our most recent lad was born on March 2nd 2015. Aha,  just 3 days ago. He is still in hospital with mum as she recovers from her belly-slashing. I have only hugged him three times, helped him have his first bath, and rocked him to sleep once. He is adorable.

But I digress.

I am a HTML trawler. Yes, I scrape your HTML to learn how a thing is happening and how I can reproduce it. Rest assured, I don’t simply copy and paste. I copy and paste into an editor, test it to ensure I have all the components … then carefully research it. I want to know how and why, it has always been my passion. Heck, when I first got online in 1998, I spent about two years reading LOTS of information regarding HTML and CSS (and a few other webdev languages) as my main focus.

Which is a great segue into my favourite paragraph by Daniel Mall: It says everything about my (sporadic) reading, testing, writing, coding and creating CSS/HTML over the last 16 years. Here it is:

Construction Site I read as much as I could from people like: Mike Davidson, Shaun Inman, Jason Santa Maria, Dave Shea, Jeffrey Zeldman, Jeff Croft, Andy Budd, Eric Meyer, Ryan Sims, Jeremy Keith, Garrett Dimon, Jared Christensen, Mark Boulton, Wilson Miner, D. Keith Robinson, Faruk Ateş, Ethan Marcotte, Derek Featherstone, Greg Storey, Cameron Moll, Roger Johansson, Khoi Vinh, Dan Cederholm, Dan Rubin, and so many more.
/…/ When these people wrote a new post, I read it.
/…/ This was a community I wanted to be associated with.

Wow, me too! And the funny thing? I am rereading their blogs & articles again after a long hiatus. It feels like finding old friends. None of them would know me, but I feel like I know them. Many of the site designs have changed (that’s how well I feel I know these people, I remember some their sites from 10 years ago!), yet their writing style is much the same, though evolved. The webdev bug is strong in me and ready to resume learning.

So now let me show you what CSS/HTML I have found via my #scrape&learn process. I won’t explain each, I simply show them. If you have an interest in this field, you will see the value in them:

Restoration of Rotunda on River Torrens

FIXED ABSOLUTE

/* Sits at base of page, beneath all text. Could be used as a fixed base */
.base { background-color: #666; color: red; text-align: center; padding: 0.5em 0; position: absolute; bottom: 0; left; 0; width: 100%; }
.base a { color: green; text-decoration: none; }
.base a:hover, .back a:focus { color: yellow; }

// Found here

VIEWPORT

Version #1

<meta name=”viewport” content=”width=device-width,initial-scale=1″ />
AND
/* Fix for device screen width */
@viewport {
zoom: 1.0;
width: extend-to-zoom;
}
@-ms-viewport {
width: extend-to-zoom;
zoom: 1.0;
}

Version #2

<meta name=”viewport” content=”width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no” />

JITTER

<p class=”jitter” style=”left: -4px; -webkit-transform: rotate(-1deg);”>

Example here

Cliched View of Adelaide Iconic Horizon That’s enough samples for you. Three each time is enough.

Okay, next I show you interesting #webdev sites. I am always finding and reading tidbits of information about stuff I think can make my own site look better, or else which I can incorporate into #holdingbay pages. Yet since delicious.com fails for me regularly, I will post as articles with my descriptions. Plus it keeps my browser bookmarks tidier! Here goes…

1. Textile live web editor ~ A WYSIWYG editor where the code is on the left an the output is on the right. Includes the final HTML output for easy insertion into the page of choice. I use it for creating blog posts. Textile is so much easier for attaching URLs.

2. Fillerati ~ Lorem Ipsum is often confusing for clients. I had a client a few years back who asked if the content had been hacked on a #dummysite I was showing them. Sigh. This may still confuse them, but at least my english-speaking clients will at least go “Ooooh!”

3. A Pixel Identity Crisis by SCOTT KELLUM January 17, 2012 ~ Basically, pixel definition changes the defined appearance of a site on a smartphone. A long read, but our design process will improve for it.

4. Stephen Coles ~ Visit his ‘bits of work’ pages. Mostly visit to see how he uses his website. Inspirational. # |

5. Carolyn Wood ~ Another great web site design. Simple colours, easy to follow, uncluttered and to the point.

6. HappyCogI have visited their site many times over the years. The home page has changed dramatically since last I looked. Thankfully their articles are still cognitive. ;)

7. Quantity Queries for CSS by HEYDON PICKERING March 03, 2015 ~ Wow. Heavy reading, yet very interesting. May have to read that again. I can see already it will be worth it to incorporate into my site, thereby making it easy to access from a tablet or smartphone. Can see potential for expansion.

8. How to Build an App (.tumblr.com) ~ The thing most fascinating is the slightly tilted paragraphs. The answer is in the HTML. I have included in my sample CSS above. PLUS the article is interesting and educational.

9. What is your ViewPort size? ~ With so many smartphones and devices on the market, how can you be sure of the dimensions of any of them? Yes, this site can tell you. Email to yourself, open in browser on your device. Voila!

Nine is enough. I will try to write these style of posts once a week. Heck, with WordPress I can schedule them – and I still have hundreds of interesting articles and sites waiting to be re-revealed. Watch out for them…

Multi Skilling Keep the Mind Sane

Diversity is fun, but it can get difficult to focus on so many things at once. It’s actually what’s keeping me away from Facebook.

Right now I have my fingers in a bunch of proverbial pies that are starting points to potential virtual end-products.

One part of my brain is focusing on a new site design for my primary site – ezcreate.com.au. It is going to be filled with LOTS of circles. Some of them transparent PNG’s, others created with CSS utilising multiple background techniques AND circular bordering. That will be interesting. A lot of online research is being put in to determine exactly how to write the code.

Another part is currently doing the ASX Sharemarket Game. I read the Australian Financial Review most days from cover to cover. That is actually fun. I scan in those of interest, write copious notes on information that may or not relate to the companies I am investing within.

Another part has an idea for software that could revolutionise a whole lot of stuff I have been involved with over the last 18 years. Enough said on that for now. Anyhow, more coding and program to learn. Why? Just for fun. Aha, I am weird like that. Not sure when that will happen. Amusingly I have already designed the logo and app icon. Weird still, right?

Yet another part of my brain is currently job hunting. L1 Helpdesk is my preference. [See my LinkedIn.com account for my skill base]. Facilities Management would be also very interesting. [Again, LinkedIn]. Records management at a push, but I am not a big fan any more.

And I am contemplating a few courses, particularly in business management AND/OR getting RPL for my IT Helpdesk knowledge, experience and ability. Because it is all mostly self-taught, taught on the job, or simply experience from my long-term government role.

Not busy at all. Diversity is a no brainer. Completing the bucket list is the next step.

Bookmarks of Interest

Roped Rock God

Despite two real-world events today, I’ve still managed to get onto the online world to visit and read a few world wide web sites of personal interest … and here they are for others to read.

OK, they are really published here so I don’t have to bookmark them on my computer. Since Deli.ci.ious changed hands I have found it to be more useless than a watch with no hands.

What this list really shows how extra-eclectic my reading often is. One of them has music playing in the background – a little old hat for web sites, yet this is cool.

  1. The Business Mistake that Cost Me $1.5 Million – Entrepreneur Jen Bilik learned a lesson the hard way when she trusted the wrong person.
  2. Backed by first round’s dorm room fund, Pagevamp turns Facebook pages into Websites.
  3. Why businesses should act human on Facebook.
  4. Conran imagines a digital camera with a retro spirit .
  5. StartUp Weekend Adelaide . Being a long-term resident and worker in Adelaide, I had to mention this page. I really should get along to one of these events, just to see what it really is all about.
  6. The difference between a Mobile Site and a Full Site by Jakob Nielsen.
  7. The Innovative Brain

Monitor Failure

For anyone who think they can determine a person’s personality by the web sites they visit … good on you.
For anyone thinking this is just an average post, I agree. It’s time I started writing again. Again.

What is your Site-Design process?

I ask because Smashing Magazine have got a Poll asking that same question. I voted accordingly, but felt that was only half the story. Here is my full web site design process: (Read below, whereas the link goes to the poll!)

Macro Perspective

My Site Design Process

1. Paper for Client discussions, HTML and CSS
Generally do a LOT of wire-framing on paper. Love my 2B pencils and .9-push-pencils. Sometimes takes forever, other times happens in moments. Particularly when clients give me carte-blanche. This usually pertains to the design, not the finance.

2. Notepad++ for HTML and CSS.
I like using Notepad++ to write code. Yes, so old school, yet simple to use. I taught myself everything with DW3 about ten years ago, then reverted to MS Notepad when it couldn’t handle layers. I’ve heard the latest version does all the bells and whistles. Meh. Since discovering and learning Notepad++, I cringe when I think back to the 100+ page site I created and maintained with MS Notepad.

Then I get the paint colour-chart out and play mix-n-match. The real fun part.

3. GIMP for Graphics.
I like to build mock-ups in GIMP , then break down to individual graphics one at a time, having fun plying with the textures, typography and all the tiny-pixels.

5. CS3 for photographs and special images.

6. Test in every browser: IE7/8, (I’ve stopped testing in IE6), Chrome, Firefox, Flock (still), Opera and Safari. Not always in alphabetical order ;)!.

Simple really. Which is surprising, because I don’t do any of this much any more. Photography is my game now , and I only code for close-to-home clients.

What is your #1 Favourite Web Site?

The WWW holds an ever-increasing plethora of web sites that help us do almost everything!

Yet there must be just one, JUST ONE WEB SITE, that means the world to you. I had to take a long look at all the sites I find myself using for various reasons, but in the end I kept coming back to this one site:

I love Textile!

I’d almost be at a loss without this easy-to-use web site.

I can type up thoughts, ideas, QotD, and snippets of code anytime – all with any editor. Then I can bold, italicize and link it all up without messing about with HTML – then shove it into textile to convert. Gotta love that. It has a few little hiccoughs (automatically inserts paragraph attributes), but like everything in life, it can be tolerated.

So what is your favorite web site, and why?

Parndana Wildlife Park - Kangaroo Paddock

Setting Up A Professional Photography Blog

One of the most important aspects of any blog is its appearance. Most new bloggers will want to pick a theme to suit their blog, style, input and outcome.

To ensure your site attracts both advertising-space and traffic, the first page should have clearly distinctive sections and space for the following components:

Reserved Reflections II

Advertising/Sponsors/Affiliates

These should be divided into three different areas, but generally when you first join-up they may in the same section.

Affiliates are those sites where you get a few cents every time someone clicks on the image or text. So eventually you might push them higher up your page, ensuring your traffic view’s them first and hopefully clicks on the links.

Then you’ll want another section of your screen for sponsors, who may also be affiliates. Sponsors are generally those business who have helped you get started. Sometimes they are small-business-angels, business-mentors, or simply a local business whom you are giving free or subsidising advertising space.

Both Sponsors and Affiliates are Advertising space, but you may advertise a few products where you get no financial gain – you just like them and want other people to know about them. I think this is a great idea – not everything has to be about money!

About You / Contact Me

Personalising your blog brings real people toward your blog. There is nothing more painful than seeing content-scraping sites that reek of sterility and never respond to comments, nor your plea that they discontinue their activities. (BTW: Unless you get very lucky, you’ll never get them to stop. The best you can do is keep blocking their connections to your articles).

So write a few sentences about yourself. It’s a great idea to show a picture of your human-face, but your company logo incorporated into your Bio’ is also idea. This is not a Resume, nor a message to a Date-Service. All you need to do is explain what your blog is about, what you enjoy most on the internet, and preferabbly something humoress.

Something like “… and I enjoy red wine.” or “… and I have four cats” are both great options. But ensure it is a subject you have knowledge about, else you may have to think fast. Nobody hates a faker. (Yet the old adage ‘fake it till you make it’ is still important!)

Don’t forget to include some way of contacting you!

Has Neo Arrived Yet?

Your Product

That’s what you want people to continue to revisit and see, and buy! The blog is actually secondary, yet the perfect medium to product every day.

So always ensure the primary product gets pride-of-place somewhere on the page. Towards the top is a good option, then repeated near the bottom of the screen. You’ll notice I have an image link to my Redbubble gallery at the top of the blog, then repeated in the sidebar right at the bottom!

Subscribe/RSS/Follow Buttons

Subscribing can be done in so many ways these days, yet primarily it is RSS. With the plethora of programs that enable people to read RSS readers available, all you need to do is ensure the RSS button is high and prominent!

Follow-buttons are generally aimed at the main-stream Social-Networks – like Facebook, Twitter, Plurk, LinkedIn, plus the various popular places you can find people who may have interest in your product.
Using DandyID, you can collect all your SocNets together and insert their code into your site quickly to display ALL of them!

Search Functionality

A good blog enables readers to search on a subject of their liking. Whilst you might write articles are all about specific subjects, there is nothing stopping you from twisting your usual style to incorporate themes and trends.

For instance, the reason I wrote this article is because I find that there are very few WordPress themes that suit photographers. Whilst some of the the free-themes allow self-designed headers, they are often difficult to include additional images without being a very specific width and height.

The theme I am using now, INove, is ‘A simple yet very stylish, widget supported, and feature rich theme. So very true. The widget functionality in conjunction with WordPress free-space for personal images enables the blog-owner to incorporate and display anything they require (except not Javascript) to present themselves at their best.

That paragraph, written in about 30seconds from my thoughts and beliefs about the power of WordPress, is going to get me a lot of traffic through search-engines and my search-bar. Thus proving that any article can be tailored to suit the subject of your website.

Red vs Blue

Category’s/Tag’s

These are both important, but I primarily focus on Category’s. It is a weird subject, but both have their place. Tags are those words that merely describe the theme throughout an article, whereas category’s are the subjects the articles focuses on. At least that is the way I see it. Your thoughts on this welcomed.

Either way, these widgets included in your blog somewhere will make it fun for your traffic to click-and-find articles pandering to their personal interest.

Archives

If there is only one thing your site includes, it should be archives. If only for your own reminder of what you posted on this day one year ago! Or to link back to similar articles – this keeps people looking at articles on your own site rather than jumping elsewhere.

Ok, that covers all the important components to me. To everyone starting out with a new blog today, I hope this article enables you to see how the first page of your site should appear! I look forward to reading, searching and linking back to sites that are at-least good to look at!