Greekgeek's Online Odyssey - Hubpages and Online Article Writing Tips

Uncategorized

Cheat Sheet for Dealing With Squidoo’s New Flexible Layout

My CSS Cheat Sheet for Converting Fixed-Width into Flexible Layouts

Originally posted here. (Now tweaked and revised.)

  • The first thing you should do is ask yourself, “Is this CSS absolutely necessary, or can I drop it?” See the postscript below for tips about how and when to use CSS. Usually, the best solution is, “Drop it!”
  • Testing: Try Screenfly Emulator or Responsive Layout Emulator, or if both of those are being crabby, drag the right-hand edge of your window around to simulate different screen sizes.
  • Replace font sizes and line heights in pixels with points or percentage. (E.g. 110% = “a little larger than the standard font size.”)
  • To center an image or a paragraph horizontally, use style=”margin: 0px auto;”
  • <br style=”clear:both;”> breaks you out of float-mode and usually stops things from spilling into places they don’t belong. (The “zigzaggy” stairstep effect, e.g. For that problem, put <br style=”clear:both;”> between each “step” of the staircase.)
  • Convert your old fixed-width dimensions by doing a little math. Say you used to have a paragraph 250 pixels wide. Squidoo’s old column width was 590 pixels. 250 ÷ 590 = .42, so change width:250px;   to width:42%; 
  • If all the widths of elements in a horizontal area add up to more than 100%, the last item will wrap onto the next row. This sometimes happens if you’ve got small elements like borders adding a few pixels of width to your total. In that case, trim the width of the elements you can control by 1-2% to leave more wiggle room.
  • You may need to set the outermost container width to 100%. If something’s shrinking to fit, and you want it to extend to the margins, that’s what to do.
  • When using percentages, you usually have to specify a paragraph or image’s size in width rather than height. Percentage of the containing area’s height is meaningless, because the bottom of the page is usually off the bottom of the screen. Percentage of the containing area’s width makes sense, because the right margin of a page is usually visible.
  • The only time you dare specify height is with graphics small enough that they’re not likely to spill into the margin even on phone-sized screens. Use Dee’s handy-dandy Screenfly emulator to check.
  • Let borders and rounded corners remain fixed-width (pixels). They are usually not big enough to spill over onto the margins, and they behave quite oddly when changed to percentages.
  • Advanced: When doing side-by-side layouts, consider using the style attribute min-width: 200px; to say, “don’t shrink this image (or design element) smaller than 200 pixels.” On small phone screens, which are 240 or 320 pixels wide, this will force side-by-side layouts to switch to a single column, so you don’t end up with teeny tiny images. You may also set a max-width, if your images start looking silly at large sizes.
  • Advanced: If you’ve got a colored or bordered paragraph containing a floated graphic and text, you will find that the floated graphic tends to spill out past the bottom of the paragraph when you switch dimensions to percentages. The best solution is to get rid of the color or border on the paragraph. But if you really, really have a good reason for the colored paragraph, this worked for me: <p style=”background-color: #eee; width:100%;”><span style=”display: block;”><img src=”blah” style=”float: left; blah blah;”>Text text text</span><br style=”clear: both;”></p>
  • Advanced: 3-items-across layout for Zazzle & other affiliate items: <p style=”width: 25%; padding: 2%; margin-right: 2%; margin-bottom: 2%; text-align: center; font-size: 80%;”><a href=”productLink” rel=”nofollow” style=”text-decoration:none;”><img src=”imgURL” alt=”altname” style=”width: 90%; margin: auto;”><br>ProductName<br><b style=”margin:auto;display:block;width:60%;line-height:110%; font-size: 70%; color:#fff;background-color:#f90;border-radius: 4px; padding:2%;”>View on Zazzle</b></a></p>

Postscript: How and When to Use CSS

CSS commands, the style=”blah blah blah”  part tucked inside of an HTML <tag>, let you control visual decoration and layout separately from HTML. If HTML says, “this is a hat,” CSS says, “size 10 with a red brim.” If HTML says, “this is a brick,” CSS says, “move it two inches to the right.” If HTML says, “this is a paragraph,” CSS says, “200 pixels wide with a dashed border and gray background.”

People tend to use CSS for decoration, but in fact, it’s better to use CSS only to indicate units of the page that function in a special way.

For example, adding color to links is more than mere decoration; it informs the reader that these words are links. A side-by-side display of product images with captions under them acts like a store display, telling the visitor, these are products, and allowing the customer to compare, browse, pick and choose. It’s functional, not just for pretty.

I have mostly avoided using colored or shaded paragraphs except for one special purpose: quotations or excerpts, when I’m alternating between quoting something and commenting on it. What’s the function of that CSS? Its purpose is to make clear which words are mine, which words are someone else’s. And I’m only going to do that on a page where I’m alternating between the two, not a simply one-off quotation or occasional quotes.

I also use CSS for navigation elements, on rare occasions. Usually, the navigation options like the “Table of Contents” in the introduction module are adequate, and don’t need to be replaced.

I wasn’t always this strict about CSS. So in reviewing old lenses, I’ve been asking myself, “Is this CSS providing useful information to the reader? Is it functional? Or is it just a paint job?” I’m dropping 99% of my “decorative” CSS. That very especially includes colored and bordered paragraphs, which are the web equivalent of a reader marking a book’s text with  colored highlighter pens and underlines.

Testing, One, Two, Three

This post is not categorized, not labeled, ‘cuz it’s for old Squidfriends: I’m asking a favor.

Your mission, should you choose to accept:

1. Go to your last month’s payments.
2. Click “Export as TSV” (tiny link at upper right) or copy the chart into Excel or your favorite spreadsheet.
3. Set up formulas to add up the columns.
4. Do your subtotals meet the dashboard’s reported subtotals?
5. Try the same experiment for a few different months.

Repeat question #4. Results, please? I’ve always seen very small discrepancies– a few pennies to tens of pennies depending on total haul. I suspect it’s simply an artifact of numbers being rounded somewhere, but it looks odd.

Add Tasty Bait to Search Engine Results!

People find things on the web by searching. SEO helps you get your page in front of people searching for it. SEO is like throwing fishing hooks into a sea full of hungry fish. The more SEO you know, the better you’ll be able to ensure your hook gets seen by lots of fish.

But a fishing hook isn’t enough to catch a fish. Even if you get to page one of search engine results, you still need your “hook” to stand out from all the rest. What kind of bait should you use to attract a click on your link?

Look at this example:

search-engine-results

Something jumps out when you compare these search results.

(more…)

Recipe for a Successful Squidoo Lens

Now and then I like to review what I actually do to make a successful Squidoo lens, since this has changed as I’ve learned more.

Note that this is the Lazy Lensmaster’s guide to making successful Squidoo lenses. I want to spend most of my time making content, not promoting and linkbuilding, so I craft self-sustaining, quality lenses that pull in traffic without my having to build tons of links. Combine my techniques with a lens promoter’s techniques, and you’ll blow both of us out of the water. :)

1. Have a great idea that hasn’t been done to death.

I ask myself, “Would I want to read a webpage on X?” Too many people go right to traffic tools and SEO without stopping to think whether anyone would really want to read a page like the one they intend to make.

2. Brainstorm keywords, phrases that people might search for to find my page.

I use Wordtracker and Google Adwords to figure out what related words and phrases generate a lot of traffic. At the same time, in another web browser tab…

(more…)

The Squidoo Modules List Is DONE!

It’s here! The Squidoo Modules List is finally (re)done!

Squidoo Module Categories

In March ’08, I made a lens showcasing all existing Squidoo modules. Many were busted, many were strange little widgets that most of us have never used, but they all fit on one (long) lens.

Squidoo has grown. Some widgets have been retired. Others have busted. Many more have been added. The module browser has been completely revamped. It was going to be a ton of work to redo my Module Index. But at last, I have reviewed, tested, and showcased every single blinking module, at least until five minutes from now when the SquidTeam changes something.

The Squidoo Module List:

  • Summary list of all modules, including an Excel and Ready-to-Print version
  • Demonstrations of each and every module
  • Suggestions about the best settings for some of them
  • Info on character limits, image size limts
  • Which modules are NoFollow, which ones aren’t indexed by search engines
  • and more.

I don’t usually ask y’all to rate it, but by gods… that was a LOT of work. Please stop by!

Now all I have to do is edit/trim my bug report for Gil and the gang.

Which Social Media Sites Benefit SEO?

When a newbie asks how to build web traffic, one of the first pieces of advice they’ll hear is to submit their URL to StumbleUpon, Digg, Del.ici.ous, and other social media sites.

I got the same advice. I bought into it. But does social media/social networking really benefit SEO (search engine optimization)?

Hey, let me be social and ask you, the readers!

[poll id=”2″]

Now, let me give you my answer…

(more…)