Welcome to ITH 3.1

  • 06/17/2014 10:43 am in

When we did a major overhaul of the site this past fall, we noted an improved tablet experience would be on the way in 2014.

This is now live, along with a host of other improvements that have been a focus since the 2013-2014 season wrapped up.

Instead of seeing a tight desktop version of the site on an iPad (or smaller tablet), there’s a lot more breathing room, as the tablet experience is a close mirror of what we have on mobile — a single column of content with white space on the side. (For readers who like a smaller browsing/reading window on desktop, simply minimize your window to an iPad size and you’ll be able to experience the site as such.)

This change makes ITH more adaptive than responsive, as we’re not fully fluid and instead have distinct breakpoints for tablet and mobile.

Other enhancements/improvements are as follows:

· Off-canvas mobile nav now less buggy with smoother transition.
· “Read More” link shoots you to correct position on page.
· Addition of recruit pages. Here’s an example with 2015 recruit Kenny Williams. More pages will be added over the coming weeks and months.
· Player pages are now populating photos again.

A few other things of note:

· Android 2.2 – 2.3.7 now makes up less than 16% of the Android marketplace and we no longer fully support it. We also no longer fully support any Apple devices running below iOS 6.
· If you’re using the default Android browser or a mouse on a desktop to access the off-canvas navigation, make sure to try and touch the dead center of the hamburger icon.
· Our Resources section, previously located in the homepage sidebar, is now available here.
· If things are looking off, give your cache a refresh. This should solve most display issues.

If you’re encountering any bugs etc., let us know and we’ll do our best to rectify them.

Filed to:

  • DRT

    My two cents (from a laptop):
    The home page displays the Trending section on the left and pushes the main content to the right. When I click an article (such as this one) it puts the content on the left and the “Latest” section on the right. I would say the home page should display content towards the left and “trending” section to the right, like it does when you click an article. Otherwise looks great 🙂

  • Refresh your browser, as outlined in the post above: http://www.refreshyourcache.com/en/cache/

  • Chronic Hoosier

    The best keep getting better. As always, killer work, Ryan.

  • The_Real_Assembly_Hall

    Nice job guys!

  • marcusgresham

    I clicked on the link to the Kenny Williams recruit page. There’s a check mark to signify that he has an offer from IU, but shouldn’t that be in red instead of black?

    Just kidding. Looks great.

  • DRT

    We’re all good. Thanks.

  • PocketHoosier

    First, the site looks really good. Second, I am a professional software developer primarily focused in enterprise level server side business engines (fancy words for “I automate business processes”) and mobile-first client side responsive skins (fancy words for “mobile-centric web sites”)

    This one will be my geek post; I’ll reply to it with a bit more general audience level post.

    A piece of free professional advice for your development team for the next go around on refreshing the site.

    Use em based media queries for your responsive breakpoints rather than fixed widths (I see fixed widths in your style.css) This will do several things for your design (3 important ones)
    1) With em based media queries, you will have a fluid layout even on devices with aspect ratios that haven’t been developed for yet.
    2) With em based media queries, your layout will automatically respond to browser zoom levels. If a reader sits at their desktop and zooms the browser in, among other things, the browser adjusts its Em sizing. When this em size is adjusted, the “em width” of the browser is adjusted accordingly and your media query will trigger on your breakpoints. So, for instance, if I were sitting at my workstation with a 9:16 vertical monitor (like I am now) I can zoom Chrome in several steps and trigger your mobile layout.

    …the coolest one for me, maybe because I am a developer
    3)Piggybacking on 2, you can use a 16:9 widescreen monitor in a vertical orientation (A swiveling VESA stand will do this and Windows 7 allows you to rotate a view from landscape to portrait orientation) When you do this, you can develop for your mobile layout on a full sized monitor. If you didn’t already know that, did that just blow your mind? lol

    My workstation drives 3 monitors, a 9:16 vertical widescreen to approximate a mobile portrait layout. I have rotate the stand on the fly to test out a 16:9 widescreen layout and zoom up to trigger my em breakpoint to force it to show my mobile layout. I have a second monitor that I test out my tablet layouts by sizing a browser window accordingly, and I have my laptop opened to serve as my application dashboard.

    This layout serves me very well. Again, the site looks very nice. I hope this information can make your lives a little easier.

  • Nice tip on the em-based media queries. Thanks for sharing.

  • PocketHoosier

    Any time.
    One final note on em queries:

    If you use them, and you have a sufficiently large touch screen widescreen monitor, you can position it in a vertical orientation, rotate your view in Windows, and it becomes much easier (and just plain more impressive) to demonstrate mobile layouts in client meetings. If you want to switch from a vertical portrait layout to a horizontal landscape layout, you rotate the stand (Most Dell Ultrasharp monitors come with a rotating VESA stand…they’re quite nice) and [Ctrl]+[Alt]+[Up Arrow] for landscape. [Ctrl]+[Alt]+[Left Arrow] for portrait.

    The first time I did that, the client was just enamored by the fact that I was able to put a 27″ mobile touch screen interface in front of them. The only thing that was required to do it was replace the fixed width queries with em based ones.

  • Zack Marshall

    Any thoughts about an Inside the Hall app?

  • There are currently no plans for an Inside the Hall app.

  • ErniePyle

    Nice job, Ryan. Just curious, which responsive framework did you use for theming?

  • I actually didn’t use any sort of framework. All custom.

  • PocketHoosier

    Oh, I forgot to say: when you go to em based queries, it is also a beneficial time to shift from max-width queries to min-width queries. Conceptually, with min-width queries, you design “mobile first” and then work your way up in resolution rather than “desktop first” and working your way down as you do with max-widths. That would be your time to shift away from your adaptive approach into a full-blown responsive mobile-first design. Once you’re there, maintenance becomes a breeze (at least with our current technology requirements)

    Min-width breakpoints save some headaches that come with max-widths as they cascade. With min-widths, you get this nice conceptual model where the values stack on top of one another and the most permissive value gets used. With max-widths, as your classes stack, the most restrictive one typically gets used as you cascade down the layouts, so you can potentially find yourself dealing with some css soup trying to apply the correct stylings to the correct layouts (as I’m sure you have run into with the 3.1 refresh.) You can routinely run into situations where you have to adorn a style with !important that you don’t really want to, and if you aren’t extremely careful with it, you can easily run into conflicting !importants that trigger some fairly esoteric and unapparent styling applications.

  • PocketHoosier

    A little more information: mobile native apps are diminishing in importance very quickly. They were important early in the smartphone era when websites had completely broken mobile experiences and then when Flash/browser plug-in based sites wanted to have a presence on touch screen devices (Flash based sites are typically very hover centric. You can’t hover on current generation touch devices)

    Anymore, you really do require a business need for mobile-centric software (a mobile game or *mobile-only* software) rather than an information site to justify the expense of building out and maintaining a separate application.

    With the “responsive” movement to fix all of the web sites built with desktop only techniques, the native app is pretty much gone unless you want to have a premium mobile content channel. They’re also expensive because they have different development requirements, so you either have to take the time to learn the techniques yourself so you can build and maintain it or you have to bring on a dedicated mobile platform developer to do it for you.

    …we’re expensive lol

  • PocketHoosier

    Did you use SASS or LESS for your stylesheets or did you freestyle it all?

  • Devout Hoosier

    Comments for Windows Phone mobile devices are completely broken. You can not read nor leave comments.

  • freestyle

  • ErniePyle