Jump to content

Responsive design changes planned for v3.5?

Featured Replies

Posted

Among the changes for v3.5 is a responsive design planned? I've been using it with Wordpress and I'm a huge fan. Much more graceful than a mobile skin. However, to make menus degrade, images and video resize, etc requires a fair amount of javascript. It would also be best supported out-of-the box rather than trying to customize it through a skin. The vB5 beta shows they are moving to a responsive design by default:

%7Boption%7D

From what I've seen in the vB5 demo, IP.B is like lightspeed.

Considering the move to mobile apps, it seems unlikely. It would also throw a nice wrench into normal skin development, having to develop for and maintain numerous views of every given page across all devices.

Along these same lines, I'd suggest IPS pursue doing a web app for IPB (using an SDK like HP's Enyo).

This would involve exposing all user features of IPB via an AJAX interface (something IPS would need to code) and the web app being written in Javascript (something that third-parties could implement if IPB supported a well defined AJAX interface). Such a web app would be able to dynamically adjust to best fit the user's device (mobile, touch, or desktop).

  • Author

No offense please, but I don't think anyone who's replied here knows what responsive design is. The beauty of it is that you don't have to maintain multiple pages across all devices. It degrades gracefully to the viewport. One site for every screen. It would replace the mobile skin, it would not replace native apps. It works on a widescreen desktop, it works on a tablet in landscape and portrait, and it works on a smart phone in landscape and portrait. The best way to illustrate is to view a responsive site on multiple devices. The easiest way is to visit a responsive device in your browser, grab a corner and resize to a small window. Watch how the site adjusts. Most sites use flexible grids. There are plenty of CSS frameworks available.

Responsive sites:
http://css-tricks.com/forums/
http://themeid.com/demo/responsive/
http://www.bostonglobe.com/
http://starbucks.com/
http://www.vbulletin.com/vb5demo/

Finally, it doesn't replace native apps. Native apps will almost always offer a better experience. But, how many people are going to download an app to visit your forum for the first time? Offer them an optimal experience on every device, and let your readers decide how to access it.


Along these same lines, I'd suggest IPS pursue doing a web app for IPB (using an SDK like HP's

Enyo

).



This would involve exposing all user features of IPB via an AJAX interface (something IPS would need to code) and the web app being written in Javascript (something that third-parties could implement if IPB supported a well defined AJAX interface). Such a web app would be able to dynamically adjust to best fit the user's device (mobile, touch, or desktop).




No offence to you, but having seen vB 5 where they've actually gone and done this, I am very happy that IPS is ignoring you. This is an absolutely terrible idea that will make life harder for skinners and modders, and make the software slower for everyone.


No offense please, but I don't think anyone who's replied here knows what responsive design is. The beauty of it is that you don't have to maintain multiple pages across all devices. It degrades gracefully to the viewport. One site for every screen. It would replace the mobile skin, it would not replace native apps. It works on a widescreen desktop, it works on a tablet in landscape and portrait, and it works on a smart phone in landscape and portrait. The best way to illustrate is to view a responsive site on multiple devices. The easiest way is to visit a responsive device in your browser, grab a corner and resize to a small window. Watch how the site adjusts. Most sites use flexible grids. There are plenty of CSS frameworks available.




I do like this idea. The default skin is quite nice and it would be good to use it on all devices.

Responsive .ipsLayout, bit of the primary nav sorted... I couldn't see this being too difficult on IPB 3.3 now TBH.

  • Author

Then I look forward to your offering sir. The devil is in the details.


No offense please, but I don't think anyone who's replied here knows what responsive design is. The beauty of it is that you don't have to maintain multiple pages across all devices. It degrades gracefully to the viewport. One site for every screen. It would replace the mobile skin, it would not replace native apps. It works on a widescreen desktop, it works on a tablet in landscape and portrait, and it works on a smart phone in landscape and portrait. The best way to illustrate is to view a responsive site on multiple devices. The easiest way is to visit a responsive device in your browser, grab a corner and resize to a small window. Watch how the site adjusts. Most sites use flexible grids. There are plenty of CSS frameworks available.



I understand exactly what it is. Even if there's only one copy of the page, you still end up doing twice as much work to actually make the different 'gracefully-degrading views' happen. It's no better than having multiple device-specific skins. What's worse, you would have to test any major skin changes in every view and on every anticipated device to ensure they don't cause unexpected issues.

Don't get me wrong, it's a great concept, but it's hard. I don't think IPS wants to make the entry bar to skinning any higher than it already is.
  • Author

It's not that hard when the framework is established. While I haven't seen their skinning system, vBulletin has obviously chosen to take the responsive design leap of faith in their users. While I don't buy into the whole PostPC era hype, there is no doubt that mobile users are growing like wildfire. Responsive design is the best way to support the consistent/immersible experience of desktop, tablets, and mobile.


Among the changes for v3.5 is a

responsive design

planned? I've been using it with Wordpress and I'm a huge fan. Much more graceful than a mobile skin. However, to make menus degrade, images and video resize, etc requires a fair amount of javascript. It would also be best supported out-of-the box rather than trying to customize it through a skin. The vB5 beta shows they are moving to a responsive design by default:



[img]

[/img]



thanks for this nice discussion ,
when we speak about responsive we are indeed speaking about five different layouts :
1- more than 960px
2-tablets Between 768px -- 959px
3- devices 481px --767px
4-mobile landscape 480px -- 767px
5- Mobile Portrait: less 479px

these layouts can be done using @media tag .
this should be easy but it will take long time to do this , so I think IPS maybe prefer mobile skins for small devices
for me : it is something really I like and thinking in doing it , but this need full time skinner with a lot of coca cola .

Best regards
  • Author

I already had the responsive design discussion with a skinner, While they said it was possible, it would take a lot of time. They said it would be much easier if IPB supported, which I understand. I think it would be a much better experience for all IPB users. It's an appropriate time to start a discussion for the next version (3.5 or 4.0).

Personally (speaking for myself not IPS) - responsive design is something I'm very keen on. It's very much different (and better) than device-specific skins.

It's not "difficult" at all, really, but feasibility does not not always correlate with difficulty.

Actually, for app developers it's easier than device-specific skins as once you have the CSS framework, you don't need to code a new page twice.

I'm a big fan of responsive web design as well. I actually spent 15-20 minutes a couple of weeks back playing with the board index to see if I could make it responsive.

%7Boption%7D

(the navigation drops out when clicked)

With only a couple of lines of CSS & JS I managed that. Obviously, it's only scratching the surface. Creating a responsive theme that covers the entire platform would be a huge task.


I'm a big fan of responsive web design as well. I actually spent 15-20 minutes a couple of weeks back playing with the board index to see if I could make it responsive.



[img]

[/img]



(the navigation drops out when clicked)






Would love to see you extend upon this and possibly incorporate it within your themes :)

It's not that hard when the framework is established. While I haven't seen their skinning system, vBulletin has obviously chosen to take the responsive design leap of faith in their users. While I don't buy into the whole PostPC era hype, there is no doubt that mobile users are growing like wildfire. Responsive design is the best way to support the consistent/immersible experience of desktop, tablets, and mobile.


Actually Vb's mobile versions are addon products.

Finally, it doesn't replace native apps. Native apps will almost always offer a better experience. But, how many people are going to download an app to visit your forum for the first time? Offer them an optimal experience on every device, and let your readers decide how to access it.



I don't know what "responsive design" is, but, for the record, I was suggesting that IPB support a web app, not "native apps". The difference is that the web app is written in Javascript and the whole site is done in a single web page (with the web app using AJAX to get page specific data and then using Javascript to update the UI). A web app should be portable to all devices supporting a modern web browser and "adapt" to the requirements of the device (e.g., small screen, touch interface, desktop screen w/mouse, etc.).

Maybe "responsive design" is similar to "web apps"? Maybe "responsive design" is a hybrid approach?

Regardless, my preference would be for a "web app" where IPB serves no HTML, but provides an AJAX API that returns data to be processed/displayed by the "web app"s JS.

I don't know what "responsive design" is, but, for the record, I was suggesting that IPB support a web app, not "native apps". The difference is that the web app is written in Javascript and the whole site is done in a single web page (with the web app using AJAX to get page specific data and then using Javascript to update the UI). A web app should be portable to all devices supporting a modern web browser and "adapt" to the requirements of the device (e.g., small screen, touch interface, desktop screen w/mouse, etc.).



Maybe "responsive design" is similar to "web apps"? Maybe "responsive design" is a hybrid approach?



Regardless, my preference would be for a "web app" where IPB serves no HTML, but provides an AJAX API that returns data to be processed/displayed by the "web app"s JS.




Responsive design is not a hybrid, nor is it similar to web apps. It makes it so that no matter what you view the site on, it still looks very similar, or even the same. So you get the same full fidelity experience on a 4" phone screen as on a 7" tablet as on a 24" monitor as on a 52" TV. No seperate skins or anything, it just works. Tom showed an example of it in practice (awesome work Tom! You should go bug Rikki sometime).

Now, your idea... I'm afraid that your idea is not good. It would make it harder for modders, skinners, administrators and visitors alike. Total-AJAX web sites are generally regarded as slow and unfriendly (case in point, Facebook. How often have you see "Oops, there's been an error!" on it?) and they require an HTML fallback for non-JS browsers to use basic functionality anyway, which defeats the entire purpose - may as well just use HTML+CSS for the default view... oh wait. I'm sorry, but the day they implement this idea I'd change software and I know that I am not in the minority on this.
  • Author

Would love to see you extend upon this and possibly incorporate it within your themes :smile:



As I would like to see Invision incorporate it in your default themes. ;)

Hello Rikki?...

I'll have to review vB5, but based on KT Walrus' comments I think I'm mistaken. They are probably using his approach rather then the CSS framework design, and it's killing performance (among other things).

P.S. I'm also a fan of Tom's work.

I'll have to review vB5, but based on KT Walrus' comments I think I'm mistaken. They are probably using his approach rather then the CSS framework design, and it's killing performance (among other things).




I would imagine it's something much lower level causing performance to be that dreadful.

Remember the early vBulletin 4.x versions which had query counts in the hundreds? Those people aren't exactly known for making efficient software.

I'll have to review vB5, but based on KT Walrus' comments I think I'm mistaken. They are probably using his approach rather then the CSS framework design, and it's killing performance (among other things).




as marcher said , it is depend on ips-layout , only need some extra small size css file . so this will not effect the performance at all
here is an example from my dev board

best regards

as marcher said , it is depend on ips-layout , only need some extra small size css file . so this will not effect the performance at all


here is an example from my dev board


Ajouz, is that a new skin you are developing? If so, when do you think it will be complete?

Thanks

Ajouz, is that a new skin you are developing? If so, when do you think it will be complete?



Thanks



I just post it as example , no plan to do complete responsive skin at this time , these edits based on my old skin
http://community.invisionpower.com/files/file/4730-qa-minimal-skin-free/
if you interest in this minimal edits , I can send you a copy of it .
Best regards

Archived

This topic is now archived and is closed to further replies.

Recently Browsing 0

  • No registered users viewing this page.