We have created this simple guide to help you better understand how to frame your website navigation and organize your content efficiently and better understand Image sizing, resolution, and compresson for use on your website. No matter which system you use to build your website you will need to consider 5 major factors:
1. Layout 2. Font Family and Size 3. Color Pallet 4. Navigation Menus 5. Content
1. Layout - Conceive how your site will look: The layout you choose may limit space in certain parts of the page forcing you to put menus or other content in other areas so although the "look" is considered an astetic it defines where your navigation and content will go.
As a general rule you will only need 2 layouts your Home Page layout that generally has more graphics and states your primary offer / message and one for your internal page layout that uses similar page elements (usually a menu or header) that maintains the same uniform look as the home page but has more room for content. Its wise to get these pages done first since you will clone the Internal Page layout for use on all other additional pages.
For example if you desire a "layout" that uses a large logo that can't be covered and still want an upper horizontal menus you may have less room for that menu resulting in shorter menu names so that the width of the menu doesn't wrap causing you to use | info | about | service | short form menu names vs larger full size names | information | about us | services we offer | which take up more horizontal room or you may decide to consolidate your menu putting titles as hidden submenus so you can use fewer main navigation menus or you may find that to meet your needs you must change to a different layout all together with vertical left hand menu or simply change your Logo to a more vertical aspect ratio so it fits your concept better so as you can see all of these things become factors in what decisions you will make for your layout.
2. Font Family and Size: The modern practice of web design is to define your Font Family and Sizes in advance and not mix more than 2 Font Families or more than 4 Size Variants within a website. This insures that your website has a uniform look and consistency between pages. Most systems will allow you to define your Fonts and Sizes in your Preferences or CSS (Cascading Style Sheets). The reason picking your Fonts is an early factor is larger fonts take up more room causing colums to extend in height or consuming wider width so you don't want to do a perfect layout only to find that when implimenting the fonts you desire it gets all messed up so define then right at the beginning.
3. Color Pallet: Most sites will define their basic color schemes early on such as background color (or if you want to use an image as background) as well as overlays , color boxes, and Font Colors. By getting the Color Pallet out of the way early which also may affect your Font colors you have all your creatives out of the way so you can then dig in and start defining Navigation.
4. Navigation: This is where you define your Menus and if desired any Sub-Menus and finally which Pages will be under each section. You can define your Navigation offliine on a piece of pager or word/ text document or by simply digging in using what ever tools you are building your website. The key is that you are defining the navigation framework first and only after its completed and to your liking do you go back and fill in the content.
In the example below you can see how the main Menus are defined on the left with Sub-Menus indended and Pages double indented.
Auto Service 1
Auto Service 2
Tire Page 1
Tire page 2
Hours & Location
Its a good idea to get all your content in advance such as download stock images and graphics or generate your own logos, banners or artwork using the free graphics tools listed in the Webmaster Resources section and make sure that you have permission or license for any copyrighten content from its provider.
Optimizing your Content for the web: Photos and graphics can be in any of the following formats: .jpg .gif .png. Photos from modern cameras are the wrong size and resolution and should not be used for websites directly as the pages will take forever to load if they load at all.
Camera photo files are not only huge in size but the wrong 300dpi or more (dots per inch) resoltuion.whereas all graphics for the web should be 72dpi. Your best results will be to re-size photos to be no larger than 1920x1080 if they are a background and 900 or less width for normal photos otherwise they may go off screen or take too long to load. you should use .gif or .png for clip art and .png or .jpg for photos and images with gradients. If you have a very image intensive page the larger or lower compression the image the longer the page will take to load and you may want to set the bit depth of the image to 8 or 16 bit for simple images to make them smaller and increase the compression for .jpeg images to reduce their size which in most cases will not be noticable but will make them load much faster. You can access various free photo editing and bulk photo resizing tools in the Webmaster Resources section.
Map out the graphics, photos, links & information you will use for each page: Determine what pictures, graphics, links and content or content ideas you want to put on each page so you cover all the things you want your website to address. You may want to write out the content for each page in advance on paper or a word document or just write it on the fly once the categories and subjects are outlined.
Mission Statement------- logo.png
Our History --------------- oldbuilding.jpg
Services --------------------- warehouse.jpg, pricelist.pdf
Service 1 ----------------- small1.jpg , small2.jpg
Gallery 1 ------------------ dogs folder
Contact Us ------------------- forward emails to email@example.com
Names based upon category
Natural Alphabetical Order
Forcing alphabetical order
Now that your layout and files are prepared you can begin building your website. Keep in mind Lowesthosting is not a web design firm but a host. Even so if you have design questions or want our opinion on work you are doing feel free to open a support ticket and provide links to the pages you are working on or screen shots of layouts and ask us for any ideas or improvements. We are always here to help.