Bitmob 101.1: A Guided Tour Around the New Article Editor

Shoe_headshot_-_square
Thursday, February 25, 2010

This thing above is part of the WYSIWYG (what you see is what you get) editor. It lets you format your text in a much more intuitive way than using HTML tags. Mouse over the buttons to see what they are, but here are a few important ones you'll probably use most often:

Bold, italics, underline, and strikethrough. We gotta wonder about you if you've never seen these buttons before (like in Microsoft Word).

Quick tip: Try not to use bolding, underlining, or all-caps for simple emphasis. Those don't look good to most people, and the underlining could be mistaken for a link. Try italics instead.

  1. Make a numbered or...
  • bulleted list.

You can make a block indent with those arrows.

Or you can put stuff in block quotes with those quotation marks.

Use these for left, center, right, or block justify. You can also use the center justify button to center an image, by the way.

Use this to create a hyperlink. From here, you will see this pop-up window:

Just paste in the full URL. Simple!

For links to other websites, please make target "new window" to make those clicks open up a new browser screen (so you don't actively send people away from Bitmob, which we won't like!). For links to Bitmob content, you can have those open in the "same window."

For "advisory title," please give a word or very short description of what you're linking to. This helps with search engines as well and is the text that pops up when you mouse over the text/link.

Add image, add media (like videos), create a table (don't worry about this one), add horizontal line, insert special character (like weird sŷmbóls©), and add jump (which we'll place for you if we promote your story to the front page).

This is what you'll see when you try to add an image. Just copy and paste in the URL of the picture you're trying to use. It'd be nice if you put in a label or description in the "alternative text" part, too. Again, search engines dig that stuff.

For the width, don't go over 600 px wide, or else the fixed columns will cut your picture off. (To be exact, you can go 607 px wide.)

Don't worry about the border -- Bitmob adds that in automatically for you. But do make sure you put in spacing to the left, right, top, and/or bottom of the image, to make sure the text doesn't bump right up against it (ugly, yuck). What spacing you use depends on how you align the picture.

For example, if you "align right" at the start of a paragraph (which looks best, if the picture isn't sitting by itself), then you'll want "10" on the left and "5" at the bottom. If you "align left," then put "10" on the right and "5" at the bottom. If you "align middle," you shouldn't need to add any spacing at all.

Another tip: If your image is embedded in a paragraph, using "5" for spacing on top will actually cause the top of the picture to line up with your text better. We don't know why this is, but it happened on our old site, too.

Finally, if you want to put in a video, just enter the main URL (not embed code) here. This works with YouTube and several other services but not necessarily every video site out there. We're working on that!

 
Prevarrow 1 2
Problem? Report this post
BITMOB'S SPONSOR
Adsense-placeholder
Comments (20)
Default_picture
February 25, 2010

Great post 

Brett_new_profile
February 25, 2010

Fun fact I learned from Dan Hsu: WYSIWYG can be pronounced "wizzywig," and it is incredibly fun to say.

Alexemmy
February 25, 2010

Is there a way to go into html view if we want? I couldn't find one, and the WYSIWYG view added a space and wouldn't let me remove it. Probably would have been able to get rid of it in html mode as I usually can when that happens over on blogspot.

Default_picture
February 25, 2010

We can't allow people to add their own html code it would be a security risk. 

37893_1338936035999_1309080061_30825631_6290042_n
February 25, 2010

What happened to the "subscribe to the comments" feature? That was really helpful and I don't see it anymore.

Mikeshadesbitmob0611
February 25, 2010

Speaking of "real names only", are there plans to enforce this? I've seen a lot of people with fake or single names "sniping" in comments. If I'm putting myself out there to get flamed for every article I write, then I'd like my flamers to have to put their real names out there too.

Andrewh
February 26, 2010

How do we update the time on a post? I tried to post an unpublished article in the mobfeed, and it went way back... Was that an issue with having saved it before the transition, or will we have to publish immediately so it doesn't get buried?

Default_picture
February 26, 2010

Quick comment on the new page numbering; when I click on the arrow or page number to go to other pages in an article, I'm brought to the bottom of next page instead of the top, so I always have to scroll up/hit home in order to continue reading.

Alexemmy
February 26, 2010

I second Brian's comment. If there is a quick fix for that it'd be much easier.

New site looks great though Rich and Ryan and anyone else I don't know who worked on it. And thanks Shoe for putting this post together to help explain things.

Default_picture
February 26, 2010

@Michael We try to get everyone to enter in there real name, and we try our best to enforce this. If you ever find a comment that offends please click the comment report button so our mod will make sure to see. Thanks

Default_picture
February 26, 2010

@Brian thank you for the heads up and we will take care of that for you. 

@Andrew I am looking into this issue as well.

Default_picture
February 26, 2010

When I logged in from this post, I was redirected to the main page. It should just refresh my current page, no?

Also, I really hate clicking "2", or "3", or ">" to keep reading an article. Scrolling is EASY. Finding a tiny number or arrow with a trackpad is NOT. Please try not to use it! At the very least, add a ginormous NEXT link.

Default_picture
February 26, 2010

Thanks for the run-through, Dan. The new editor gives us a lot of graphical options to incorporate into our articles. I'm most impressed with the insert new page option. It will take some time to get the hang of when a page break is appropriate, but I feel it might make the posts on BitMob feel a bit more "legitimate." Perhaps only because the formatting is so professional, but still.

Default_picture
February 27, 2010

Great post Dan! I was rather lost playing around with the way faster blog editor.

Default_picture
February 27, 2010

Thanks for the great knowledge & wisdom! Very nice editor.

Just a tiny recommendation, if it won't hurt to say: It would be convenient if "logging in" would take you to the place you were instead of taking one to the front page of a feed.

Franksmall
February 28, 2010

@Shoe- I love the revamp, but am having trouble commenting or hitting the 'like' button on my iPhone.
Just wanted you to know.


Thanks for such an amazing site!

Default_picture
February 28, 2010

Yeah I hope to get the "Subscribed to Comments" checkbox back as well. It's easier for those who comment a lot to keep track with responses.

Img_20110311_100250
February 28, 2010

The editor is improved, but Ctrl-B doesn't shortcut to Bold print anymore. Also, I can't turn off bold if it is on unless I highlight some word and make it un-bold. It is frustrating. 

March 01, 2010

This new blog editor works like a dream (fast and easy). I barely had to tinker at all and when I chose to I didn't need to book an appointment weeks in advance to make the needed edits. Kudos on this aspect of the redesign.

Default_picture
June 02, 2010

I can't figure out how to embed Youtube vids... I copy and paste the URL of the vid into the dialog that pops up when I click the Embed button, but the final article treats it as if nothing is there.

You must log in to post a comment. Please register if you do not have an account yet.