Related product Link Resolver (SFX)

SFX Navigation

Customizing Mobile Displays in SFX

Why You May Want to Customize Your SFX Mobile Display

  • Consistency between mobile display and desktop display are important to make your user’s experience better
  • Between 9% (based on Rush University’s Google Analytics data) and 16% (based on IIT’s Google Analytics data) of users arrive to the library website on mobile devices.
    • Google analytics, or LibGuides analytics, can tell you how many users are accessing your site (and therefore SFX) through their mobile devices (SFX does not provide these stats)
    • The percentage of mobile device users is growing rapidly at most colleges.

SFX Admin Interface

  • The admin platform has very limited capabilities, only allowing you to specify your banner image
    • Check the size recommendations for the banner image before uploading

SFX Menu – General Tips

  • Consider how any custom notes may be displayed in small, mobile screen. Keep notes short and simple
  • Use the sfx-test server to test out your custom CSS before editing it live. You can do that by adding sfx-test to the front of your SFX URL

 CSS for the SFX Simplified Menu

  • CSS files can be edited through the SFX Admin Interface’s UNIX file manager
    • For permission to access the UNIX file manager, you may need to contact CARLI
  • The files you are looking for are located at templates/css/public/mobile/
  • Any customizations you want to add will go into the file custom.css
    • Customizations are somewhat unique to each institution, but emphasis should be on customizing the SFX menu with branding from your institution and should be aimed at mobile users

Mobile Responsive IFrames

  • If your library website uses an IFrame to display their SFX install, there is some custom CSS that you can include in order to ensure that your IFrame is responsive to mobile devices
  • This CSS needs to be done on the library website - not through the SFX admin portal and you will need to talk to your web developer to see how to accomplish this
  • CSS elements to add to ensure mobile responsivity:
    • position: relative; - lets us use absolute positioning for the IFrame itself
    • padding-bottom: 56.25%; - calculated out of the aspect ratio of the element in the IFrame. Depending on what’s in your IFrame this may need to change
    • padding-top: 35px; - provides space on top of your element. This may need to change depending on your website’s CSS
    • height: 0; the padding-bottom element gives your IFrame the height it needs, so height can be set to zero
    • overflow: hidden; ensures any content protruding outside of your IFrame is hidden.
    • overflow-y:scroll; ensures that any content that protrudes outside of your element is accessible through a scroll bar. For this element you may want to add a media query to make sure that the overflow bar only appears when it’s actually being viewed through a mobile device

Further Work

  • Mobile responsiveness for the SFX A-Z list. This issue was not addressed at all, but is a frequently used tool by CARLI libraries

Helpful Links