Advertise Here | Advertise Here | Advertise Here | Advertise Here
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Attention buyers: Please take the time to read THIS
    Dismiss Notice
  3. I have imposed a new requirement today limiting who can start and receive private conversations. This is in an effort to thwart scammers who have a zero post count but private message others offering to sell their licenses. The restriction is not strict, a user must post at least one (1) post in the forum before being allowed to start and/or receive private conversations. Read Forum Post
    Dismiss Notice
  4. Dismiss Notice
Dismiss Notice
Introducing the new Classifieds Section

Please see HERE for more info.

Official 4.0 - Front-end Responsiveness Round-up

Discussion in 'IP.Board' started by EL Paper Boy, Aug 17, 2014.

  1. EL Paper Boy

    EL Paper Boy Member

    Local Time:
    1:07 PM
    We've previously shown how responsiveness works in the AdminCP, but I'd like to briefly introduce responsiveness on the front end, and pick a few views to show you as examples (this will be a screenshot-heavy entry!)

    What is responsiveness?

    Before we get to that, allow me to recap what responsiveness is. Responsive design is a method by which you design one page in such a way that it adapts for the available screen space on the device the user is using. This means that one theme handles both the full desktop view and the condensed mobile view with some clever CSS, in contrast to 3.x where we had a separate mobile skin.

    When we took the decision to use responsive design for IPS4, one key aim was to ensure that the mobile view isn't feature reduced. We want all functionality and all areas of the suite to be available regardless of device, and with only a couple of exceptions we're on track to deliver this.

    Primary navigation

    In mobile view, the primary navigation collapses and moves to a menu accessible with the icon in the top-right. The breadcrumb becomes a 'Back' control, taking you up a level from the current page:

    The primary navigation, when opened, looks like this:


    Given that the responsive theme supports all functionality, this naturally includes moderation. IPS4 support full moderation capabilities regardless of the device you're using. Here's an example of moderating images in Gallery. Notice the menu to quickly select types of content to moderate, as well as the floating toolbar at the bottom of the screen to choose actions.

    Settings page

    Taking the settings area as an example, here's the same screen at the three supported breakpoints - desktop, tablet and mobile.

    Profile view

    Here's profile view (which we covered in more detail here) as seen on a phone:


    Calendar views on mobile:


    Viewing albums & images in a category:


    The blog homepage:

    And viewing a blog:


    Submitting a topic on mobile:


    So that wraps up this round-up of responsive views. Naturally, there's many more views than this in the suite and we can't show screenshots of every single one, but hopefully this entry has given you a taste of a variety of views, and a better idea of how we're approaching mobile users in IPS4.

    As always, screenshots are from pre-release software and are subject to change before release.
    Attached Thumbnails

    • [​IMG]
    • [​IMG]
    • [​IMG]
    • [​IMG]
    • [​IMG]
    • [​IMG]
    • [​IMG]
    • [​IMG]
    • [​IMG]
    • [​IMG]
    • [​IMG]
    • [​IMG]
    • [​IMG]

    View the full article

    Continue reading...

Share This Page