Experimenting with Formatting in Steemit Posts

in #writing7 years ago

I guess I tend to be somewhat of a perfectionist, when it comes to presentation of text and writing. 

This post isn't as much about quality content as it is about exploring ways to format my Steemit posts for more visual appeal and better readability.

So we get to host our images offsite somewhere (I use imgsafe.org because it's fast and easy and no frills), and most of the time, the result is that we get an image all the way across the page. 

NestingOsprey
A Nesting Osprey

On some of the other writing venues I use there's more flexibility with the text and image editors-- I guess here I'll have to try to tweak the HTML a little to make images appear differently. For example, I want this photo of a nesting osprey (taken a few years back during a visit to Montana) to sit at the left of the page with text wrapping around it to the right. Makes for a more balanced appearance of the whole post. I have tried various approaches to doing this, but it seems like the Steemit text editor strips the HTML tags somewhere in the process...

I can get it to work as long as I write the post in pure HTML and never open the editor. Well, at least it shows in the preview area... but I have to wonder if it will still be there after I click "post." I hope it does. Writing posts "in HTML" is a bit cumbersome, but I've been doing this long enough that I'll put up with it to get the look I want.

This little experiment made me pause and ponder the whole issue of making online articles and posts aesthetically pleasing, as well as informative.

FallAspen
Aspen trees in fall, Colorado

OK, so now I'm gonna try to stick a picture of aspen trees in Colorado over on the right, instead.

Anyway, getting back to the point, I end up wondering if people even care whether or not posts "look nice." These days it seems like we have so little time on our hands and so much information coming through our life that paying attention to appearance is almost a luxury. Maybe I'm old-- or getting old-- because I do care. I cared even 15 years ago when people would build those absolutely horrible and annoying GeoCities web sites... anyone remember those? They were-- at least to my sense of aesthetics-- the absolute pinnacle of bad web design.

Well, I think I am coming to the end of this experimental post. If all works as I am hoping, we'll have text flowing around one image to the right, and another image to the left, with captions below each image.

Not going to post instructions for how to do this quite yet... at least not until I see whether the actual post comes through in the same format as I see the "preview" below.

Sort:  

I am very impressed with the formatting of this aesthetically pleasing post. Personally I find it pretty tricky formatting posts here on Steemit.

Well, if you're used to drag-and-drop type editors, Steemit would feel both difficult and somewhat primitive, for sure.

Yes. You evidently have more HTML knowledge than most of us here, including me.

Yeah, 20 years of hard coding web pages will do that to a person...

I made one a while back, not sure if you know about the classes or you did your own style. Steemit Template Tips and Tutorial - Image Alignment

I've done it a few times, but don't usually have smaller images.

@krnel, I'll take a look at your tutorial, thanks. This was just done with classes and "pull-right" and "pull-left." It seems to work fine as long as you write the entire post in HTML, but when I tried to toggle back to the editor it stripped the HTML tags.

Yes, your tutorial is pretty much the same workaround I came up. What had me confuddled for a bit was that the Steemit editor strips any customized HTML I added... it's no biggie, just a little more cumbersome to work with.

Hehe, I only use the RAW HTML editor ;)

There are multiple lenses to steemit now. They can display things differently so it's with bearing in mind and trying out your posts on different platforms. A few to check out

  • busy.org
    This displays posts and thumbnail posts in a slightly different format than steemit.com

  • autosteem
    This app has a browser included which focuses on displaying images in a storyboard format.

  • esteem
    This is a mobile app and as mobile can display things differently it's worth checking out just in case.

  • twitter / Facebook
    If your link is posted to these sites it's worth checking out how the link displays, and what photo appears in the link.

Coin Marketplace

STEEM 0.20
TRX 0.14
JST 0.029
BTC 67749.41
ETH 3262.59
USDT 1.00
SBD 2.64