What is your site worth?

admin — Sat, 01 Dec 2012 05:26:34 +0000

Many people who own a website are interested in knowing what their site is worth. If you Google “what is your site worth” or something similar, you will come across a whole bunch of web sites that claim to be able to calculate you site worth by entering your site’s web address.

Well, these “site-worth calculators” are not very accurate. To see just how accurate or off they are, put in the site “google.com” and see how much they say it is worth. Last check, I typed in google.com on www.urlappraisal.net and it gave me $3,252. Are you kidding? Google.com worth a few thousand $$$’s. Give me a break. Anyone knows google.com just the domain name is worth much more than that.

I tried it on www.yourwebsitevalue.com and it gave me a more realistic answer of $1.6 billion.

Two calculators gave two extreme answer.

For those in the business of buying and selling sites, they typically will calculate a site worth as a multiple of its monthly revenue. What that multiple is would be subject to debate. I’ll let you google on that.

If you are really interested in selling a site. Another way to determine worth is to actually put it up for sale and see what kinds of bids you are getting. One place is flippa.com or one of the other nice places listed on article 10 places to sell your website.

Tutorial on Creating Your First HTML 5 Page

admin — Sun, 14 Oct 2012 05:53:30 +0000

In this tutorial we will create a very simple HTML 5 page. We will keep it as simple as possible so that you can get something up and running quickly.

HTML 5 is a significant change from HTML 4. It comes with brand new tags and a new doctype plus more. However older browsers that was in existence prior to HTML 5 will not know of these news tags. Of course, we will want our page to be viewable on these older browser as well. Therefore there are various tricks and techniques that we have to employ in order to get our HTML 5 page to render on older browsers.

The easiest way to start is to start with an HTML 5 template that has all these techniques and best practices coded for you already. HTML 5 Boilerplate is the popular template to use. We will use this template as the skeleton for our HTML page.

1. First download the latest HTML5 Boilerplate from http://html5boilerplate.com/

In this tutorial we are using version 4.0.0.

2. After you have downloaded and extracted the zip file into a new folder on your hard disk, you will see a bunch of files like the following…

3. The main file that we are interested in is index.html. Open this file in your favorite text editor. (I’m using Dreamweaver).

4. Note the new doctype is now the following…

This is the new doctype for HTML5. If you see this, it means that the author intends for this to be an HTML 5 document.

5. Without changing any code, just test it by running the index.html file in your browser. We are using Chrome for this viewing. As of this writing in October 2012, Chrome version 22 is the browser that supports the most features of the latest HTML5 specifications, according to HTM5Test.com. That is why many web designers like to using Google Chrome during development.

You will see the following in the browser …

which indicates that everything currently works.

You can say that this is your first “Hello World” HTML5 page. Of course, we now want to start writing some code so that we can understand how all the pieces are put together.

6. Let’s add a title to our page by typing in “Our First HTML5 Page” into the index.html file in between the tags as shown… <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/add-title.jpg"></a> This is known as the “Page Title”. After saving the file and refreshing the browser, you should see that our page title shows up in the browser tab. <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/page-title-chrome.jpg"></a> 7. HTML5 Boilerplate intends for you to delete things from it that you do not need. One of the things that it puts in near the bottom of the HTML file is a code snippet intended for Google Analytics. Since we will not be using that in this example, we will delete it. If you don’t know what Google Analytics is, then you don’t need it. Delete the code as that is marked as shown… <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/delete-google-analytics.jpg"></a> If you save file and view in browser, you will see that the deletion had no effect. 8. Let’s make the background color be a pale gray. Styling information is done in CSS. And if you are using HTML5, you would be using CSS3 (as opposed to CSS2). The CSS code is found in the main.css file within the css folder. You can see that our index.html file links to this css file via the link tag shown below … <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/html-link-css.jpg"></a> 8. Now open up the main.css file in your editor and look for the section that says “Author’s custom styles” — that’s for us. <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/add-first-css.jpg"></a> 9. We write our first CSS rule into that section. The code shown above highlighted by the red rectangle is the code that we just added. This tells the browser to set the background color of our page to be light gray (which is the hexidecimal color #CCCCCC). Save changes in the CSS file and refresh browser. Our page now has gray background. <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/gray-background.jpg"></a> 10. Now you may have noticed that the index.html page also links to another css file called normalize.css. <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/normalize-css.jpg"></a> 11. You don’t have to worry about that css file. Not all browsers may use the same default styling for a HTML page. Hence, one technique is to use CSS to make the styling consistent among browsers . This is known “normalizing the styles” and the code for doing that is known as “css reset code”. That is what is contained within normalize.css. 12. Also within normalize.css, you will see this code … <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/block-display-new-tags.jpg"></a> <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/block-display-new-tags.jpg"></a>This is to allow older non-HTML5 browser to work well with the new HTML5 tags (some of which are article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary). The CSS contain styling to make these new tags display as “block style” tags. Shown above is the “display” property with the “block” value for these new tags. Don’t worry about what that means for now since this is your first HTML5 page. We have to take things one step at a time. Just know that the above CSS code is needed to make older browser work with the new HTML5 tags. 13. Next, let’s give some definition to our content area containing the text by adding some borders and a different content background color to set it apart from the background color. In the index.html file, we will add an “article” tag (one of the new HTML5 tags) around the text content as shown… <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/article-tags.jpg"></a> Note that the starting tag (the first tag) is <article> And the closing tag is </article> with the extra slash at the end. That is how most tags work. They come in pairs with a starting tag and a closing tag. Save changes and refresh browser. 14. You will see no effect until we add styling rule for the article tag. Let’s add the article CSS rule to the main.css file… <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/css-page-definition.jpg"></a> We set the width of our page to be 500 pixels with the line … <pre>width: 500px;</pre> The margin property has two values … <pre>margin: 20px auto</pre> The first value 20px represents the top and bottom margins of our page. The second value represents the left and right margins of our page. Since we set that to “auto”, it has the effect of making the page be centered horizontally across the browser. Saving the file and running in browser, we get … <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/first-html5-page-centered.jpg"></a> 15. In CSS3, we can have rounded corners and drop shadows like … <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/corners-drop-shadow1.jpg"></a> by adding the following two lines to our article CSS rule as shown below … <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/article-css-rule.jpg"></a> For the border-radius property, we set the roundness to 8 pixels (the greater the value, the more rounded). The first two values of the box-shadow property represents the horizontal and vertical offset respectively. The third value is the amount of blur. And the fourth value is the color of the shadow. 16. One last thing before we are done, the text content is too close to the left edge of the page. Add a bit of padding around the article element by …. <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/padding-article.jpg"></a> and we should get … <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/10/after-padding.jpg"></a> Since we had only specified one value for the padding property, it will use the 30 pixels as padding for the top, right, bottom, and left edges. In this case, since all the properties of the article CSS rule is unique, it does not matter which order you place the properties in. We just like putting the padding property where it was. And that is your first HTML 5 page. </article> <article> <h1>List Drop Down Menu Examples</h1> admin — Thu, 06 Sep 2012 04:50:25 +0000 It is not a problem building a basic horizontal menu, but building a horizontal menu with drop down item upon hover is a bit more challenging — especially if it is a complex multi-level menu system. Plus there are so many different ways of building them, from pure CSS menus to those that uses some jQuery. Making them cross-browser compatible is another chore. There are so many drop down menu examples out there, that you might want to look through a few to find one the most closely matches what you are looking for and then see how it works. Here is a list of some drop down menu example (listed in no particular order). <ul> <li><a href="http://www.alistapart.com/articles/dropdowns">SuckerFish</a> – AListApart.com</li> <li><a href="http://www.htmldog.com/articles/suckerfish/dropdowns/">Son of SuckerFish</a> – HTMLDog</li> <li><a href="http://users.tpg.com.au/j_birch/plugins/superfish/">SuperFish</a> -</li> <li><a href="http://net.tutsplus.com/tutorials/html-css-techniques/how-to-create-a-drop-down-nav-menu-with-html5-css3-and-jquery/">How to Create a drop-down nav menu with HTML5, CSS3, and JQuery</a> – tutsplus.com</li> <li><a href="http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm">Smooth Navigation Menu</a> – dynamicdrive.com</li> <li><a href="http://www.hv-designs.co.uk/2009/02/17/sliding-jquery-menu/">Sliding JQuery Menu</a> – hv-designs.co.uk</li> </ul> </article> <article> <h1>When to use “em” and “i” tags for italics in HTML5</h1> admin — Mon, 03 Sep 2012 14:34:23 +0000 In HTML5, both the and the tags are perfectly fine to use. Both will italicize text with the same appearance. So when do you use the versus the tags? Use when you want to place emphasize on particular words within a sentence that would change the meaning of the sentence. For example, these three sentences mean something slightly different … Dogs are smart and likable. Dogs are smart and likable. Dogs are smart and likable. And they are using for the italics. Use the tag for general italicize text when you want to offset italicized text from the rest of the non-italicized text. Or when text is in a different tone. HTML5 W3C says to use for text … <blockquote>“in an alternate voice or mood, or otherwise offset from the normal prose in a manner indicating a different quality of text”</blockquote> To convey importance, use instead of . See also the <a href="http://learnwebdesignonline.com/bold-with-b-versus-strong-tags-in-html5">use of and </a>. </article> <article> <h1>Bold with b versus strong tags in HTML5</h1> admin — Mon, 03 Sep 2012 14:21:47 +0000 Some of you may have been doing web design long enough to hear the instruction of not to use the tag and to only use the tag for bolding text. Well, in HTML5, the tag is a perfectly legitimate tag to use. And so is the tag. So when to use tag and when to use ? Both will bold text with appearance being the same. However, the semantic meaning of the two are different. Use when you want bolded text for cosmetic reasons and when you do not intent to give the text any stronger weight in voice. <a href="http://www.w3.org/TR/html5/the-b-element.html#the-b-element">HTML5 W3C</a> says to use … <blockquote>“for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood”</blockquote> Use to give text a stronger voice along with a bolded appearance. </article> <article> <h1>How to make Internet Explorer 8 support media queries</h1> admin — Mon, 03 Sep 2012 07:14:33 +0000 CSS media queries are supported by most modern browsers including Internet Explorer 9. However, Internet Explorer 8 does not know of CSS media queries. But you still can make it support them by a couple of Javascripts. <h2>1. respond.js</h2> response.js is a lightweight polyfill which adds support only for min-width and max-width, which is what most people need anyways. It adds support to IE6-8. <a href="https://github.com/scottjehl/Respond">Available on github</a>. <h2>2. css3-mediaqueries.js</h2> If you require more robust support for media queries, then use this one which does not require any additional comments in your media queries because it transparently parse, test, and apply CSS media queries for IE5+, Firefox 1+ and Safari 2. <a href="http://code.google.com/p/css3-mediaqueries-js/">Available on Google Code</a>. </article> <article> <h1>Media query syntax</h1> admin — Mon, 03 Sep 2012 06:58:21 +0000 Media queries are conditional CSS rules. For example, the following written in the CSS stylesheet … <pre>@media screen and (min-width:768px) { h1 { font-size: 2em; } }</pre> means to apply the h1 CSS rule only if viewed on screen media that is greater than 768 pixels. Or you can write the following in the link tag in the head of the HTML document … <pre><link rel="stylesheet" href="normal.css" media="screen and (min-width:768px)" /></pre> Or can use it in an @import statement as in … <pre>@import url("normal.css") screen and (min-width: 768px);</pre> <h2>Device features that we can test for using media queries</h2> Besides min-width, there is also max-width that we can test for. In addition to “width”, we can also test for the following features (some of which accepts the ”min-” and “max-” prefix) … <ul> <li>width</li> <li>height</li> <li>device-width</li> <li>device-height</li> <li>orientation</li> <li>aspect-ratio</li> <li>device-aspect-ratio</li> <li>color</li> <li>resolution</li> </ul> and others. For example, we can write … <pre>@media screen and (max-device-width: 480px) and (orientation: landscape) { ... }</pre> <h2>Notable widths for media queries</h2> When creating responsive web design, some notable widths to keep in mind when using such media queries are … 320px – typical width of smartphone in portrait mode 480px – typical width of smartphone in landscape mode 600 pixels – typical width of small tablets (Kindle and Nook) in portrait mode 768 pixels – typical width of 10 inch tablets such as the iPAD in portrait mode 1024 pixels – typical width of iPads in landscape mode, some laptops, netbooks, and desktops 1200 pixels – full widescreen displays that are typically only available on laptops and desktops. This article was written in 2012, so these numbers may have changed as devices increase in resolution. </article> <article> <h1>Use of meta viewport for mobile devices</h1> admin — Mon, 03 Sep 2012 06:28:36 +0000 To understand the purpose of this tag, we have to understand what mobile browsers are doing when they are rendering sites. Let’s say that a mobile browser is trying to render a site that has a fixed width of 1000 pixels. And say, the mobile screen is only 320 pixels wide (in portrait orientation). The mobile browser would draw the site on a 1000 pixel canvas and then apply a zoom so that it fits within 320. The effect is that the page width fits onto the screen. This is fine if the site is a fixed-width site. Albeit, the text will be super tiny and the user will have to pinch to zoom in to read the parts they want to read. However, if you are designing a responsive site that resizes and adapts to the width of the device, we should then apply the meta viewport tag. A meta viewport tag such as … <meta name=”viewport” content=”320″> tells the mobile browser to draw on a canvas of 320 pixel rather than 1000 pixel. We choose 320 pixels since our mobile device screen is 320 pixels. The problem is that the site will not always be viewed on this device of 320 pixels wide. Perhaps the user rotates the device to landscape mode and it become 480 pixels wide. The site will be viewed by a whole bunch of other devices (ipad, tablets, laptops, desktops) that are capable of much more than 320 pixels. So instead of a fixed number like 320, we write … <meta name=”viewport” content=”width=device-width”> Now the mobile browser will draw on a canvas with a width the same size as the width of the screen. As that is the case, we can also specify that it performs no zooming by setting an initial-scale of 1. <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> Like all meta tags, it should be in the head section of the HTML. It can also be written equivalently as … <meta name=”viewport” content=”initial-scale=1.0, width=device-width”> </article> <article> <h1>Resizable Images that does not break out of container</h1> admin — Sun, 02 Sep 2012 06:56:28 +0000 It is great when we create <a href="http://learnwebdesignonline.com/page-resize-with-browser">pages that resizes with the browser</a>. However, it is not so great when an user resizes the browser to be smaller than an image. Typically, the image would remain at its fixed width and break out of its container. This can be fixed by applying … img { max-width: 100%; } to the image. This constrains the maximum width of the image to be the width of its container. If the container resizes smaller, the image will accordingly resize smaller to fit the container. If the container resizes larger than the image width, the image will just be as big as its native width. The image will not scale up, unless you do … img { width: 100%; } which in this case would cause the image to be always at the width of its container. This is known as fluid image. It not only work for images, but works for other media as well. Often designers will use the rule … img, embed, object, video { max-width: 100%; } Alternatively, instead of resizing the image, one can hide any portion of the image that falls outside its container by … img { overflow: hidden; } </article> <article> <h1>Resizable Faux Columns works with responsive page</h1> admin — Sun, 02 Sep 2012 06:36:34 +0000 In a <a href="http://learnwebdesignonline.com/page-resize-with-browser">previous tutorial</a> from which we now continue, we made an responsive page that resizes as the browser resizes. But as you will note, the column lengths are uneven due to uneven content… <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/09/page-resize1.jpg"></a> This can be remedied using a the “<a href="http://www.alistapart.com/articles/fauxcolumns/">faux column</a>” technique that uses a background image of the form … <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/09/bgimg1.jpg"></a> This background is to be applied to the page wrapper and repeated down in the y-direction. However, you have to make this image really wide (say 3000 pixels) to accomodate those people who stretch their browsers with really wide monitors. And then apply this background image as follows … <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/09/resizable-column-split.jpg"></a> The trick is use the background x-position a percentage that matches the column split percentage. Here is how it looks…. <a href="http://learnwebdesignonline.com/wp-content/uploads/2012/09/resizable-faux-columns.jpg"></a> And it will look the same even if you resize the browser. </article> </main></body></html>

Learn Web Design Online

What is your site worth?

Tutorial on Creating Your First HTML 5 Page