kanji koohii FORUM
NEW FORUM: Mobile & Responsive Design - Printable Version

+- kanji koohii FORUM (http://forum.koohii.com)
+-- Forum: Learning Japanese (http://forum.koohii.com/forum-4.html)
+--- Forum: General discussion (http://forum.koohii.com/forum-8.html)
+--- Thread: NEW FORUM: Mobile & Responsive Design (/thread-13358.html)

Pages: 1 2

NEW FORUM: Mobile & Responsive Design - ファブリス - 2015-11-15

Please post any issues with the mobile device layout and/or the responsive design in this thread.

"Reponsive design" means that that content will adapt to smaller screens. Try resizing your browser.

On a sub 800 px display (eg. portrait on many tablets, or phones), you can read conversations in linear layout with the users and posts vertically stacked.

Most of the forum should be usable down to 480px wide.

Known issues:
- Opera mobile won't show the small font-based icons

Change Log

Nov 26
  • YouTube video URLs are now auto-embedded after posting/editing. Simply use the link bbcode or some other surrounding bbcode to force a standard link.
  • Improved header, logo and ad layout for mobile (hide username to save space, padding around the logo and ad)
  • Optimized layout of long pagination and Tweet button for mobile

Nov 24
  • Improved performance of the YouTube video embeds so threads with lots of videos load fast even on mobile

Nov 23
  • "Chinese & Hanzi" forum activity included in Recent Topics list
  • Changed language of "Reputation" to "Thanks"
  • Improved layout of the Thanks / Like page ( example )

Nov 21
  • Added Tweet button on index and topic pages. Share the topics you like and help the forum grow!
  • Improved layout of "Recent topics" title & "New Topic" button for < 600px
  • Improved Member List layout a bit

Nov 20
  • Added "Mark All Forums Read" link to Recent topics header
  • Improved the "Mark forum read" / "Subscribe" placement & spacing for < 700 px

Nov 19
  • Styling / spacing of the quick edit Save / Cancel buttons
  • Fixed / prettified layout of Private Messages' read view
  • Fixed / prettified layout of "Full Edit" option for posts

Nov 18
  • Solved (removed) the small gutter (horizontal scroll) in mobile layout (< 800 px)
  • Made Subscribe / Print View / Email Thread links more spaced out on < 800px (tap targets)


RE: NEW FORUM: Responsive Design - ファブリス - 2015-11-15

Shweeet, first PageSpeed Insight test... good start =)

Tap target size I don't know if I can fix those because lots of smaller links are kind of secondary and not super important.

Size content to viewport Hah, I almost forgot about that. So in Opera I keep getting a very small ~10px gutter on the right side (and thus a small horizontal scroll). If any css expert can figure this out, let me know!

[Image: LBmtCYb.png]

RE: NEW FORUM: Responsive Design - Bokusenou - 2015-11-15

I'll see if I can fix the Opera bug tomorrow after work, if someone else doesn't solve it by then. I haven't used Opera for debugging (at work we only test in Firefox, Chrome, IE & mobile browsers), but I'm guessing it should have at least some decent dev tools.

EDIT: In unrelated news, it looks like there's a simple fix out there for the FontAwesome Opera Mobile bug: http://support.themeblvd.com/forums/topic/fontawesome-fix-for-opera-mobile/

RE: NEW FORUM: Responsive Design - s0apgun - 2015-11-16

Definitely use the minified javascript files. Helps with load times a lot on responsive sites.

RE: NEW FORUM: Responsive Design - ファブリス - 2015-11-16

(2015-11-15, 9:42 pm)Bokusenou Wrote: I'll see if I can fix the Opera bug tomorrow after work, if someone else doesn't solve it by then. (...)

On further inspection, it is not Opera alone. Simply reducing the Google Chrome window, shows a very small horizontal scroll.

Here is the unminified stylesheet.

Could be that some of the @media rules I made are not synchronized. There is a cascade with the main "flatbox" class which has a padding of 17px and a negative margin of -17px is used in some places. One of the media rules reduces the padding/margin for small screens, perhaps there is a mismatch with 10px padding and -17px margin in some places. If all else fails one way I solve this is to save the page as html, and delete large chunks of the DOM tree until the bug disappears and then add it back in progressively to see problematic rule.

RE: NEW FORUM: Responsive Design - Bokusenou - 2015-11-17

Code:
@media all and (max-width:800px) { /* flatbox */ .flatbox { padding-left:10px; padding-right:10px; }

In that part, changing padding-right to 17px keeps the bottom scrollbar away until the window size is 484px wide on Chrome & Firefox. How to get rid of it when the window size is 484px or lower is something I haven't really figured out yet. Too tired now, so I'll look at it more later. If you plan on trying to find the fix yourself, I would start by resizing the browser window to 484px (breakpoint-related extensions can make this easier), and then fiddling with the padding amounts and other properties for .flatbox in your browser's developer tools.

EDIT: Just noticed that Google page insights says that your JapanesePod101 banner image and flatbox-ft div are going outside the viewport. I would take off the width="468" and height="60" in the HTML here:

 
Code:
<img src="/images/koohii/spnsrs/japanesepod101_468wh_v2.png" width="468" height="60" alt="JapanesePod101" title="Learn Japanese with free daily podcasts" />

Adding something like what's below to your CSS would probably be a good idea too. That way an image will never go beyond the boundaries of its parent element.

Code:
img {
max-width: 100%;
height: auto;
}

Hope that helps! I'll look at the flatbox-ft div soon.

RE: NEW FORUM: Responsive Design - ファブリス - 2015-11-18

Thank you Bokunesou, you've been very helpful Smile

I think I'll take a break from coding but I will get back to this soon.

The extra gutter seems to match the @media rule that switches the posts to the vertical mode.

EDIT: Yup you are correct, flatbox-ft 's negative margin does not match the rest of the @media rule changes. Should be an easy fix.

RE: NEW FORUM: Responsive Design - Bokusenou - 2015-11-18

Glad to hear it! I owe any Japanese skill I have to a combination of your RevTK/koohii web app, things I learned on this forum & AJATT, when I can give back, even a little, it makes me happy. ^-^

RE: NEW FORUM: Responsive Design - ファブリス - 2015-11-18

PageSpeed Insight improved a little bit.

If you refresh page, the gutter is solved on index page. The following needed to be fixed:
  • The logo image had a 1px border , which increases the container by 2 px, I made the border "bottom" only which looks kinda cool too
  • .flatbox-ft  indeed, removed padding/negative margin (unnecessary in this case)
  • white-space:nowrap in < 370px   could cause overflow  in the topic subtext (last post :username <date>). Peppering css with overflow:hidden is probably a bad idea performance wise, so I just allowed those to wrap around (a small fraction of the threads usually).

Another problem I am aware is that a thread with many videos could really stall and even take a long time to load on desktop. So I will be looking in "lazy loading" technique. I'm not aware of a MyBB plugin right now. This solution that uses thumbnail image instead of embedding the IFRAME directly, looks very good:

http://works.daugilas.com/lazyYT/demo/grid.html

I'd like to see some fun threads to share Japanese videos; but admittedly this really need to be fixed to make it possible to browse such a thread.

RE: NEW FORUM: Responsive Design - ファブリス - 2015-11-19

Added a change log to first post.

Fixed the following today (might need a reload / refresh in your browser):
  • Styling / spacing of the quick edit Save / Cancel buttons
  • Fixed / prettified layout of Private Messages' read view
  • Fixed / prettified layout of "Full Edit" option for posts


RE: NEW FORUM: Responsive Design - tokyostyle - 2015-11-19

(2015-11-19, 1:07 pm)ファブリス Wrote: Fixed the following today (might need a reload / refresh in your browser)

You know about the trick of adding the hash to the minifined CSS file so that the code and CSS stay in sync right? You just change your publishing process to rename the CSS file with the SHA1 hash appended and also inject that reference into the code.

RE: NEW FORUM: Responsive Design - ファブリス - 2015-11-20

Versioning? Yeah, unfortunately MyBB doesn't do that very well. I'll probably end up hacking something into it.

I still have to figure out how to rebuild my git repository so I can apply their latest patches over my changes.

RE: NEW FORUM: Responsive Design - ファブリス - 2015-11-20

Fixed the following today
  • Added "Mark All Forums Read" link to Recent topics header
  • Improved the "Mark forum read" / "Subscribe" placement & spacing for < 700 px

The stylesheet should also automatically update now (no need to refresh/reload).

RE: NEW FORUM: Responsive Design - tokyostyle - 2015-11-20

(2015-11-20, 1:40 pm)ファブリス Wrote: The stylesheet should also automatically update now (no need to refresh/reload).

素晴らしい！  Heart

RE: NEW FORUM: Responsive Design - ファブリス - 2015-11-21

Updates today
  • Added Tweet button on index and topic pages. Share the topics you like and help the forum grow!
  • Improved layout of "Recent topics" title & "New Topic" button for < 600px
  • Improved Member List layout a bit

Note that I used a simple Twitter button that does not use an IFRAME, to keep the page load fast. It may not behave 100% the same as the usual Twitter button.. seems to work fine.

Also I will look into a login / signup via Twitter account as well.

RE: NEW FORUM: General feedback - Bokusenou - 2015-11-22

I agree that something like this or another mobile menu script at the top of the page might be useful for the mobile version of the site. I typically look for a menu like that when I'm browsing sites on my phone. I usually browse the forums on my tablet, so it won't affect me much either way, but it might make things a little easier for mobile users.

RE: NEW FORUM: Mobile & Responsive Design - ファブリス - 2015-11-23

Man, Google takes forever. It still lists 7600+ pages with mobile usability issues, all of them using the old URLs  Angry

I used the "Fetch as Google" option in Google Webmasters on Nov 19th.

It does crawl a lot though! It crawled 70K and 97K pages last days, from a 5K average. And the average "Time spent downloading a page (in milliseconds)" is noticably lower as well, reaching sub 300ms since Nov 18th.

RE: NEW FORUM: Mobile & Responsive Design - ファブリス - 2015-11-24

Nov 24 update
  • Improved performance of the YouTube video embeds so threads with lots of videos load fast even on mobile

YouTube video embeds no longer use an IFRAME, until you click to play the video. This greatly improves the page loading speed and performance.

This Dope Japanese Hip-Hop thread, page 9, was stuttering and freezing my Firefox browser really bad. With today's update the page loads in 2 seconds and no freezing!

YouTube video embeds currently require using the Rich Text Editor , or the following BBCode :

Code:
[video=youtube]   youtube url  [/video]

I've made this change because I'd like to see some fun threads, in Off Topic maybe, to share Japanese videos. After all they can also be a good jumping point for discussing vocab and whatnot.

We could make one sticky topic in Off Topic forum to share videos if you like, similar to the other long running threads. =)

RE: NEW FORUM: Mobile & Responsive Design - ファブリス - 2015-11-25

Nov 25
  • Video embed should work now with Quick Reply and Quick Edit (may need a refresh / reload).


RE: NEW FORUM: Mobile &amp; Responsive Design - Kuroro - 2015-11-26

This is just a minor thing, but I noticed that when I reduce the size of safari's window on my mac the logo and the ad at the top of the page get aligned at the center in order of width, like this:

[Image: Screen_Shot_2015_11_26.png]

Could you do the same for the mobile design? Without any empty space on their sides the logo and the ad look really cramped in my opinion

RE: NEW FORUM: Mobile & Responsive Design - ファブリス - 2015-11-26

@Kuroro

What device width are we talking about?

I could *maybe* leave a little padding, the goal was to keep the logo and ad legible when they have to scale down. The ad banner is 468px wide. Are you viewing at 480px, or less?

RE: NEW FORUM: Mobile &amp; Responsive Design - Kuroro - 2015-11-26

It's an iPhone 6, according to wikipedia the resolution is 1334x750 pixel, this is what the top-half of the page looks like:

[Image: IMG_3979.png]

RE: NEW FORUM: Mobile & Responsive Design - ファブリス - 2015-11-26

Ahh good point. The pixel density means that the image, although being downscaled via CSS, does not actually loses definition (if anything it looks very blurry for lack of resolution).

The "Go" button look ugly too. iOS doesn't seem to accept styling form elements.

RE: NEW FORUM: Mobile & Responsive Design - ファブリス - 2015-11-26

Nov 26 updates
  • YouTube video URLs are now auto-embedded after posting/editing (no need for BBcode)
  • Improved header, logo and ad layout for mobile (hide username to save space, padding around the logo and ad)
  • Optimized layout of long pagination and Tweet button for mobile

Let me know if that's better Kuroro. Search box also shouldn't wrap around anymore.

RE: NEW FORUM: Mobile & Responsive Design - Kuroro - 2015-11-26

It's so much better! Well done!