Eviscerati.Org, 2014 Edition

Submitted by C B Wright on

One of the things I've wanted to do for a veeeeeeeery long time is support mobile devices. I toyed with a solution briefly last year but it wasn't very robust, and I decided I was going to wait until I had time to implement a proper solution.

How to implement a proper solution, you ask? Well, first you start developing using a Drupal template that that was specifically designed to support various media devices "automagically, on-the-fly." To do this I adopted a template from AdaptiveThemes and modified it to get it as close to my old site design as I could possibly manage. A few weeks later (and many sleepless nights later) this is the result.

There are a few quirks in the UI I haven't worked out yet. You may notice that the header is completely screwed when you're browsing with a smartphone or a tablet. I haven't quite figured out how to fix that just yet (if you happen to be a CSS whiz please feel free to open up Firebug, take a gander, and send me some advice!) I expect I'll find other charming issues along the way as well. But I think overall the change will be much more convenient for mobile users, and possibly not horrible for the rest of you as well.

Comments

Comments are active for 30 days after publication. If you wish to comment after 30 days please use the Forums.

Hmm. I like it. Very clean,

Hmm. I like it. Very clean, got some polish. A little bit bootstrappy. The font seems different. 

The Anono in your El.

I liked the old one better.

I liked the old one better. The new one moves the background-color declarations in a way that now I need specific overrides for this site to make it look right. Previously, the generic override for the body tag was enough.

Addendum: I *really* hate the new captcha. I think I'll go read-only after this until you find a less obnoxious one. This is try #4...

It should be the same captcha

It should be the same captcha I've always used. If you can show me a screenshot of what you're encountering it'll help me debug. Same with the background-color declarations.

--
Writer, former musician, occasional cartoonist, and noted authority on his own opinions.

On my desktop system, using

On my desktop system, using Firefox 26.0 under Ubuntu Linux 12.04, the comic is compressed such that the text is so small as to be almost unreadable. I could see no obvious way to expand the image to its original size, other than right clicking on it and selecting "view image".

That's definitely a problem!

That's definitely a problem! Unfortunately, I can't reproduce it. I have Kubuntu 13.10 and FF 26.0, and the comic images don't scale no matter what I do.

Can you try flushing browser cache, etc, and tell me if the problem persists?

--
Writer, former musician, occasional cartoonist, and noted authority on his own opinions.

It turns out that I can't

It turns out that I can't reproduce the problem anywhere else, either. I tried Firefox 26.0 on my laptop running Ubuntu 13.04, and Chomium on my desktop that has the problem with Firefox. I also booted my desktop to the live DVD Ubuntu 12.04 that I installed with and tried the Firefox 11.0 that it came with, and also updated to Firefox 26.0. All of the above worked find with no scaling of the comic.

However, the setup that I reported having the problem with is still experiencing it after clearing all history and cache. Very strange. Here's a screenshot of the problem:

http://ubuntuone.com/6KiFlPCXW0dhcNH026FMDJ

As I said, right clicking on the image and selecting "view image" displays it properly at the original size.

 

 

That's weird. Is that version

That's weird. Is that version of FF running any plugins or addons that the others aren't?

--
Writer, former musician, occasional cartoonist, and noted authority on his own opinions.

I just tried disabling all

I just tried disabling all extensions, plugins and language packs. I still have the problem.

Don't worry too much about it unless others start complaining about the same thing. I plan to ugrade to a new system soon with a fresh install of everything, which should fix it for me.

But it's WEIRD. I want to

But it's WEIRD. I want to know why. :)

--
Writer, former musician, occasional cartoonist, and noted authority on his own opinions.

Scott A.: How wide is the

Scott A.: How wide is the browser window (in pixels)?  Have you tried hitting ctrl-0?

ysth: The example screen shot

ysth: My first example screen shot (a window capture) is 1281 pixels wide. However, the image doesn't change size no matter how I size the browser window, even if I switch to full screen, or even entire full screen using F11.

Cntrl-0 does nothing since I'm already at normal zoom. Zooming in or out without "Zoom text only" set just changes the proportions of everything.

With "Zoom text only" checked, the image will sometimes change size as I zoom in and out. It appears that first the size of the bluish-grey box is determined, then the text is placed in the box, then the image is scalled to fit. Example of extreme text only zoom:

http://ubuntuone.com/1WGEZG4tmVx5u2bOPdjy38

 

I Found the cause of the

I Found the cause of the problem!

I had changed the minimum font size, under Preferences -> Content -> Fonts & Colors -> Defaut font -> Advanced -> Minimum font size, from "None" to "12". With it changed back to "None" everything displays properly.

Confirmed!

Confirmed!

I went in and set the minimum font size of my browser to 12  and the same thing happened pretty much immediately. I wonder why that is?

--
Writer, former musician, occasional cartoonist, and noted authority on his own opinions.

I notice that when you change

I notice that when you change the minimum font size, the width of the bluish-grey background area for the comic remains constant but the height changes. Changing the minimum font size affects (at least) the heights of the date text at the top, and the tag links at the bottom, of each blog post, as well as the text for each "AVAILABLE NOW" feature in the right column.

Perhaps a fixed height for the entire page is calculated based on the assumed height of all the text and other objects. When the browser resizes and increases the height of the affected (too small) text, the height of other individual areas are scaled and reduced to maintain the fixed overall page height calculated, thus leaving less height for the comic image and forcing it to be scaled smaller.

Hmm. Well it makes sense that

Hmm. Well it makes sense that a minimum font size of 12px will change the font size of the date and the text in the AVAILABLE NOW blocks because they're set to 11px in my stylesheets. But the idea that this may be tied to height is a bit mystifying, since it really ought to be tied to width (on my browser with minimum font size turned off, some of the graphics scale down when the browser gets narrower, but the comics--specifically the comics--don't do that, by design).

Ugh. This is going to be a pain to fix. At least I have a place to start looking. :)

--
Writer, former musician, occasional cartoonist, and noted authority on his own opinions.

Maybe of some help:

Maybe of some help:

With the minimum font size set to 12

  • Bring up the Firefox inspector tool: Tools -> Web developer -> Inspector or ctrl+shift+c
  • Select the <html ...> tag
  • Select the Rules column on the right

If you uncheck the line-height: 1.5 rule, the comic displays correctly (but the line spacing of all the text is reduced).

Whatever happened to the

Whatever happened to the ability to Log In to your site?  It used to tell me if there were new comments on a posting, and other things.

The login widget should be

The login widget should be just to the right of the logo, to the left of the search bar. If you're viewing from a mobile device then the header is currently screwed up and the login widget is hidden. I'm still trying to fix that...

--
Writer, former musician, occasional cartoonist, and noted authority on his own opinions.

Nope, no login anywhere on

Nope, no login anywhere on the top screen bar.  Just the evicerati.org logo, the search window, and the RSS orange thingy.  (Running IE10)

Now, looking at the page with

Now, looking at the page with Chrome, then the login/register section appears in the middle of the top bar.  But it's completely missing in IE10.

Well that's odd. I'll have to

Well that's odd. I'll have to fire up windows and take a look at that one. 

--
Writer, former musician, occasional cartoonist, and noted authority on his own opinions.

Is the html/css for the

Is the html/css for the mobile site different from the regular site?  If so, is there a url to get it even on a desktop?

It's based on browser width.

It's based on browser width. If you reduce the width of your browser so that the borders display, when you use the Inspect Element function of Firefox or Chrome you'll see the active CSS. Beyond that, I'm not entirely sure how it works. :)

--
Writer, former musician, occasional cartoonist, and noted authority on his own opinions.

OK, I think I fixed the image

OK, I think I fixed the image scaling issue (at least for browsers with a minimum font size setting of 13 or lower) and I think I also partially fixed the screwed up display of the site header in mobile devices.

--
Writer, former musician, occasional cartoonist, and noted authority on his own opinions.

The comic image is now proper

The comic image is now proper size for me, with minimum font size set to 12 in Firefox.

Sweet! Don't ever set the

Sweet! Don't ever set the minimum font size to anything above 13 and we'll be good. :D

--
Writer, former musician, occasional cartoonist, and noted authority on his own opinions.

OK, I found the login

OK, I found the login/register function again under IE10, this time between the search field and the RSS icon, and it works, apparently.

----------------------
. -- Scott