Article Layout & Design

[AmNovice]

Hey all, hope you are well!

How do you design your article layout? Do you ever do any fancy designs and backgrounds or do you just focus on the copy over a white background and keep it simple?

I have detailed copy that's of good quality and now I can't decide if it's necessary for the background of the page to have fancy colors, designs, etc, or is it better to just keep it simple?

Originally I wanted to really go above and beyond on the design and layout of the article until I stumbled on a blog style site that has the most basic and simple layout and white background with no design, but get's on average over 700K monthly visitors....Haha I suppose that answers my questions..

Anyhow, any of your tips, suggestions, and your own interpretation based on your experience of what it should be is greatly appreciated.

 

[AmNovice]

If your asking about graphic design then I'm using Adobe Illustrator and Adobe Photoshop, I make the background and special graphics effect in the middle of blogs OR sidebar

Thanks for your reply. Do you typically keep the background to your articles clear and simple or do you try and get clever with the overall design of your article pages?

 

[Graybeard]

I try to keep the <div>that contains the content when it is text</div> clean and easy to read. Also covering the content that a user comes to see immediately with an *in-yo-face* modal or jquery overlay is VERY irritating.
Sometimes, I just get pissed off and go text only or just close the 'flying circus page'.

 

[Honeybadger]

• Make sure you add white text with all your competitor's keywords on white background
• The page should take between 10-15 seconds of loading time, to build anticipation
  
• Try to squeeze page content with a badly designed menu bar
• Make sure menu has 20-tab drop-downs that cannot be clicked
  
• Users just love the never-ending footer
  
• Set pop-ups every 30 seconds asking for email address
• Scatter broken links like a treasure hunt
  
• I don't recommend making it smartphone friendly
• Customers using Safari and Firefox should get error messages
• Each paragraph ideally be 8-10 sentences or unrelated text
• Please, please don't add H1, H2, H3 headers, it's confusing
• The 'X' on pop up windows should be off screen
• All your important content is beneath fold, better to hide so customer gets surprise !!
• If you have time make ALL links open new browser window
• Page title should overlay header image (both should be similar color)
• Place a giant banner 3000 pixels x 1000 pixels above fold
• All digital photographs need to be GIF or PNG format, JPG is so 2020
• Meta descriptions should all be the same
• If you see any lorem ipsum text leave it alone, it brings good luck
  
• Of course use SSL certificate, but store images over http://
• Last but not least add emojis everywhere just for kicks !!

 

[codekiwi]

i would personally prefer simple and readable designs.
the content should be clearly visible thats the main thing.

 

[AmNovice]

• Make sure you add white text with all your competitor's keywords on white background
• The page should take between 10-15 seconds of loading time, to build anticipation
  
• Try to squeeze page content with a badly designed menu bar
• Make sure menu has 20-tab drop-downs that cannot be clicked
  
• Users just love the never-ending footer
  
• Set pop-ups every 30 seconds asking for email address
• Scatter broken links like a treasure hunt
  
• I don't recommend making it smartphone friendly
• Customers using Safari and Firefox should get error messages
• Each paragraph ideally be 8-10 sentences or unrelated text
• Please, please don't add H1, H2, H3 headers, it's confusing
• The 'X' on pop up windows should be off screen
• All your important content is beneath fold, better to hide so customer gets surprise !!
• If you have time make ALL links open new browser window
• Page title should overlay header image (both should be similar color)
• Place a giant banner 3000 pixels x 1000 pixels above fold
• All digital photographs need to be GIF or PNG format, JPG is so 2020
• Meta descriptions should all be the same
• If you see any lorem ipsum text leave it alone, it brings good luck
  
• Of course use SSL certificate, but store images over http://
• Last but not least add emojis everywhere just for kicks !!

This is the secret to $100k/month in affiliate commissions!!!

 

[Fbseller2]

Thanks for , Very useful!

 

[Fbseller2]

Read Gary Halbert's "Hands on Experience" letter and follow its advice.

 

[azgold]

This is the secret to $100k/month in affiliate commissions!!!

LOL, definitely! A guaranteed guide to riches.

That post by @Honeybadger was hilarious!

Re your original question, definitely a white background behind the content. Or at least a pale colour. Don't distract from your words. Sure, use images but don't insert them in places that visually throws the reader off your content or flow of information.

Just my two cents.

 

[AdSpyglass]

I’ve done a lot of reading about articles design, typographic and layout and want to share some things I’ve learned and using by myself

Design & Typo​

• Make sure your background colour and text colour are contrast enough. In the same time, avoid bringing too much contrast to your designs cause it is also a bad practise. What I recommend is to stay with standard white-black scheme, but instead of using #FFFFFF and #000000 as white and black colours, pick up something less saturated. As for me, i like to use #F9F9F9 and #151515. It might seem like not a big deal, but just compare these schemes with 100% brightness on you PC and your eyes will feel the difference
• Try not to invent a bicycle with font sizes - just go with the ones readers get used to. So, that means that your headings should be somewhere between 20 and 30 pt, when paragraph text from 16 to 20pt.
• If you have big articles and large amounts of text - you should probably pay your attention to serif fonts. They can look not that pretty as sans ones, but the strokes these fonts have helps human eyes to process big amounts of text faster and better. There are a lot of researches about it, so you can just google a few of them. Again - if you care about UX and readability - it is your case. If you’re mostly focused on design and aesthetics - then it is up to you which font to choose.
• The width of your paragraphs. Notwithstanding the popularity of full-screen ultra-wide design - this is not the best choice for a blog. Make sure you have large enough margins to the left and right from the text. It is easier to read the text when paragraphs are narrower. Even, if it also makes them longer.

Layout​

• Most layouts concepts are dictated by modern SEO practices, and I recommend to let it as it is. In that way you’re creating layout that is not only familiar for readers, but also recognizable by googlebot.
• Make sure you have well-structured H2s, H3s, and H4s if they’re needed. Also, ensure that you have only one H1 on a page.
• Use ordered and bulleted lists. They help divide facts or steps and it is easy to read them one by one. Also, google LOVES these list tags.
• Use tables to vizualize complex things. They’re better than screenshots and pictures and googlebot is able to scan them.
• Avoid having some tags inside your heading tags. It means that all of your <h1>, <h2> and <h3> tags should not contain anything else inside them. I’m highlighting this because it is very frequent mistake when someone tries to make text more visible and adds <b> tag to some of the <h>s. It hurts your SEO.

Summarizing this - just go with the most easy options that are friendly to your users. At the end of the day, you’re making your website for users, not just for you. Hope it helps

 

[azgold]

Great tips, @AdSpyglass !

Summarizing this - just go with the most easy options that are friendly to your users. At the end of the day, you’re making your website for users, not just for you.

Absolutely agree! It's the users, not you or Google that you want to turn into buyers.

 

[VortexAlpha]

Hey all, hope you are well!

How do you design your article layout? Do you ever do any fancy designs and backgrounds or do you just focus on the copy over a white background and keep it simple?

I have detailed copy that's of good quality and now I can't decide if it's necessary for the background of the page to have fancy colors, designs, etc, or is it better to just keep it simple?

Originally I wanted to really go above and beyond on the design and layout of the article until I stumbled on a blog style site that has the most basic and simple layout and white background with no design, but get's on average over 700K monthly visitors....Haha I suppose that answers my questions..

Anyhow, any of your tips, suggestions, and your own interpretation based on your experience of what it should be is greatly appreciated.

I tend to keep the design and template in general according to my brand, as I want to fit colors, logos, fonts, and other elements to fit the predefined company's design. For articles, the design of the page should be really simple as the focus here must be on the content and users should have a good experience while reading texts, so I would always keep it very simple and minimalistic.

 

[Graybeard]

Tip: use rgba(255,255,###,.10);
Explanation of CSS RGBA Colors | Guide
this will apply to CSS3
background-color: rgba(255,255,###,.10);
HTML Color Codes - What's your color example *tool*
RGBA Code Generator

Make sure your background colour and text colour are contrast enough. In the same time, avoid bringing too much contrast

 

[Affiliaria]

I like to keep things really simple, with black text on a white background. But I've found that both methods work well; articles can also look really good with good design