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



Great but I'm wondering how my 750x100 banner ads will look on a mobile phone.

 

You can specify three different versions of ad images if you manage ads yourself: desktop, tablet and phone. If you use an ad network, it'd be up to the network to serve appropriate images responsively.

Link to comment
Share on other sites

Is there any front-end responsiveness to the brain better receptivity of the square user's profile photograph rather than round? Unless we have round PC monitors, I think we should not dispute against the idea that square photograph is the common standart.

Link to comment
Share on other sites

Is there any front-end responsiveness to the brain better receptivity of the square user's profile photograph rather than round? Unless we have round PC monitors, I think we should not dispute against the idea that square photograph is the common standart.

 

They have already mentioned that there is a skin setting you can use to switch from round to square photos :)

Link to comment
Share on other sites

Very nice!

 

Quick question, what will the markup be for the different device columns, e.g col-xs-12, col-md-12? (Sorry if I've missed this in a different blog entry already).

Link to comment
Share on other sites

Looking really good.

It's a pity you have not shown how IP.Content articles or IP.Board forums look at the three supported breakpoints - desktop, tablet and mobile.

What happens to the global sidebar position on mobile does it appear at the top or bottom? I hope the positioning is configurable as I like my content to take centre stage followed by any sidebar blocks.
 

Link to comment
Share on other sites

Thing that always sucks (at least for a business) with the responsive profile and user pict etc overlayed on it... is that things never end up where people want them. If you design a clever profile pict (which people will likely want to do given the cover-image size) then it's a never ending nightmare trying to get overlays and background image to match up. I wish social media platforms would stop doing that because everyone I know hates it and is frustrated. It always looks nice for a strictly personal use using a landscape image or something as well as in a mockup but beyond that if you search around on Google+ etc you see a gazillion cover images looking funky as they aren't lined up as intended. 

 

You've done a really nice job with everything so I'm not meaning to put anything down but just pointing out my experience with that particular feature that looks great in the mockup or test account.

Link to comment
Share on other sites

Thing that always sucks (at least for a business) with the responsive profile and user pict etc overlayed on it... is that things never end up where people want them. If you design a clever profile pict (which people will likely want to do given the cover-image size) then it's a never ending nightmare trying to get overlays and background image to match up. I wish social media platforms would stop doing that because everyone I know hates it and is frustrated. It always looks nice for a strictly personal use using a landscape image or something as well as in a mockup but beyond that if you search around on Google+ etc you see a gazillion cover images looking funky as they aren't lined up as intended. 

 

You've done a really nice job with everything so I'm not meaning to put anything down but just pointing out my experience with that particular feature that looks great in the mockup or test account.

 

It's something people will have to bear in mind - clever images won't work here, because we have a semi-fluid theme, and therefore the image moves in the container depending on the browser size.

Link to comment
Share on other sites

Right, I realize that. I'm just pointing out that decision can be frustrating for many users just to have a pretty design there in theory. Can't please everyone and I totally understand that so I don't expect anything changed... but just giving feedback as a customer based off my experience :)

Link to comment
Share on other sites

 

It's something people will have to bear in mind - clever images won't work here, because we have a semi-fluid theme, and therefore the image moves in the container depending on the browser size.

 

Are we able to decide the max-width of the skin? Like for instance if I don't want it to go beyond 1000px in width?

Link to comment
Share on other sites

Looks nice but I think the menu icon on tablet and mobile should have better options when first clicked. For instance view new posts should definitely be accessible without having to go through another section, as view new content disappears from the main screen when on a tablet or mobile

 

Is it possible to add the link myself?

Link to comment
Share on other sites

Looks wonderful!

 

IP.C and forum views (other than submit) were conspicuously absent, but I'm guessing they will be delt with in separate entries.  IP.C I'm particularly keen to see, but I understand why the examples used were chosen. Can't WAIT to start digging into what we can do with it. :-)

 

James

Link to comment
Share on other sites

I've changed it to a three bar - if I remember correctly, FontAwesome didn't have a specific icon for nav to begin with, so I made do with the 'justify' icon. There's a nav icon available now, though.

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...