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 compression 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 aesthetic 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 use a smaller Font or consolidate your menu putting related 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 have a double horizontal menu or you may just decide to simply change your Logo to a more vertical aspect ratio so it fits your concept better so as you can see all of these factors are inter-related and effect 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 columns to extend in height or consuming wider width so you don't want to do a perfect layout only to find that when implementing the font sizes you desire everything expands and wraps and gets all messed up so we suggest 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, you have all your creatives out of the way so you can then dig in and start defining Navigation and since you will be cloning the base layout you won't have to go back later and fix / update all your pages later.
4. Navigation: This is where you define your Menus and if desired any Sub-Menus and finally which Pages will be hidden sub-menus that only display on mouse hover or click of the main menu. You can define your Navigation offline 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 indented and Pages double indented.
Home
About Us
Mission Statement
Our History
Our Staff
Services
Automotive
Auto Service 1
Auto Service 2
Tires
Tire Page 1
Tire page 2
Pictures
Gallery 1
Gallery 2
Hours & Location
Contact Us
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 copyrighted 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) resolution.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 noticeable 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 inquiry@mydomain.com
Names based upon category
disneyworld_1.jpg
disneyworld_2.jpg disneyworld_3.jpg zoo_1.jpg zoo_2.jpg museum_1.jpg museum_2.jpg |
Natural Alphabetical Order
alpaca.jpg
cat.jpg dog.jpg
|
Forcing alphabetical order
a_xylophone.jpg
b_kazo.jpg c_pian.jpg |
Chronological order 030511_xylophone.jpg
030611_kazo.jpg 040911_pian.jpg |
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.
FINAL ADVICE
Building a website can take a lot of time and effort so its important that you protect that investment by being a responsible webmaster and protecting your site by having a proper backup policy. Once your files are on the server you can rest assured they are safe but you should always have a backup both of the files and in most all cases of the builder used to create those files.
For websites that you build using software on your computer each software has its own method to allow you to design the site but will always output html which is the language the server needs so in those cases you should take a backup of the final output files as well as your website builder software and keep it in a safe place. The advantage of computer based systems is in most cases you can open the final html files in other types of software so even if the builder becomes obsolete and won't run on your latest operating system the site can continue to be maintained or imported into our online builder. You can also use the cPanel backup wizard to take a backup file of your site after its published and download the file to your local computer as a secondary backup.
For Websites that are build 100% online where the builder is a Content Management System like Wordpress or Drupal CMS, these systems contain thousands of files and store your site as a combination of Files , plugins and databases that are rendered to produce a website. These systems must be kept up to date or they can be targeted by hackers and compromised messing up the CMS and the final site so its crucial that you keep the CMS and all its plugins and themes updated as well as establish a routine off server backup policy. Lowesthosting does nightly backups and in most cases can restore the site to its pre-compromised status however our backups overwrite every 10 days so if you didn't notice your site was messed up until 11 days later all of our backups will have rotated and we will only have the compromised files in our backups so its CRUCIAL that you install a backup plugin into these systems that backs up to an off server location. You can and should also use the cpanel backup wizard to take a fresh snapshot and download it to your local computer after every site update so you have a restore point.
For customers who use our Drag & Drop Website Builder, this system is installed as part of your cPanel but opens its own server which allows you to build your site and it uses ftp to push its final rendered files to your server so its a combination of the former methods. The Builder has a Backup / Restore function in the site builder menu that allows you to backup the Site builder Design and Layout files. This is not the same as the cPanel backup wizard which takes a snapshot of the final files that the builder puts on your web server that were rendered by the builder. The good part about the drag and drop builder is there is no exposure to hackers like a CMS since the builder has no public exposure and is not part of the final website so the site you build will be nearly impossible to be hacked. Even so it is still crucial that after building your website using the Drag and Drop Site Builder you use the SITE BUILDER BACKUP to take a backup which will be downloaded to your computer and you should take a new backup every time you make major changes so if you mess up you can restore the site builders design layout file.