ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

No More Floating! Hubpages 2017

Updated on July 28, 2017
thranax profile image

Andrew has been a creator on Hubpages for over 15 years. Greeting new users as a Hubpages Elite member and helping through the forums.

Adult Swim is over?

The term "salty" is often thrown around the internet as a term that stands in for upset, aggravated, and just blah overall about an action or event that has happened. Well this incoming change to Hubpages has both me and a lot of fellow Hubbers Salty! What exactly is the issue and why do many people feel this way? Well the new update means floating "capsules" to the right will be removed. This feature has been a part of hubpages ever since I started 9 going on 10 years ago. The main cause is due to the world changing how it searches and consumes information. The larger part of Hubpages traffic now consists of users using mobile devices and tablets which result in a one-column layout which makes it generally more user friendly on these devices.

Well the new update means floating "capsules" to the right will be removed.

— thranax
Old Hubpages example of "Floating Right" to create two columns.
Old Hubpages example of "Floating Right" to create two columns. | Source

While most people see that this might be a step in the positive direction (Hubpages Staff Especially) others see it in a much more negative light. While its true, this change will bring various changes to how the website(s) platform works, it might also throw some negative human responses as well.

Weighing the Situation

Positives
Negatives
Higher Revenue
Forced Text Breaks
Easier on Mobile
Ugly Desktop Layouts
Less Confusing
Less Creative Aesthetics

Hubpages is a Business

While a lot of people will hate to see the floating feature leave - I am sure a whole lot of people will find the whole process easier as seeing it is more streamlined to publish and cuts down on trying to adjust the page for two layouts (mobile and desktop). While I do not like the reduction of creative options I do believe that this was a weighted choice made by the staff and it will overall improve and help grow Hubpages. If this is how hubs must be made now, the only thing to do is to press on and be as creative as possible with what we have!

Tips on how to Embrace the Changes

There is a silver lining with the changes - it means in order to create a hub that truly looks good, more thought and effort has to be put into it. Here are a few tips on how to make the most out of these changes that if done correctly will be both a productive and innovative design step on mobile as well as when full paged on desktop. The common issues that arise from doing full width layouts include image quality and design, getting specific capsules to fit nicely together, and overall encouragement to provoke the reader to not leave early.

Images are the driving force of interest online and in books alike. With the new change there are a few different things to look out for when selecting images to use in your articles. For starters the images have to be a high enough resolution that when on desktop they do not pixelate. This can also be done by simply adding white or transparent pixels around a smaller image that allows the image to hold its own centered. The transparency approach will allow you to use the same half width size images without needing to create or take new ones.

Centered layout means that images for the best effect have to be "created" "crafted" or "found" in a way that promotes the reader to enter the image and scroll down the page. Images that have white space around the top sides and a image in the center are a great example on how to lead from a text capsule into an image. Think of this like a single object sticking up that creates curiosity to keep scrolling down to reveal the entire image.

Marisa Wright uses this image creatively to create a clipped downward flow provoking readers to scroll down the page and see the whole image + keep reading the article.
Marisa Wright uses this image creatively to create a clipped downward flow provoking readers to scroll down the page and see the whole image + keep reading the article. | Source

One more ending note is to use thinner and wider images that use less page real estate then standard squares or long rectangles. This kind of image or collage of images creates an appealing look for a reader and still can include the following text or capsule in the same frame allowing the reader to know that they should be carrying on. If using full size images, try to crop them to a "widescreen" format to achieve the effect of having a high resolution, epic picture that can be digested while not cutting off a full "screen" of content.

This is an example of a cropped down wallpaper image. The fullsize was 1920 x 1080 and this is just a snippit of the most interesting part of the wallpaper. This allows text to be read under the image in both the mobile and desktop views.
This is an example of a cropped down wallpaper image. The fullsize was 1920 x 1080 and this is just a snippit of the most interesting part of the wallpaper. This allows text to be read under the image in both the mobile and desktop views. | Source
This uses the more narrow dimensions and combines four large images in a presentable manner.
This uses the more narrow dimensions and combines four large images in a presentable manner. | Source

Sizing as it stands at time of publishing this article mean that some capsules result in a lot of weird looking white space around them that almost act like a page break. One of the most user friendly and interactive tools, the Poll, leaves a notorious amount of white space around it. These all look fine on mobile, but really need work masking or fitting into the desktop scheme.

We recommend using in-text Amazon links rather than capsules; they tend to perform better.

— Christy Kirwan, Hubpages Staff, http://hubpages.com/forum/post/2902066

Amazon links that are in text can help eliminate the white space that might be encountered in various situations. What it does is create a text link with the little orange Amazon "a" next to the text that allows you to link a word to a product. When using an Amazon capsule make sure to use the description zone to help make the item look like it fits with text or in-between two various other capsules.

Example of In-text Linking

Panda created by Desiigner took radio stations by storm and took the top most played track in the US for more then six weeks! The immense success of this song is somewhat due to the inspirations Desiigner had when creating the track. The track is a combination of how it feels to play "Grand Theft Auto" mixed with the Panda emoji. A very likely combination nowadays as many people both use emoji's and Grand Theft Auto was one of the best selling videogame titles of all time.

Example of Filling in an Amazon Capsule with Descriptions

Panda [Explicit]
Panda [Explicit]
The song "Panda" which was a radio top hit. This song is very chill and easy to listen to at anytime of day or night. It was influenced by the videogame "Grand Theft Auto" combined with the Panda emoji. Desiigner had an amazing idea and transformed it into this track.
 

Positive Reader Flow with other types of Capsules

Here is an example of a Poll used in a page. Currently the way they are formatted align everything to the left and leave a large white space to the right. In order to help combat the effect and make it look like it was designed that way, try using images that are also heavily aligned to the left compared to centered or right focused.

Panda Poll

Do you like the song Panda by Desiigner?

See results

While I cannot see all the shortcomings of various different capsules and how they apply to your page layout (specifically everything in the recipes section) I do think that all challenges can still be overcome with creative uses of images and more thoroughly planned out sections. In this new era it is paramount to learn how to resize and manipulate images to fit your desired effect. I am not saying anyone has to go master photoshop or devote any cost into learning these skills - but maybe just a simple guide on even learning how to resize images using a free editor would suffice.

Other Thoughts and Tips

  • Look at other Hubbers articles and see what works for them.
  • Try to use the existing tools to your advantage such as the Table.
  • Find other articles that help with layouts on Hubpages.
  • Think like a reader and not like a writer when reviewing your articles.
  • Have an idea of a new option for an existing tool, or a whole new tool? Make a mock-up image and a detailed description and post it on the Hubpages Forums and it might be reviewed and implemented!

working

This website uses cookies

As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://corp.maven.io/privacy-policy

Show Details
Necessary
HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
LoginThis is necessary to sign in to the HubPages Service.
Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
AkismetThis is used to detect comment spam. (Privacy Policy)
HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
Features
Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
MavenThis supports the Maven widget and search functionality. (Privacy Policy)
Marketing
Google AdSenseThis is an ad network. (Privacy Policy)
Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
Index ExchangeThis is an ad network. (Privacy Policy)
SovrnThis is an ad network. (Privacy Policy)
Facebook AdsThis is an ad network. (Privacy Policy)
Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
AppNexusThis is an ad network. (Privacy Policy)
OpenxThis is an ad network. (Privacy Policy)
Rubicon ProjectThis is an ad network. (Privacy Policy)
TripleLiftThis is an ad network. (Privacy Policy)
Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
Statistics
Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)
ClickscoThis is a data management platform studying reader behavior (Privacy Policy)