Tag Archives: html

How to make an HTML webpage the correct size on a mobile device

Posted on by

I have written about this a few times (just last week) and I wanted to add some details to the discussion. Basically when designing a webpage for the mobile device you want your page to show up as the correct size on the device so the user does not need to zoom. To do it you would use the viewport code. Today I am adding some more details to that:

General width. Keep in mind the ‘780’ changes depending on the size of your actual page:

<meta name="viewport" content="width=780">

This code just matches their device regardless of what you set:

<meta name="viewport" content="width=device-width">

The following disables zooming altogether:

<meta name="viewport" content="width=device-width, user-scalable=no" />

This sets the zoom level when the page is first opened:

<meta name="viewport" content="initial-scale=1">

This creates no zooming and the user has to move the screen around:

<meta name="viewport" content="maximum-scale=1">

I encourage you to try them all out to see what works for your site and so that you get a better idea of what they all look like.

Flash CS6 and HTML5

Posted on by

Here is a recent post I made in a discussion forum on linked in. I thought it would be worthwhile to post onto my blog:

Flash is not dead right now and from the looks of it, it has the opportunity to become the best authoring tool for HTML5.

HTML5 is currently not ready for widespread use due to compatibility issues. For those that do not know, HTML5 has been around for several years now – it is NOT new and still NOT ready. How many years do you think its going to take to be ready? You might want to look at recent history when DHTML (HTML4, CSS2, and Javascript) were touted as the next big thing in the early 2000s. Compatibility killed that idea. HTML5 does have more promise though. But remember HTML5 is just a simple upgrade to HTML4, it does not do that much more. The real power of HTML5 comes from javascript. Javascript libraries that have been around for years. Why are they not used more often? No authoring tool for them. Its all hand written code. Additionally, while both Google and Apple are making their web browsers HTML5 friendly, they are not making their app markets HTML5 friendly anytime soon. In order to publish an HTML5 app you need to get a third party software package that will do the conversion.

Additionally, at this point, the ONLY potential authoring tool for HTML5 that has promise in the future is Flash! Flash CS6 can export swf to javascript. So, those saying Flash is dead might be very wrong. Flash might just be the next big thing because it will export to HTML5. We currently do NOT have a good authoring tool for HTML5 and if Flash takes that spot, it will not be dead but might be more popular than it currently is now. The only way Flash will die is if another authoring tool that becomes very popular replaces it.

HTML5 Doctype

Posted on by

The HTML Doctype is used to tell a browser which version of HTML your page is written in. Thus it is very important that it is included on each HTML page. With HTML5, the doctype will be changed to be significantly shorter and easier to remember.

Here is the HTML5 Doctype:

<!DOCTYPE HTML>
<html>
<body>

You can see how much this differs from the common HTML 4.01 doctype:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<body>

For more info on Doctypes see W3schools

SEO (Search Engine optimization)

Posted on by

Here is a list of the main things I have used to keep my sites consistently in the # 1 ranking for my chosen keywords in Google:

1. Content

Content is king. The more content you have on your site, actually related to your site, the more Google will like you. Google loves content. And you cannot trick them.  This is the number one way to get your site listed as high as possible in search results. A problem with content is that spiders like text content. This makes flash based content not as readable.

2. Site Analyzers

Go to: http://www.widexl.com/. Use the SEO tools on the right hand side to test how your site is currently doing. You can gain more insight on the importance of SEO and its tools from websites like WebChimpy.com. Most importantly, the meta tag analyzer. Your meta tags should be as close to 100% as possible, no less than 90%.

3. Tags

Make sure your meta tags and title correctly match your site.

Meta tags go in the <head> html tag usually just after the title.  There are 4 meta tags I always include on my sites: keywords, description, author, and robots. Here are examples:

<meta name="Keywords" content="keyword 1, keyword 2, keyword 3, etc" />
For the keywords, you need to write keywords that match your site.
<meta name="Description" content="describe your site here/>
For the description, you need to write a 1-2 sentence description of your site. 
This should include as many of your keywords as possible.
<meta name="author" content="write author here" />
For this, instead of a name, I usually write the site name here
<meta name="robots" content="index,follow" />

This section remains unchanged. You are telling the spider to go to the index page and follow all the links.

<title>my title</title>

The title should match your site.

4. Site map

Have a site map somewhere that will link all of your pages. Having an additional, xml sitemap can help as well.

5. Links to your site

Have other related sites link to yours. The more sites that link to yours the better Google will like you and the higher your page rank will be.

6. Code

Make sure the code of your site is clean – lots of css and no tables. Better code = higher ranking. Monitor web20ranker review as it is an accurate indication of a company’s diligence and competence. No dreamweaver templates (unless you create the template yourself, this means NO premade ones from anywhere but your code). No dreamweaver code unless you wrote it. Google doesn’t like made up code. You need to write the code yourself and make sure you debug it. Otherwise the spiders will not like you.

Some rules for step 6:

No dreamweaver, code only

Only external CSS

No tables only div tags

Please debug the code

No hidden code – this is a huge no no. You cannot trick Google they are smarter than you think

Flash is great but cannot be seen by spider. Text is best.

7. My links

Make sure any links to external pages work.

Some sources:

Straight from Google on their rankings: http://www.google.com/support/webmasters/bin/answer.py?answer=35769

Creating a 3 column CSS page with rollover links

Posted on by

These two files are examples of creating a 3 column CSS page. Please open these up in dreamweaver to see the code and how they function. Anyone can use these to begin creating their website and learn to get rid of tables. Remember that tables are only to be used for displaying graphical data, not for website design. div tags in CSS are to be used for website design.

HTML Page using CSS

CSS Page

Is HTML Dead?

Posted on by

It appears that the recent Web 2.0 craze is really catching on and standard HTML pages are becoming a thing of the past. Many people are creating their web pages via blog software such as wordpress and/or utilizing CMS software such as Moodle/Joomla/Drupal, etc. These software packages are free and easy to set up. They only require programming experience if you want to change their interface or modify them. Otherwise, they are stand alone packages that any user can set up. Many sites are converting to these applications because they allow for more interaction, are easy to set up, and very easy to edit and maintain. So is HTML dead? Not right now but its use as a stand alone web language is declining dramatically.

HTML5

Posted on by

What is HTML5? So far little information is known…well at least confirmed as its still in development. However, speculation is that html5 will:

1. add many new html tags
2. combine html, css, and javascript
3. get rid of plugin support? what, no flash? apparently html5 will be able to create rich user interfaces

Only time will tell where this goes but i am more than curious to see how it plays out..especially since both Apple and Google are pushing html5. And the new ipad and all iphones do not support applications like flash.