Jump to content
Rikki
 Share


4.0 - Front-end Responsiveness Round-up

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:



Moderation

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

Calendar views on mobile:






Gallery

Viewing albums & images in a category:




Blog

The blog homepage:



And viewing a blog:




Forums

Submitting a topic on mobile:




Conclusion

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.

 Share

Comments

Recommended Comments



Nice job, but now if there are the same theme for desktop and mobile there is a problem in the states without a good 3g connection
more info: http://community.invisionpower.com/topic/400022-ipb-40-different-responsive-theme-for-mobile-devices/

 

Looking at that skin I cant imagine its gonna load much slower than any designed mobile theme. Therefore the only detriment to this would be something in which you add yourself, for example images being loaded incorrectly for mobile devices. Responsive design caters for all this and is generally the new way in which things are done on the internet.

 

To name but a few sites:-

 

google

EE

London Transport

BBC

Disney

Boston Globe

Ableton

Harvard University

CSS Tricks

Starbucks

Time Magazine

 

 

or maybe something a little more relevant to the situation

 

xenforo

wordpress

Burning Board

Vbulletin

 

 

Now I understand your concerns I really do. But you gotta ask yourself, is it really possible that everyone else with far more knowledge than either of us is wrong? My guess would be not.

Link to comment
Share on other sites




Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...