Website Design Tips: The Standard Website Layout

[mrblacq2]

Thank you!!!

[mrblacq2]

Very, very helpful!!! I learn a lot from you. You give me some wonderful insight.

[jjaaccaammii]

VigorFish Logo :3

[GreenyLiveshow]

The standard website layouts looks cool,.

[deejzia]

thanks bro.i m a developer . i suck at designing

[danniweezi]

can i use photoshop to design my web then transfer to dreamweaver without converting to jpeg? cos i find it difficult designing in dreamweaver

[Justinfh2point0]

Where can I download this framework?

[ZenCartEasyHelp]

Great video! Set up your ecommerce business for free with our Easy Help Zen Cart Tutorials:

[roseoffner]

Thanks for the great lesson on best practices for website layout.

I appreciate your show and tell instruction with the examples from well designed sites.

Excellent work!

Rose Offner

[2Sixes]

Very, very useful. I've been learning tags and stylesheets and goodness knows what else but have no idea how to put it together as a web page. This 8-minute clip now has my head buzzing with ideas. Thank you for uploading it!

[jdphiladelphia]

Greetings Mike, what software do you use to capture your PC screen as you're creating your videos for YouTube?

[btbooker1]

Hi Mike,...... love your vids man. i checked out your video on "the standard website layout". what is the measurements on the header, billboard ect.?

[sharmark]

Dude.... I just spent the last hour or so devouring the content you're sharing and I've got to say that you're an OUTSTANDING instructor. Thanks so much for your uploads. I've subscribed and will be following up with questions and feedback shortly. Congrats also on your success (SR. User experience designer @ Yahoo?! that's pretty epic).

Cheers,

[mlwebco]

@sharmark Thanks for the feedback. Glad you're finding my videos helpful.

[gtflavourcom]

hey i like all your videos that i watch I am in the process of buying a laptop for my own freelance website design busines i have about 400-500 to play with what should i get a Mac or Pc and will Adobe Suite work on mac Thanks

[rjcream]

This tutorial is excellent. You've spotted the best layout!

[m0n4c3]

This is the most realistic tutorials i've ever seen.

Not only you explain how you do it, you show us REAL LIFE examples.

Best tutor ever.

Thank you so much for this

[mlwebco]

@m0n4c3 Thanks, appreciate the feedback. ;)

[1968lsw]

@m0n4c3 I have to agree with you, I have watched many tutorials on the net and these are the best yet I have found on web design. I have used Fireworks for years and thought I knew it pretty well, but I learn something every time I watch another video!

Clear, easy to follow, not too long and great examples of 'real world'.

Thanks Michael for these brilliant videos!

Webbo (UK)

[mlwebco]

@1968lsw Thanks for the kind words. Much appreciated.

[renansvideos]

Nice post

[crreativeme]

Nice. Thank you for a clear & practical explanation.

[kpwebdezigns]

Micheal

let say first that your tutorials are a blast! keep up the good work. as an inspiring web designer i really get motivated after watching your vids. I have really begun to move from the use of Photoshop to the use of Fireworks because of your work.

i just had a few questions i would like to ask you.

1) is the navigation on the vigor fish site a css sprite?

2) have you tried the css and images export feature in fw cs4?

once again keep up the good work

[mlwebco]

@kpwebdezigns Thanks for the props! The nav bar on the vigorfish site is just simple HTML and CSS built by hand. Nothing really major there. I really don't use the css/images export feature in FW CS4. I only use FW for mocking up my sites, then I try to code everything by hand from the ground up. I tend to use outside resources for different types of navigation scripts and code, etc. Dynamic Drive is a place I've used in the past. Then sometimes, i just search Google for different codes, etc.

[jimmydykesjr]

Hi Mike,

This is a great tutorial video...one of the best I've seen from you yet. I really appreciate you sharing your inside tips and tricks with us little guys.

I was wondering if there is a best practice for the size of each section? For example the header should be 960x200 pixels and the billboard 960x400 and so forth.

Any direction would be appreciated.

Thanks,

Jimmy

[mlwebco]

Hi Jimmy,

There is really no standard size as I've seen many different sizes for the various sections. For instance, Apple has a HUGE billboard section while most people have a smaller billboard section height wise. As long as the "Call to Action" or important stuff sits above the fold (that's anywhere within 550px in height) you should be ok. ;)

[PurBakVideo2]

Thanks a lot. Your presentation is just as clean as your websites. Good examples and good information. Maybe it would be nice if you could give more technical info like how many pixels each part has to be for a standard screen. Is it like 950 width?

[RabioMusicEmpire]

I must say that you're very talented with clean design and you should get much more attention because you also dig into the business area with your videos.

Could you tell me how you make the pictures on your billboard sticking out from the billboard, if you know what I mean?

Thanks.

[mlwebco]

Thanks for the kind words, much appreciated. Totally know what you mean with the "images" sticking out the billboard. You touch on something that's really important. Because when you have items sticking out the billboad (as in breaking out the containers) it creates a much better visual "Wow factor". The way you do this is if you mock-up your site with items breaking out of the billboard, you have to make your billboard apart of a large background image for your site. Then position tables on top

[mlwebco]

Check out the site vigorfish or my mlwebco site and view source. Check out the background image and how I set it up. ;)

[RabioMusicEmpire]

Cool, I will! :)

Btw, is it hard to setup a icon for your website in the adressbar?

Thanks.

[mlwebco]

No, it's pretty simple. Just create your logo/icon within a square 200x200 area. Then Google this "Dynamic Drive-FavIcon Generator" and go to that site, it allows you to upload the image and it creates the favicon for you.

[RabioMusicEmpire]

Awsome, you're the best man! :)

[RabioMusicEmpire]

@mlwebco Oh yes, I can now see that everything on your billboard/header except the logo/buttons/text is a background. Thank you very much for your reply and keep up with the vids! :)

[ghanes14]

From looking at your site and vigorfish it looks like for pages other than the home page you drop the billboard from the layout and split the content area so the content is on the left, and other stuff/links are on the right.

Creating simple but elegant sub-page designs is where I'm coming into some problems.

[mlwebco]

Sub Pages, you're a few videos/steps ahead of me. I was actually thinking about that topic (laying out sub-pages) after I put this one together. It's coming. :)

But you're right, always drop the billboard (that's only for the home page), and create a navigation either on left or right side.

[ghanes14]

I swear I never stop thinking, even when I'm sleeping, i'll keep an eye out. :)

Got another question though. The navigation on left or right, what's the real reason for that if there's a navigation in the header? Or do you mean like a menu of other stuff?

[mlwebco]

Yeah, take a look at the about page on my site, notice the links on the right. Basically a sub menu of other items under the parent category of "About". But you're right, in some case, you don't need the sub nav bar.

[mattsaundersblog]

Excellent video Mike

[dannbap]

very clean...

[skenderbeuuu]

Very good website layouts, and pretty good designs, too. Unlike some other.