Blogging

 

Below you will find the talking points outline that Laura and I used for our Blogging202 session at MomentumCon 2012; this is why it’s not in a pretty, readable post. But the pertinent info is here. Interspersed you will see small images that, if you click, will enlarge to show screencaps of blogs we had found with design elements that are a big no-no. These choices reflect not on the blogger, but the design.  You can also view a conglomeration of many bad design issues at our test site.

Welcome To

Blogging 202: Take Your Site to the Next Level

 

Presented by Dangerous Lilly (DangerousLilly.com)

and Laura (3design3.com)

@DangerousLilly  &  @_Laura33_

  1. Self-Hosting
    1. Blogger vs WordPress (some buy domain & not hosting, they stick w Blogger)
    2. Recommended hosts: GoDaddy, DreamHost, HostGator
    3. Hosts to avoid: BlueHost, cheap local places, anything that costs more than $7 a month in hosting
    4. Domain names       
      1. Multiple alternatives
      2. Account for misspellings / numbers vs letters
      3. Buy now and save for later
      4. Try to avoid using hyphens

 While I loved the red background (for something else, not a blog) the other problems made it all too hard to read Color overload!!! Keep it simple.

  1. Design Basics
    1. Avoid bright text colors on dark backgrounds – this includes just white text. Also avoid using font colors that are not *enough* contrast to the background. Dark against light is usually the easiest to read.
      1. Want dark colors? Use them in the “wrapper”, the sidebar, the banner. Leave the center (the main post area) a white or pale background with moderate-dark to dark colored font.
    2. Keep the sidebar clean – make graphics all the same size whenever you can, make sure they don’t bleed out into the other sections (set width, let browser proportionately reset height [ width=”250” ])
    3. Avoid having the text of your sidebar and main post section overtop a patterned or photo background. Even if it’s “muted” or lightened it’s still hard to read for some.
    4. Always make your site easy to navigate. Make finding the home page and recent posts easy, and easy for the reader to continue reading about similar topics/related posts. Too many clicks to get where they want to go will result in the average reader leaving your site.

 This is called "high red", it's pure red. "High cyan" is also enough to make you want to gouge your eyes out.  Please, don't make your banner this big. Just don't.

  1. Design Nightmares
    1. Avoid these bright ones for font OR backgrounds: http://en.wikipedia.org/wiki/Web_colors#HTML_color_names
    2. Limit the number of text colors to 3 at the most
    3. Limit 1 “fancy” font, and don’t use it as the main font – may not show up right on some computers or just may be hard to read. Fine to use fancy fonts as part of graphics
    4. Header images – be careful of images and too large
    5. Positive Example Sites:
      1. Focus on the sidebar – everything aligned & same size for graphics: http://innocentloverboy.blogspot.com/
      2. Great overall design, sticking with a “theme” & concept, pleasing layout & scheme: http://carasutra.co.uk/
      3. Great header: descriptive, creative but not too big. Uncluttered sidebars: http://curvaceousdee.com/
    6. Avoid using animated icons, animated text or basically anything that moves. It invokes websites circa 1997.
    7. Avoid really bright and heavy-contrast patterns/designs for the wrapper/background image, usually hard on the eyes after a short bit.
    8. Bottom line: No matter how pretty/unique you think it is, if it’s hard on anyone’s eyes then they won’t stick around to read a lot or comment.

 If you think white on black is bad, let's talk about primary colors...

  1. Front-end and Beack-end Tools for Design and Performance
    1. Tools to tweak an existing template
      1. FireBug – an add-on for FireFox browser that lets you tweak the CSS stylesheet without actually making live changes. It pops up a small window of code below the site so that you can see the changes visually. This allows you to tweak things without truly knowing CSS.
      2. Color Scheme Designer – Can help you find other matching colors when deciding on a theme
      3. CSS Color codes: http://www.quackit.com/css/css_color_codes.cfm
      4. CSS font info: http://www.w3.org/Style/Examples/007/fonts – Explains the fonts available for the CSS language and how you can use them, what they’ll look it.
      5. See more below!
    1. Feed:
      1. Use feedburner + FeedBurner FeedSmith (or FD Feedburner Plugin) plugin  
      2. don’t publish partial feeds. We’re usually lazy and will be much less likely to click through to read something we might have no interest in. This practice does not increase comments
      3. Professional sites, sites that want to rely on newsletters and email subscriptions to posts, etc should consider paying for Feedblitz rather than free Feedburner. However, decide this at the onset. Switching after you’ve gained 300 readers is doable and Feedblitz will have you believe it is easy, but it is not and you could lose readers.
      4. Link to other posts of yours from your posts, but not excessively. Also employ plugins like Yet Another Related Posts Plugin
    2. Permalinks:
      1. Descriptive: MySite.com/2012/03/15/hitachi-magic-wand-review rather than MySite.com/2012/03/15/i-love-this-toy or MySite.com/hitachi-magic-wand-review
      2. Site should live on the root:  http://www.agapedoula.com/ vs. http://www.agapedoula.com/index.html

 OUCH - The abundance of red, the color of the text...eye bleeding!!  Two bad moments here: the color and white text on black, but also the textured background all contribute to making this hard to read

  1. Website Exposure
    1. Submit to blog round-ups
    2. Submit to Reddit, Stumbleupon, Digg
    3. Comment on other blogs in your niche *genuinely*
      1. Avoid the “PR” or “This is all about me me me” angle: Yes, we know you write books and do public speaking but promote the community that got you to that point.
    4. Blogroll (page or sidebar)
    5. Widget to display recent comments; include author’s site and latest post
    6. Have Facebook account for blogger self + Facebook page for site
      1. You can use the Facebook account for your blogger self as login to many things – making comments on certain online news sites, Stumbleupon, Rafflecopter for entering giveaways, etc. Even if you’re “out” it’s still a good idea to keep that Facebook/social media line in the sand between the community you and friends-n-family you not affiliated with the community. While you may not care to be divisive, not everyone is sane – the last thing you want is an angry reader taking their crazy out on your 14 year old cousin or 75 year old aunt.
    7. Social media
      1. Tweet Old Post plugin – Generates interest to older posts. You can set this to only pull from certain categories. Will automatically tweet something randomly once a day to your account.
      2. Pin posts (with images) on your Pinterest boards
        1. Watch out for Pinterest’s policy on affiliate links
        2. Consider watermarking your images
      3. Avoid the impersonal “Thanks for following me, check out my sites!” DM on Twitter (or other social media sites)
    8. Be active in the community
      1. Start conversations on social media; both within your niche and outside.
      2. Consider joining the Co-Op to both help yourself and then help others
      3. Give something back: editing, banner design,
    9. SEO – use plugin, make sure you’re assigning meta-descriptions, tags, etc to every post to help with rankings
    10. Submit to these for relevant traffic:
      1. http://www.invesp.com/blog-rank/Sex
      2. http://sex.alltop.com/
      3. Blogher.com
  1. Taking on Advertisers
    1. Basics of Paid Advertising – general overview  – http://elustsexblogs.com/blogger-education/basics-of-paid-advertising/
    2. Affiliates vs Advertising – http://elustsexblogs.com/blogger-education/basics-of-paid-advertising/cautionary-word-joining-affiliate-programs/
    3. If you don’t recognize the company, ask on Twitter/Facebook. Chances are other bloggers have dealt with them.
  1. Website Security
    1. Preventing a hack:
      1. Passwords, passwords, passwords
      2. LoginLockdown plugin
      3. Website Defender?
      4. Keep WordPress / plugins / themes updated consistently (at least weekly)
    2. Recovering from a hack
      1. GoDaddy’s rollback option
      2. Remove plugins through GoDaddy (delete from folder or rollback)
    3. Preventing content theft
      1. Anti Feed-Scraper plugin ©Feed
      2. disabling right click does *not* work – one only has to disengage Javascript in their browser and voila they can right click. It will only serve to tick off genuine readers who want to quote a small portion
      3. copyright clearly stated
        1. good examples: http://truepleasures.blogspot.com
    4. Taking action against content theft
      1. Find host and registrar (http://www.whoishostingthis.com/  or http://www.whois.net/). Find DMCA takedown form. Contact host and registrar EVERY TIME content theft occurs with offending and original permalinks.
      2. Have copyright notices within the .php file so that they show up on the blog at the end of each post and the footer. Some scrape from the feed, some scrape from your site. The copyright notice should have a link to your site and be clear: Better to disallow everything than to have a Creative Commons license. Simply crediting you with a link while still trying to pass off your entire post (sans your internal post links, of course) as theirs is theft. Too many asshats genuinely think that so long as they give the link, they can do whatever they want with your text – including removing your affiliate links and replacing them with their own, removing your photos and replacing them with their own, etc.
      3. Allow pingbacks with moderation. Don’t clutter up your comments section with pingbacks, simply use them as a way to find the work-around thefts as mentioned above
  1. Ask For Help!
    1. Banners, icons, social media, “How do I …?”, photo editing, general advice, etc: there is someone who knows and who is willing to help.
    2. ALWAYS offer to pay; if they refuse, offer to make a donation in their name to a charity they support.
    3. An hour of a pro’s time is worth it if the alternative is ten hours of beating your head against the wall.

       

     

Lilly’s Links

1.  CSS Color Code Finder  – Provides you with the CSS color code for any color
2. TinyMCE-Advanced from wordpress is a wordpress plugin, which adds the option to disable the removal of <p> and <br> tags when saving a post and in the HTML editor (autop). After installing-activating, the option to enable line breaks can be found in the Settings->TinyMCE Advanced panel.
3.  Table generator – Create table for use within a post -
4.  Header Image Instructions – Simple instructions for making the header image “clickable”
5 . 5 minutes to a more secure WordPress site -simple to moderately advanced tips to make your WordPress site more secure against hackers
6. No more frames - Many web sites try to load your content into their own frame, to help sell ads on their sites. This simple plugin ensure your site is protect from this using a simple piece of code in your document header.
7. http://yarpp.org/ – Yet Another Related Posts Plugin – adds related posts at the end of a post
8. List of colors – Wikipedia’s List of Colors. Might help when searching for color ideas for your design.
9. Pagerank – An overview of Pagerank
10. Check page rank – A site that allows you to check your current Google Pagerank
11. Statcounter.com – Can be used in addition to WP’s Jetpack, it gives more feedback. It helps to know how people are arriving at your blog – referrals, search words. You get the most out of it if you pay a small (~$5) monthly fee.
12. Broken link checker for wordpress – Broken links can lead to bad Google juju. Find them daily with this plugin

 

Laura’s Links

1. WordPress.org Codex: Highly categorized compendium of information about administering your WordPress site.  codex.wordpress.org/Main_Page

2. Subtle Patterns: Very subtle patterns for the background of your site. subtlepatterns.com

3. Favicon Generator: Create a favicon for your site. tools.dynamicdrive.com/favicon

4. PatternCooler: Make a custom background.  patterncooler.com

5. 0 to 255 Gradients: Generate shades from a particular color.  0to255.com

6. Password Generator: Generate secure passwords for your site.  pctools.com/guides/password

7. 270 Tileable Backgrounds: 270 backgrounds. webtreats.mysitemyway.com/270-tileable-web-backgrounds

8. 504 Tileable Backgrounds: 504 more backgrounds. webtreats.mysitemyway.com/504-additional-tileable-awake-website-backgrounds

9. Image to Colors Palette Generator: Pull colors from an image. cssdrive.com/imagepalette/index.php

10. Lorem Ipsum: Create placeholder text for your site. ipsum.com

11. GIMP: A free alternative to Photoshop. gimp.org

12. Color Happy: Color Palettes. designworklife.com/category/color-happy

13. Suffusion Theme: Information about the Suffusion framework theme, including a support forum. aquoid.com/news/themes/suffusion

 Posted by at 8:34 pm