User blog:Readible/Coding columns, headings and making a simple well-made front page

My two cents on making a quick but effective wiki home page. Light coding will be involved with explained example code. Front page examples at the end if you'd like to take a look first.

Considerations for a front page
1. Concise - relay important information without the fluff. A huge chunk of text is less likely to be read.

2. Clarity - make it clear on what the wiki's about, and what's there, especially if it's a lesser known topic.

3. User-centered - wikis arre for the users! What do they need? E.g. clear navigation to main wiki pages.

Some main elements to include
1. Headings - a few to break up the important front page content. E.g. About, navigation, Image gallery.

2. Images - add a header image and/or gallery to visually show your topic. Images speak a 1000 words!

3. Formatting - from simple headings to templates and code, break away from bare text for visual appeal.

Tutorial, coding and examples
1. Introduction - show your topic to the user in a few short sentences at the top of the page. Perhaps copy an extract. E.g. Collaborative wiki about Game - a survival shooter by Company set in an open-world environment! Please contribute if you can, see the editorial guidelines here. Note some pages may be outdated. "Choose your class, upgrade your weapons and try your hand at real-time open-world combat! With realistic physics, lightweight graphics, 18 classes and over 80 guns to choose and upgrade!"

2. Navigation - the top nav bar is good, but only if regularily updated. Link to main pages on your home page for ease! E.g. Game, Company, Upgrades, Maps, Classes, Guns, Tips and tricks, Official website (external link)

3. Coding headings - headings are good, but with some simple code you can really make them pop out! In source editing: HEADING Makes:

HEADING

Below is the code broken down into its simple parts you can edit! The  adds a break so the headings aren't squished together.
 * Color = text color (Help:Color)
 * background = background color
 * Text-align = right, left or center
 * Border = width in pixels and color
 * border-style = see here for styles.

4. Optional text columns - always useful to know! Columns can be used in a navigation or other long list to make it look better.

Go to your-wiki-name.fandom.com/wiki/Template:Col-begin and paste this there. Now go to your-wiki-name.fandom.com/wiki/Template:Col-2 and paste this code. | valign="top" style="width:50%;" | Finally, paste this last code in your-wiki-name.fandom.com/wiki/Template:Col-end. |} Now to add columns to a wiki's page, go to source editing and begin a column with. End it with.

Add inbetween. Now, column 1 text will go under Col-begin, and column 2 text will go under Col-2! E.g. COLUMN 1 COLUMN 2 Makes:


 * COLUMN 1


 * COLUMN 2

5. Optional page columns - the front page can be divided into a wide left column and thin right one for a variety of useful purposes!

See Help:Main page column tags. The short column can be used for images, polls, or even a general infobox depending on the wiki.

6. Final design - now to add images, any other info, and put it all together into a neatly made front page! Some actual examples: To remove a Contents Table (created if a page has 4+ headers), go to source and put anywhere on the page!
 * https://taptapbuilder.fandom.com/wiki/Tap_Tap_Builder_Wikia
 * https://incremental.fandom.com/wiki/Incremental_Games_Wiki
 * A minimalist alternative without fancy headings or other code

Hope this helps someone with design or coding!