Get your favorite beverage, sit back, and join in the discussion
You are not logged in.
Okay, folks, I've spent the last 2-3 days working out a look that I like for the story listings.
You can find a demo page here: Demo Page
None of the clickable links go anywhere. If you want a good description of the page, click the Help icon in the upper left corner.
Please let me know what you think of this design. Yes, there is still room for modification, but I must say that this design has grown on me the longer I've worked on it.
Eric Storm
PS: A few notes:
1) This page, like the new site, requires Javascript. If you have disabled JS, you will need to enable it for this page, and the new version of the website.
2) There is no consistency in which icons are displayed. For instance, PRM is not a per-story system, so there's no way you'd have PRM access to one thing and not another. I just wanted to let you see all of the icons. I picked them, basically, at random for each item.
3) The "Storm Blue" theme is not (necessarily) the look of the new site. This is my preferred working theme, so that's the one I built it in. The new site will have as many of the old theme choices as possible, updated for the new look.
4) This is not, by any means, a "completed" page, but it does reflect the basic design concept behind the new version of the site. There are many things missing from it, however, like menus, header information, and a navigation toolbar.
5) I have tested this in the three browsers I have on my computer (Firefox, Chrome, IE11). It worked on all three of them. If you encounter a problem, let me know, but please be specific about the problem, which browser and version, etc.
Offline
For multi-chapter stories like Woodward Academy year 6, would it be possible to have a line of links for finished chapters? something like:
Currently Available Chapters: 1, 2, 3, 4, 5
or
Currently Available Chapters: one, two, three, four, five
Whichever would be better for links.
That way, those of us that are actively following the story wouldn't have to click through to a second page with a full description and other information in order to navigate to the chapter we want.
Offline
Take this for what it's worth, considering I know almost nothing about web or artistic design, but it looks good to me. I like the expanding story descriptions and, I gotta say, I love the warning at the bottom.
One thing, the "arrow" to expand the story description doesn't show up for me. If I click in the center of the box, it still expands but no arrow is visible. Is this a problem with my laptop or are they not there? Just curious.
Offline
It look's great so far, I love the tool tips and how it set up easier to read. ^_^ good job!
Offline
Jefferson:
1) Do you see the other icons?
2) What browser are you using, and which version?
The arrow at the bottom, like all the other icons, is part of the FontAwesome icon-font set. It has, however, had a CSS rule applied to stretch it out. Perhaps your browser doesn't like CSS transforms (though even older IE's are supposed to be able to handle it...)
Barbarian:
How about, instead of a line of links to chapters, if clicking the title simply takes you to the last chapter you read? I'm thinking that the new site may "auto-bookmark". That is, it will automatically bookmark your spot in a book when you leave a page. Then, when you click on the title, you would be taken directly to that chapter (and spot within the chapter). Of course, if you finished reading what was available, you'll still have to click through to the newly posted chapter, but fixing that would, I think, require logic beyond my ability to program.
Wicked Storm:
Glad you found it easier to read.
Thanks for the feedback, you guys
Eric Storm
Offline
Auto bookmarking sounds good to me. I was just thinking about reducing the number of clicks we would have to make to get to the content.
Offline
I like the layout but I'm unable to hover over the dotted line or see any icons. I'm on an iPhone so I use safari which is probably the problem.
Offline
Unfortunately, since Apple no longer produces a Safari version for Windows, I cannot check what the problem is. Do you have a Mac at home that you can check this on?
Eric Storm
Offline
No I've broke all my laptops. I do have an old desktop that runs Windows 98 I could set up but that probably won't help too much lol. Worse case I'll have to download Firefox for my phone.
Last edited by thehilz (2016-08-21 03:34:58)
Offline
No, that wouldn't have helped. Turns out it was broken for ALL mobile devices. I believe I have fixed the "missing icons" problem now. Please check it and let me know if you see them.
I have also corrected the "info box is wider than its background" problem, which I didn't see until it was on a mobile platform with a narrow screen.
As to the no-hover thing: The tooltips I'm using work through Javascript, rather than directly through the browser (so that they will look better), so the usual double-tap-to-hover trick doesn't seem to work. I could try adding in a double-tap event... (Not sure how to do that, so it would be exploration time again...)
Or I could either add to, or switch altogether, the tooltips to a click modality. In other words, if you wanted to know about an icon or underlined term, you would click it. This works find until I come to an icon I actually want you to interact with...
I'll look into the double-tap event for Javascript, to see if it even exists.
I have also not fixed the "more-info box font is way too damned big" problem on mobile devices, because I haven't the foggiest clue what's causing it.
Eric Storm
Offline
Yes I can see the icons now but the arrows are not opening up any more info for me.
Last edited by thehilz (2016-08-21 05:08:17)
Offline
Well, now that's a really odd one. I'll have to look into that and get back to you.
*mutters about non-standards-compliant browsers...*
Eric Storm
Offline
thehilz:
Could you take a look at this once more, and see if it's working for you now? I added in the (VERY STUPID) piece of code that iOS needs to treat the down arrow as clickable (as well as all the other places it was needed...)
The hover issue is a non-fixable problem, because I'm not willing to put in the weeks of learning it would probably take to make things function as perfectly on a mobile device as on a real computer, so what I've done, instead, is to add a double-down-arrow icon at the end of the codes. When clicked, it expands a listing that shows the codes and their definitions. The hover tooltips will still work for computers that work with a cursor onscreen.
The font-size issue is another non-fixable problem, because I can't comprehend how to tell mobile devices, "LEAVE MY FUCKING CODE ALONE!" Mobile devices actually alter the size of text on webpages to suit their own "inflation algorithm" in order to make sure that text is large enough to read. Of course, "large enough to read" is highly subjective, and in this case, the algorithm has blown it way the hell out of proportion. I'll keep fiddling with it, but I don't hold out much hope. I hate it when people actually choose to violate standards like this.
Eric Storm
Offline
It works for me now.
I can see the down arrow, the heart, the bookmark, the star and the lock. I can also see the ? on the Help page button. The help page works now too.
I don't know what you did, but it worked.
Offline
You don't want to know what I did. It's complicated and highly illogical, thanks to Apple and Android.
Eric Storm
PS: Most annoyingly, I also realized that the iPad doesn't have the font-size problem that the Android does. I hate standards non-compliance!
Offline
I didn't have any issues this time. Thanks for putting in the work.
Offline
Does it have to take up the whole page? Maybe have the titles off to the right of the page and as you click on them they give you a description in the center left of the page. I also like what Barbarian suggested about book links for a series because while auto bookmark sound cool, at the same time if we want to go back and read a older book in the series that would make things easier.
Offline
Bookmarks occur within a single book, not within a series of books. If you want to go back and read an earlier book, that has no bearing on the bookmark in the book you're looking at. Even within the book, once you're at the book's page, you'll be able to navigate to earlier sections. But the simple fact is, the by-far most common place that people want to get to within a book is the place they stopped reading it.
Now, as to your suggestion for the items list... I must confess it makes no sense to me whatsoever. WHY are you trying to conserve screen real estate? There is nothing else to display in it. Hell, you've even stated that the empty space your design creates eventually gets filled by the information, so what a user is presented with, on page load, is a screen that is mostly blank. That is generally considered bad design. I should know, as it is very similar to the design we currently use, which sucks.
Further, the point of this design was to present the reader with the basics of a story without clicking. In essence, I wanted to give them the necessary information to know when they absolutely do not want to read a story (this is usually because there is some kind of content they don't like, such as homosexual sex). Once they've decided the story isn't obviously objectionable, they can click to get the remaining details, to find out if they want to read it. Likewise, if they're looking for a story that contains, as an example, sex between a teen boy and an older woman, then they'll be able to simply look at the codes for "mF", and then, again, can click for more info to see if they want to read it. What you're suggesting requires them to click on each and every story in order to find out anything at all.
Please note that this is not a MENU. This is a "search results page". When you go to the author's page, there will be a menu of their stories which will consist of nothing but titles. There will also be a page that presents all of their stories in this style, so you know what the stories are about.
And a kind of picky note: Why would you suggest a right-to-left design concept, when English is a left-to-right language? That would be inherently unpleasant to a lot of people.
So, unless you can give a logical reason why I would do what you're suggesting, I just can't see how it meets any of the design requirements.
Eric Storm
Offline
I also think you're a bit confused about Barbarian's comment. He was asking for chapter links within a single book, not links to other books in a series.
However, the listing already contains a link to the previous book in a series, the next book in a series, and the series' home page, as it is, so I think that issue's been covered.
Eric Storm
Offline
Ok. Sorry apparently my mind was trying to take over without my consent lol. In all seriousness I have no idea why I suggested those things. So feel free to disregard them.
Offline