Welcome!


This is a membership forum. Guests can view 5 pages for free. To participate, please join.

[ Pitmaster Club Information | Join Now | Login | Contact Us ]

Only 4 free page views remaining.

Announcement

Collapse
No announcement yet.

Website Change and iPad

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    #16
    No problem. Let’s all wait on any further comments until we get the all clear from Meathead. And again, we do all appreciate your hard work on this.

    Comment


      #17
      Originally posted by jfmorris View Post
      First - I understand this is a work in progress, and not bashing it. Just want to put another data point out there.

      I am on an iPad Pro 12.9", which has a 2732 x 2048 resolution screen. So it is WAY above 1200 pixels wide in either orientation, but as of today anyway, in portrait mode (my normal browsing view), it now shows the hamburger menu, and not the horizontal menu. It only shows "normal" when I rotate to landscape orientation.

      GEEKY STUFF AHEAD. Skip if not interested.
      So, this is something that's kind of weird about how sites deal with screens. When you view a site like this on a device and it changes based on the width of the browser there are several things that go into deciding what to show:

      1) The screen width in pixels
      2) the screen pixel density (how many pixels per inch of screen)
      3) the orientation (not relevant for desktops but for mobile and tablets, you can do different things depending on how the device is held, in portrait or landscape)

      However, the code that tells browsers what to do doesn't need to specify all of these. You can just specify one, say, the width. That code looks like this:

      @media(max-width: 1200px) {some styles here }

      What that says is to apply the styles in the curly brackets if the width of the browser is under 1200 pixels.

      Some screens have more pixels per inch than others. For example, I have two 24" monitors - one is 1920x1080 pixels (HD), the other is 3840x2060 (4k). Yet objects appear the same sizeon both... what's up? Well, browsers account for the difference in screen density - there are more pixels per inch on my 4k screen so things scale to a 'virtual pixel'. An iPad like yours, while it has a 2732px width, also has (IIRC) a 3x screen density, i.e. there are 3 real pixels to 1 virtual. If you don't tell a browser this in the stylesheet, then it will see your 2732px browser as 910px. And you'll get the styles defined for smaller windows.

      You can correct this in CSS but it's cumbersome - some screens are 1x, some, 2x, some 3x. So, very often, it's not done and you test on a variety of devices and adjust as best you can. From the sound if it, that's where the Pit folks are and we just need to let them work for a bit.
      Last edited by rickgregory; November 9, 2020, 12:43 PM.

      Comment


      • jfmorris
        jfmorris commented
        Editing a comment
        Good write up on how scaling works, and you are right - most browsers and OS'es work to have a similar apparent font size regardless of resolution and screen size. The only exception to me for this is the way many apps fail to scale well on 4K and 5K screens under Windows 10, and a lot of that is due to the apps not being written to scale properly. I've got a few apps I still run that just are unreadably tiny on a 4K or 5K screen under Windows. My Mac's don't have that issue.

      • rickgregory
        rickgregory commented
        Editing a comment
        yeah Windows can be funky on high res screens. On things like an iPad there's nothing you can really do, it's just what happens on sites. And I noticed the menus are different now... They'll get it all adjusted. having done this myself it can be a laborious process, esp when you're adjust other things too.

      • Meathead
        Meathead commented
        Editing a comment
        Great summary. We are also paying attention to basic 101 user interface design principles.

      #18
      I appreciate the coding suggestions.

      I have many years (starting about 1982) with computers and coding. I have many years of IT and web development (starting about 1992). I try to stay up to date on all computer and internet technologies. A futile effort, but I try. I am fully aware of responsive design and implementation.

      But... this is not a simple HTML/CSS/Javascript site. It is a very complex system with it's own customized widgets, templating system, and even jQuery. And it has a built in "page builder" system. That is where the navigation bar is managed.

      On top of all that, I have already added many customizations, these have to be carefully implemented and thoroughly tested (an even then I break things occasionally). Trying to overlay that with as simple CSS media query is not the solution. That will just break something else.

      The fact is, the navbar is designed to work very different from how it is setup here. See: https://forum.vbulletin.com/ (this is the native design). Notice the location of the search? Notice the sub menus? Notice that it works perfectly on all screens? That is because they have a specific design for the header.

      There are nearly an infinite number of screen sizes. Well, not infinite, but vast. The trade off is to code for common sizes.

      Now we come to the part that most people do not know. You can zoom in and out on any web page (this alters the "screen" size). Or change the browsers width. Or use a "responsive emulator" (CTRL+Shift+M - on Firefox). You can add your own custom CSS to load on any webpage you want. So if you do not like the look of the site, you can create CSS and Javascript to override. I do it on my GMail. On Firefox the email list shows a scroll bar all the time, I have a custom CSS that fixes that issue.

      Again, I appreciate the coding suggestions. Some changes and fixes I can do as I see fit. But others have to get approval first.

      Comment


      • ecowper
        ecowper commented
        Editing a comment
        Although I have a system engineering background, this is by no means an area of any sort of expertise. I mostly try to call out changes in behavior because that probably means something changed under the covers.

        You do a great job with a very complex system. Thank you!

      • raywjohnson
        raywjohnson commented
        Editing a comment
        Most welcome to all. Not really a thankless job. Members, management, and fellow "behind the scene" persons show much appreciation. For the record. this is one of my favorite sites to work on.

      • jfmorris
        jfmorris commented
        Editing a comment
        I appreciate the hard work you do, and do NOT envy you.

        I run a forum website for a home brewing club, with less than 100 users, and its hard enough keeping them happy. It was on vBulletin and was migrated to phpBB a few years ago, and any upgrade (under old vBulletin or newer phpBB) means I have to fuss with any customizations all over again. I try to leave it alone when I can.

        I can't imagine doing what you do for this number of users.

      #19
      Let me be clear here: The work going on for the past week has been divided between Ray and myself but I am driving the bus. So all criticism should be aimed at me but PLEASE keep your powder dry for a few more days until we are finished. I am doing almost all of the non-coding work such as organizing channels, icons, writing, etc. But the navbar is complex code that Ray handle under my direction. Again, please give us some time.

      Comment

      Announcement

      Collapse
      No announcement yet.
      Working...
      X
      false
      0
      Guest
      Guest
      500
      ["pitmaster-my-membership","login","join-pitmaster","lostpw","reset-password","special-offers","help","nojs","meat-ups","gifts","authaau-alpha","ebooklogin-start","alpha","start"]
      false
      false
      {"count":0,"link":"/forum/announcements/","debug":""}
      Yes
      ["\/forum\/free-deep-dive-guide-ebook-downloads","\/forum\/free-deep-dive-guide-ebook-downloads\/1157845-paid-members-download-your-6-deep-dive-guide-ebooks-for-free-here","\/forum\/the-pitcast","\/forum\/national-barbecue-news-magazine","\/forum\/national-barbecue-news-magazine\/national-barbecue-news-magazine-aa","\/forum\/national-barbecue-news-magazine\/national-barbecue-news-magazine-aa\/bbq-news-magazine-2019-issues","\/forum\/national-barbecue-news-magazine\/national-barbecue-news-magazine-aa\/bbq-news-magazine-2020-issues","\/forum\/national-barbecue-news-magazine\/national-barbecue-news-magazine-aa\/bbq-news-magazine-2021-issues","\/forum\/national-barbecue-news-magazine\/national-barbecue-news-magazine-aa\/bbq-news-magazine-2022-issues","\/forum\/national-barbecue-news-magazine\/national-barbecue-news-magazine-aa\/current-2023-issues","\/forum\/national-barbecue-news-magazine\/national-barbecue-news-magazine-aa\/current-2024-issues","\/forum\/free-deep-dive-guide-ebook-downloads\/1165909-trial-members-download-your-free-deep-dive-guide-ebook-here"]
      /forum/free-deep-dive-guide-ebook-downloads/1165909-trial-members-download-your-free-deep-dive-guide-ebook-here