1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Responsive Design

Discussion in 'Have You Seen...?' started by Mike, May 24, 2013.

  1. Mike

    Mike XenForo Developer Staff Member

    In order to better support smaller-screen devices such as mobile phones and tablets, XenForo 1.2 will be introducing a responsive version of the default design.

    What is responsive design? At the simplest level, it allows you to specify CSS that applies only if the screen width is below a certain level. This allows the design to be significantly altered to fit smaller screens. For example, tabular or horizontally-focused designs don't work well when you only have a screen that's 320px wide (an iPhone).

    So, what options will XenForo provide?

    ss-2013-05-24_11-33-30.png

    Here you can see that we provide 3 "inflection points". In general, they correspond to particular classes of devices.
    • Narrow (max width: 480px): phones vertical, some phones horizontal
    • Medium (max width: 600px): some phones horizontal, 7" tablets vertical
    • Wide (max width: 800px): 7" tablets horizontal, 10" tablets vertical
    You can also disable the responsive design entirely. Specific pages can also opt out of the responsive design with a <xen:container /> line.

    For add-on developers, many of your pages will automatically support the responsive design well. It really depends how much "default" CSS you are using. If you are creating multi-column layouts (such as some resource manager pages), you will need to write custom responsive versions. However, if you're just using standard systems like tabs and forms, you will automatically inherit the responsive changes.

    The extent of changes on a page will really vary based on the width of a device. For example, "wide devices" (601-800px by default) will see mostly similar pages, but things like sidebars will be moved if needed.

    But this is really more about screenshots. For ease of my job, I'm taking these screenshots in Chrome on a desktop machine. :) As always, this is a work in progress and things are still subject to change.

    ss-2013-05-24_11-45-57.png

    This part does deserve special mention as it's very dynamic now. The short of it is that if there's not enough space to fit things (at any resolution), navigation/search options will be hidden as necessary and shown behind menus. User alerts/unread conversation counts will be folded into your user menu. If there is a selected navigation tab, it will always be shown as well.

    These screens are all taken at the "narrow" level to show you the full extent of the possible changes.

    ss-2013-05-24_11-49-35.png ss-2013-05-24_11-50-00.png ss-2013-05-24_11-50-46.png ss-2013-05-24_11-51-04.png ss-2013-05-24_11-52-22.png ss-2013-05-24_11-53-06.png ss-2013-05-24_11-53-36.png
    CNK, Ryan_, Fuzz and 138 others like this.
  2. Andrej

    Andrej Well-Known Member

    Woooohoooooo! :D
    Blueprint4Love likes this.
  3. xf_phantom

    xf_phantom Well-Known Member

    where's the modbar?
    Andrej likes this.
  4. Chris D

    Chris D Well-Known Member

    Excellent work Mike :)

    Can't wait to see this live now :)
  5. Mike

    Mike XenForo Developer Staff Member

    Just not in the screens. It doesn't look any fundamentally different, just shorter words.
    xf_phantom likes this.
  6. LP-John

    LP-John Well-Known Member

    Nice job Mike. Something I'm really looking forward to.

    The forum home page looks good, but in the message template it really bugs me that "Report" becomes a widow. I'm not sure if that's just because of the screen size you are using, but starting a new line underneath the date might help.

    My last gripe is having the tabs look like tabs once they reach a mobile screen-size. They aren't really tabs anymore (because they are stacked), so having them look like buttons as opposed to tabs would be ideal.

    Once again, great work.
  7. Chris D

    Chris D Well-Known Member

    But they still look like tabs... and they are tabs... Not sure I understand why they'd need to look like buttons.
  8. MoonWalker92

    MoonWalker92 Active Member

    that's the best feature in xf 1.2 great job (y)
    gfc likes this.
  9. LP-John

    LP-John Well-Known Member

    Yes, functionally they are tabs. That doesn't change. What I am saying is I've never seen tabs stacked on each other one by one. Kind of looks silly when the selected state isn't on the line to show it's been selected.

    I mean it's fine, I'll change it myself lol.
  10. erich37

    erich37 Well-Known Member

  11. soloarquitectura

    soloarquitectura Active Member

  12. AlexT

    AlexT Well-Known Member

    Wonderful! (y)
  13. Clickfinity

    Clickfinity Well-Known Member

  14. oman

    oman Well-Known Member

    Very well done! Looks awesome.
  15. Teapot

    Teapot Well-Known Member

    Now this is very cool. Good job! This all looks incredibly well thought out.
  16. pipedreams

    pipedreams Active Member

    Simply amazing! :D
    aculate likes this.
  17. JABRONI

    JABRONI Well-Known Member

    Nuoh my god...

    XF 1.2 op

    ;)
  18. TheBigK

    TheBigK Well-Known Member

    I'm concerned about having Widget Framework on all the pages. But I really look forward to this.
    Adam Howard likes this.
  19. Hoffi

    Hoffi Well-Known Member

    Really great, but:
    did that means, other and many new Phrases?
  20. Arty

    Arty Well-Known Member

    Great :)

    Can't wait for 1.2
    Digital Doctor and Adam Howard like this.

Share This Page