Author Topic: NSF 2017: Article Presentation Improvements - done and being programmed  (Read 23116 times)

Offline Chris Bergin

A number of posts before we get into options.

Suggestion:

I would suggest a way to have bigger pictures in news articles. Ie, have the thumbnails, in the normal article, but have some 'click to enlarge' or something. That way, renders and informative images are way, way easiert to see, and the visual element can help images; you could have text like 'as can be seen in the image to the left, damage to the interstage of this F9 was a bit heavier then expected; sources tell us it might be replaced'
Or- actually showing something that is talked about, ie the connection point for the SLS booster being given a new paintjob.

Tldr; bigger images in the news section.

How it currently should appear to readers (I did extend the browser window, so I can appreciate it will vary depending on the browser.  Screenshot some of the key areas for reasons that will be noted below.
« Last Edit: 09/26/2017 01:28 pm by Chris Bergin »
Support NSF via L2 -- Help improve NSF -- Site Rules/Feedback/Updates
**Not a L2 member? Whitelist this forum in your adblocker to support the site and ensure full functionality.**

Offline Chris Bergin

Re: NSF 2017: Article Presentation Improvements
« Reply #1 on: 08/14/2016 10:36 pm »
Here's what I work with, Wordpress CMS. It's great, but I bet we can use more options. I've only screenshot part, for the solution elements. When I add images to the article, the "featured image" is 650x250 (which is the display size of the front of site www.nasaspaceflight.com) When I add images to the body of the article, the CMS sizes it to 350x270 - so I have to use images above that, otherwise they'd lose resolution).
« Last Edit: 08/14/2016 10:52 pm by Chris Bergin »
Support NSF via L2 -- Help improve NSF -- Site Rules/Feedback/Updates
**Not a L2 member? Whitelist this forum in your adblocker to support the site and ensure full functionality.**

Offline Chris Bergin

Re: NSF 2017: Article Presentation Improvements
« Reply #2 on: 08/14/2016 10:41 pm »
What we have to work with is the area with the text. The recent forum posts, ads and other items on the right are uniform for all news pages, so there are likely two options open to us.

1) Make images clickable to make them bigger. I would note a lot of times the source image isn't all that much bigger, so not sure how that would work.

2) Have images bigger from the start, across the width of the text. Some sites do that.

And there's the other suggestion of captions, although we add the images with the text around them. Such as we know we're talking about the satellite, guess what, that's an image of the satellite. Not sure what adding a caption saying "The JCSAT-16 Satellite" adds.
Support NSF via L2 -- Help improve NSF -- Site Rules/Feedback/Updates
**Not a L2 member? Whitelist this forum in your adblocker to support the site and ensure full functionality.**

Offline Chris Bergin

Re: NSF 2017: Article Presentation Improvements
« Reply #3 on: 08/14/2016 10:43 pm »
So fire away with ideas. Some I'll say "No way dude!". Some may be unworkable. Some may be great and things I hadn't thought about. People savvy at Wordpress will be of help here too. Keep in mind we're working within that text area.
Support NSF via L2 -- Help improve NSF -- Site Rules/Feedback/Updates
**Not a L2 member? Whitelist this forum in your adblocker to support the site and ensure full functionality.**

Offline ChrisWilson68

  • Senior Member
  • *****
  • Posts: 5266
  • Sunnyvale, CA
  • Liked: 4992
  • Likes Given: 6459
Re: NSF 2017: Article Presentation Improvements
« Reply #4 on: 08/14/2016 10:55 pm »
It would be great to have captions for the pictures.  Often, it's not clear unless one already recognizes the picture exactly what it's a picture of.  There are credits down at the bottom of the article, but it's not easy to relate those to the specific pictures above, it requires scrolling down to the bottom, and even then it's often not very informative.

Most news sites have some text below each picture that gives a sentence or two about it.  NSF could really benefit from doing that.

Edit: For example, in the JCSAT-16 article:

https://www.nasaspaceflight.com/2016/08/spacex-second-jcsat-launch-via-falcon-9/

The second image shows what appears to be a satellite inside a building.  Presumably that's JCSAT-16.  Where was the picture taken?  How long ago?  Was it in the factory where it was built?  Was it at the cape just before encapsulation?

The next picture shows two satellites in space.  Which two are they?  Superbird 8 and Superbird B2?  JCSAT-16 and Superbird B2?  JCSAT-15 and JCSAT-16?

Later, there's a picture of an ASDS.  The text next to it talks about both JRtI and OCISL.  Which is in the picture?  How old is the picture?

Captions would clarify these issues.
« Last Edit: 08/14/2016 11:07 pm by ChrisWilson68 »

Offline NaN

  • Full Member
  • **
  • Posts: 248
  • Liked: 248
  • Likes Given: 232
Re: NSF 2017: Article Presentation Improvements
« Reply #5 on: 08/15/2016 12:04 am »
And there's the other suggestion of captions, although we add the images with the text around them. Such as we know we're talking about the satellite, guess what, that's an image of the satellite. Not sure what adding a caption saying "The JCSAT-16 Satellite" adds.

We really do need captions for the articles. It is obvious to you what each image represents, but even a dedicated NSF stalker like myself often has to guess. For example, in an article that mixes Nathan Koga images with official company images, I cannot easily tell which is which - sometimes it matters.

For the most recent JCSAT-16 article, I will nitpick the first several images on likely questions that readers would have:

Image 1. Where is it located? SSL? SpaceX hangar? Is it actually JCSAT-16 or is it another satellite of the same line which is also discussed immediately adjacent to the image? Why is cantilevered on that arm?
Image 2. Is this a Sky Perfect image? SSL? What is it trying to convey (I actually can't tell; they look like not-quite-identical CGI satellites)
Image 3. Clarification that it is from latest launch and not a file photo is always nice. A lot of news sites simply put up a convenient image of an F9.
Image 4. What attempt was that from? The adjacent text talks about multiple missions.
Image 5. From the latest launch or an image of an F9 v1.2?
Image 7. The adjacent text talks about three separate ASDS. Is this the new one being built, the old one getting decommissioned, or a new barge with the same name? Why is there a cruise ship in the way?

et cetera. IMO, captions would be very useful.

edit: looks like ChrisWilson already covered much of this, so consider this post an extended 'like'
« Last Edit: 08/15/2016 12:08 am by NaN »

Offline Lee Jay

  • Elite Veteran
  • Global Moderator
  • Senior Member
  • *****
  • Posts: 8565
  • Liked: 3603
  • Likes Given: 327
Re: NSF 2017: Article Presentation Improvements
« Reply #6 on: 08/15/2016 12:44 am »
So fire away with ideas.

Both:

1) Make images clickable to make them bigger. I would note a lot of times the source image isn't all that much bigger, so not sure how that would work.

2) Have images bigger from the start, across the width of the text. Some sites do that.

Offline mheney

  • The Next Man on the Moon
  • Global Moderator
  • Full Member
  • *****
  • Posts: 780
  • Silver Spring, MD
  • Liked: 398
  • Likes Given: 199
Re: NSF 2017: Article Presentation Improvements
« Reply #7 on: 08/15/2016 01:05 am »
Don't make the pictures larger in the articles.  I think you balance text and graphics pretty nicely as is.

I agree on the desirability for image captions.  I know that they're tied to the paragraphs that they're next to - but captions give you that "quick look" context.

If there's a larger version of the phpto available, link to it - either by clickking on the photo, or having a "(larger)" tag in the
(wait for it ....)  caption!

Offline Chris Bergin

Re: NSF 2017: Article Presentation Improvements
« Reply #8 on: 08/15/2016 01:22 am »
Okay dokey. Captions are wanted. I did get a PM about a caption plug in for our CMS so I'll look at that. PS I'll create a test article (dated 2005 or something so it won't show to anyone else other than the link it'll create and I'll post in here, to work on these things. So there will be a physical article to see the changes as we make them on this particular subject.
Support NSF via L2 -- Help improve NSF -- Site Rules/Feedback/Updates
**Not a L2 member? Whitelist this forum in your adblocker to support the site and ensure full functionality.**

Offline cwr

Re: NSF 2017: Article Presentation Improvements
« Reply #9 on: 08/15/2016 01:44 am »
Okay dokey. Captions are wanted. I did get a PM about a caption plug in for our CMS so I'll look at that. PS I'll create a test article (dated 2005 or something so it won't show to anyone else other than the link it'll create and I'll post in here, to work on these things. So there will be a physical article to see the changes as we make them on this particular subject.

While I agree that captions would be an improvement, I don't think this addresses the biggest issue with images incorporated into articles.

Based on the posts that i've seen, I have the impression that there are 2 similar issues with images:
1) I think slimfeanor desired to be able to view higher res images of photographs or renders that were included in articles.
2) We frequently see images which are captured from NASA powerpoint slides which are very busy. I love the slides but at resolutions of the order of 350 pixels by 204 pixels they are invariably unreadable and communicate zero information other than that the slides exist somewhere.

I'm not familiar with WordPress so I don't know all the constraints that authors have to work with, I think both issues can be solved if the paragraph that refers to the embedded image also incorporates a sentence that says something like:

"higher resolution image available in L2 at http....."

This way it is possible to use L2 membership to prevent non L2 members gaining access to the higher res images which Chris wanted to prevent.

Currently when I click on these small embedded images I can't view the image in another tab or window hence can use the full screen size to view the image. I can save the image but all one gets is the small image.

If the tools do not allow something like the above just provide the URL in plain text so one can access a higher res image that is readable.

Thanks for listening

Carl

Online Eric Hedman

  • Senior Member
  • *****
  • Posts: 2308
  • The birthplace of the solid body electric guitar
  • Liked: 1950
  • Likes Given: 1139
Re: NSF 2017: Article Presentation Improvements
« Reply #10 on: 08/15/2016 02:12 am »
Can you add a link at the bottom of articles to the discussion thread?  If it isn't listed in the recent forum posts it would be easier to find it.

Offline Moonwatcher

  • Member
  • Posts: 32
  • Haslett, MI
  • Liked: 24
  • Likes Given: 3126
Re: NSF 2017: Article Presentation Improvements
« Reply #11 on: 08/15/2016 02:34 am »
Can you add a link at the bottom of articles to the discussion thread?  If it isn't listed in the recent forum posts it would be easier to find it.

Top and bottom would be even better... ;)

Offline Eagandale4114

  • Full Member
  • **
  • Posts: 294
  • Liked: 541
  • Likes Given: 500
Re: NSF 2017: Article Presentation Improvements
« Reply #12 on: 08/15/2016 02:54 am »
One thing that could help is a responsive image design. The idea is that the site would display images depending on the capabilities of the user reqestimg them. My tiny mobile device doesn't need a very high resolution image however my desktop with a 4K screen would love a lot more pixels.



Offline apirie98

  • Member
  • Posts: 41
  • United Kingdom
  • Liked: 17
  • Likes Given: 33
Re: NSF 2017: Article Presentation Improvements
« Reply #13 on: 08/15/2016 12:33 pm »
For reading the article, the balance between text and images is already quite good and captions or similar would probably clutter the article a bit. How about a caption that appears at the bottom of the image when a user scrolls over it with a mouse (or taps for touchscreen devices) - a click (or a double tap) would bring up a larger version of the image.
"It's Quite Big"  - Elon Musk

Offline Rocket Science

  • Senior Member
  • *****
  • Posts: 10586
  • NASA Educator Astronaut Candidate Applicant 2002
  • Liked: 4548
  • Likes Given: 13523
Re: NSF 2017: Article Presentation Improvements
« Reply #14 on: 08/15/2016 01:23 pm »
I made this suggestion in the logo thread: A different background behind "same logo" for each forum section:
For example, Historical behind NASASPACEFLIGHT a photo or graphic of Apollo on the Moon's surface...etc Oh Nathan ;) ;D
« Last Edit: 08/15/2016 01:25 pm by Rocket Science »
"The laws of physics are unforgiving"
~Rob: Physics instructor, Aviator

Offline Chris Bergin

Re: NSF 2017: Article Presentation Improvements
« Reply #15 on: 08/15/2016 04:45 pm »
I made this suggestion in the logo thread: A different background behind "same logo" for each forum section:
For example, Historical behind NASASPACEFLIGHT a photo or graphic of Apollo on the Moon's surface...etc Oh Nathan ;) ;D

We used to do that! Maybe someone can check waybackmachine and find the circa 2009 ish? (I think).
Support NSF via L2 -- Help improve NSF -- Site Rules/Feedback/Updates
**Not a L2 member? Whitelist this forum in your adblocker to support the site and ensure full functionality.**

Offline Rocket Science

  • Senior Member
  • *****
  • Posts: 10586
  • NASA Educator Astronaut Candidate Applicant 2002
  • Liked: 4548
  • Likes Given: 13523
Re: NSF 2017: Article Presentation Improvements
« Reply #16 on: 08/15/2016 06:18 pm »
I made this suggestion in the logo thread: A different background behind "same logo" for each forum section:
For example, Historical behind NASASPACEFLIGHT a photo or graphic of Apollo on the Moon's surface...etc Oh Nathan ;) ;D

We used to do that! Maybe someone can check waybackmachine and find the circa 2009 ish? (I think).
What a blast from the past... "rocket humor" Here it is! 8)
https://web.archive.org/web/20090311054416/http://www.nasaspaceflight.com/
"The laws of physics are unforgiving"
~Rob: Physics instructor, Aviator

Offline Chris Bergin

Re: NSF 2017: Article Presentation Improvements
« Reply #17 on: 08/15/2016 06:51 pm »
I made this suggestion in the logo thread: A different background behind "same logo" for each forum section:
For example, Historical behind NASASPACEFLIGHT a photo or graphic of Apollo on the Moon's surface...etc Oh Nathan ;) ;D

We used to do that! Maybe someone can check waybackmachine and find the circa 2009 ish? (I think).
What a blast from the past... "rocket humor" Here it is! 8)
https://web.archive.org/web/20090311054416/http://www.nasaspaceflight.com/

Wow! There we go! The old, old NSF, with the different icons for different subject areas on the logo.

But no dedicated SpaceX area back then! ;D
Support NSF via L2 -- Help improve NSF -- Site Rules/Feedback/Updates
**Not a L2 member? Whitelist this forum in your adblocker to support the site and ensure full functionality.**

Offline okan170

  • Full Member
  • ****
  • Posts: 1111
  • Los Angeles
  • Liked: 6806
  • Likes Given: 1345
Re: NSF 2017: Article Presentation Improvements
« Reply #18 on: 08/15/2016 07:19 pm »
I made this suggestion in the logo thread: A different background behind "same logo" for each forum section:
For example, Historical behind NASASPACEFLIGHT a photo or graphic of Apollo on the Moon's surface...etc Oh Nathan ;) ;D

I'd be down for providing some graphics for the redesign!  One of the reasons I render at 4k is so that we can have options if we want to use any of the renders for whatever reasons may come, and that seems a reasonably future-proof size.

Wow! There we go! The old, old NSF, with the different icons for different subject areas on the logo.

But no dedicated SpaceX area back then! ;D

Thumbing through the Wayback Machine there, I notice that one of the very first articles there in 2005 is about VG starting suborbital fights.  While you may not have had a SpaceX section yet, it appears some things have been touchstones throughout the site's lifetime!

Offline NaN

  • Full Member
  • **
  • Posts: 248
  • Liked: 248
  • Likes Given: 232
Re: NSF 2017: Article Presentation Improvements
« Reply #19 on: 08/15/2016 08:33 pm »
I will agree with other posters that, given the existing article formatting width, the default image sizes should not change. For images that users can zoom, they should do as overlays or new pages, they should not expand inline and change layout. For L2 images that you're concerned about other sites borrowing without credit, watermarks or limiting the max resolution are options. When you post an FPIP in an article, full resolution would be very nice ;)
Thank you for seeking our feedback.

Offline Chris Bergin

Re: NSF 2017: Article Presentation Improvements
« Reply #20 on: 08/15/2016 08:36 pm »
I will agree with other posters that, given the existing article formatting width, the default image sizes should not change. For images that users can zoom, they should do as overlays or new pages, they should not expand inline and change layout. For L2 images that you're concerned about other sites borrowing without credit, watermarks or limiting the max resolution are options. When you post an FPIP in an article, full resolution would be very nice ;)
Thank you for seeking our feedback.

Could be a good call as I wonder if this zoom option will also help the different browsers and devices, from desktop to iPhones.

So for my test article, I should look at original layout, but with captions and for the images to zoom to large size if reader clicks on the image?
Support NSF via L2 -- Help improve NSF -- Site Rules/Feedback/Updates
**Not a L2 member? Whitelist this forum in your adblocker to support the site and ensure full functionality.**

Offline Eagandale4114

  • Full Member
  • **
  • Posts: 294
  • Liked: 541
  • Likes Given: 500
Re: NSF 2017: Article Presentation Improvements
« Reply #21 on: 08/15/2016 09:00 pm »
I will agree with other posters that, given the existing article formatting width, the default image sizes should not change. For images that users can zoom, they should do as overlays or new pages, they should not expand inline and change layout. For L2 images that you're concerned about other sites borrowing without credit, watermarks or limiting the max resolution are options. When you post an FPIP in an article, full resolution would be very nice ;)
Thank you for seeking our feedback.

Could be a good call as I wonder if this zoom option will also help the different browsers and devices, from desktop to iPhones.

So for my test article, I should look at original layout, but with captions and for the images to zoom to large size if reader clicks on the image?

Could we get a bit more info on the version of wordpress you are working with?

I agree that with the other posters that the ratio between text and images seems to be good as is, however for higher resolution devices, the pixel density is a little low. Something like this for wordpress 4.4 would be a good starting point.

Offline Chris Bergin

Re: NSF 2017: Article Presentation Improvements
« Reply #22 on: 08/15/2016 09:35 pm »
We're on Wordpress 4.5 - and will be going to 4.5.3, Eagan.
Support NSF via L2 -- Help improve NSF -- Site Rules/Feedback/Updates
**Not a L2 member? Whitelist this forum in your adblocker to support the site and ensure full functionality.**

Offline Eagandale4114

  • Full Member
  • **
  • Posts: 294
  • Liked: 541
  • Likes Given: 500
Re: NSF 2017: Article Presentation Improvements
« Reply #23 on: 08/15/2016 10:35 pm »
One possible implementation of this HiDPI/retina setup that works with the version of wordpress used is WP Retina 2x plugin. It handles the generation and delivery of the right sized images for the end users device. It will keep the displayed size of the images the same, but for devices that can support it, it will send a crisper image to be displayed. (If that was confusing, the site has a somewhat better explanation)

This should benefit all users with higher res displays not just apple. (Retina is apples marketing term for its implementation of HiDPI)

« Last Edit: 08/16/2016 01:57 am by Eagandale4114 »

Offline Tea Party Space Czar

  • President, Tea Party in Space
  • Full Member
  • ***
  • Posts: 382
  • TEA Party in Space Czar
  • Washington DC
  • Liked: 294
  • Likes Given: 284
Re: NSF 2017: Article Presentation Improvements
« Reply #24 on: 08/15/2016 10:36 pm »
Chris - one thing I try to do on my page is just have smaller images (where I can) and when you click on it it pops up in a new tab. 

Frankly - I really appreciate the pics but also like how small they are.  I wish sometimes I could blow them up to review data better but the format in and unto itself is pretty good.

The one thing you have to worry about when you start posting links to the full image is bandwidth and outside linking to your images w/o accreditation.  It never bothers me personally but I am a small fry.  I know a friend who has a most popular website has had to block outside linking to images.

Just some things to consider Sir.

Respectfully,
Andrew Gasser

Online Eric Hedman

  • Senior Member
  • *****
  • Posts: 2308
  • The birthplace of the solid body electric guitar
  • Liked: 1950
  • Likes Given: 1139
Re: NSF 2017: Article Presentation Improvements
« Reply #25 on: 08/15/2016 11:03 pm »
Chris: So can you have all these suggestions implemented by tomorrow? ;D :) 8) :D :o

Offline jiv

  • Member
  • Posts: 4
  • Denton, TX
  • Liked: 12
  • Likes Given: 7
Re: NSF 2017: Article Presentation Improvements
« Reply #26 on: 08/21/2016 08:17 pm »
Finally, somewhere I think I can contribute!  :D

This may seem crazy, but I'm going to disagree with the common refrain here about the inline images being sized appropriately. I find that they are both:

(1) Too small to be properly appreciated (I think this is where many people are coming from with the "click to zoom in or make it bigger" message), and
(2) Too large to mesh well with the text. I find the disparity in column widths to be quite jarring and think it really makes the feature articles here look less professional than they could.

I would like to propose two different classes of image: full-width feature images which "sell" the story--particularly the lead image showing a launch, satellite, or other concept, but other key photos throughout the article could be featured as well--and much smaller inline images which help the content flow by illustrating concepts and breaking up the wall of text. It would be great if all of these images could be clicked to cause them to expand into a floating shadowbox.

I agree with many others that captions would be extremely helpful, especially for the full-width feature images. I think NaN really hit the nail on the head in stating the usefulness of such captions. They are nice with inline images as well, but less important there as the image's purpose is less to illustrate a specific concept than to add some color and excitement to the article--perhaps these captions should only be shown where these images are expanded?

I also think some minor treatments to the margins around the images and a general adjustment to line-height are helpful in improving readability.

To illustrate these concepts, I have attached a few mock-ups prepared by lightly editing a recent article's CSS and content using Firefox's developer console. I hope these help illustrate these concepts and at least one possible implementation of the captions people are proposing.

(edited to remove accidental multiple copies of attachments)
« Last Edit: 08/21/2016 08:18 pm by jiv »

Offline Chris Bergin

Re: NSF 2017: Article Presentation Improvements
« Reply #27 on: 08/22/2016 11:29 am »
Interesting! And thanks for showing an actual example of what captions look like....(I was trying to get my head around that). Does look nice and doesn't impact on the body of the article text (which was a concern).

The lead image should be workable, as that will be the same dimensions as the lead image from the front www.nasaspaceflight.com of site page (630x250).
Support NSF via L2 -- Help improve NSF -- Site Rules/Feedback/Updates
**Not a L2 member? Whitelist this forum in your adblocker to support the site and ensure full functionality.**

Offline enzo

  • Full Member
  • *
  • Posts: 137
  • USA
  • Liked: 118
  • Likes Given: 884
Re: NSF 2017: Article Presentation Improvements
« Reply #28 on: 08/23/2016 09:43 am »
NSF is currently using Arial which was designed in 1982. Suggest moving the site (not forum though) to a space age font.

Google Fonts API is free and convenient.
https://developers.google.com/fonts/docs/getting_started

A more recent sans serif would work well and add vibrancy to the subject matter of NSF.
https://fonts.google.com/?category=Sans+Serif

Predictably, Spaceflight Now is using Open Sans with the Google API. Space News is using a slab for headlines from Google API, and Georgia for articles, which is traditional for news, but it's boring and there's no reason to follow tradition.

Offline IRobot

  • Full Member
  • ****
  • Posts: 1312
  • Portugal & Germany
  • Liked: 310
  • Likes Given: 272
Re: NSF 2017: Article Presentation Improvements
« Reply #29 on: 08/23/2016 12:11 pm »

I'm not familiar with WordPress so I don't know all the constraints that authors have to work with, I think both issues can be solved if the paragraph that refers to the embedded image also incorporates a sentence that says something like:

"higher resolution image available in L2 at http....."

This way it is possible to use L2 membership to prevent non L2 members gaining access to the higher res images which Chris wanted to prevent.
I think we could avoid the paragraph with the URL.
The user should be able to click on the image and get a L2/non L2 size

As it is probably complicated to integrate L2 validation on the editor, here are a couple of options:

1) user clicks on the image and is redirected (new tab?) to a page which checks the L2 subscription and either loads a small or a large image and also has a text stating "higher resolution available for L2 members.
Sign up today!"

2) two versions of the page exist (maybe auto generated). One page is only accessible to L2 members and clicking on images leads to a larger image. On the other page, clicking on an image opens a popup stating "higher resolution available for L2 members. Sign up today!"

« Last Edit: 08/23/2016 12:12 pm by IRobot »

Tags:
 

Advertisement NovaTech
Advertisement Northrop Grumman
Advertisement
Advertisement Margaritaville Beach Resort South Padre Island
Advertisement Brady Kenniston
Advertisement NextSpaceflight
Advertisement Nathan Barker Photography
0