Maybe in our world there lives a happy little responsive Curve2 over there

Started by Antes, April 02, 2014, 03:47:58 PM

Previous topic - Next topic

Dragooon

Quotewell, ok, but I don't want a bootstrap thingie to be smacked into a theme - I want to learn what it does instead. But I'll check it out.
We're not using Bootstrap, but the fundamentals remain the same. All the things you're saying are already possible and being done

Bloc

After some searching it seems my best option is to use a script like device.js , then use that in combo with media queries. Theres no CSS-only detection of physical size yet, at least not fully supported.
Quote from: Dragooon on May 17, 2014, 07:59:09 AM
Quotewell, ok, but I don't want a bootstrap thingie to be smacked into a theme - I want to learn what it does instead. But I'll check it out.
We're not using Bootstrap, but the fundamentals remain the same. All the things you're saying are already possible and being done
I KNOW its been used partly in SMF, I have looked at the code many times. You'll have to excuse me for not trusting that everything SMF does is "correct". Every time I look at the size of default theme's stylesheet(2.0 or 2.1) I am reminded that some things you just have to work out for yourself.

Dragooon

QuoteAfter some searching it seems my best option is to use a script like device.js , then use that in combo with media queries. Theres no CSS-only detection of physical size yet, at least not fully supported.
Define fully supported? I'm fairly sure device-width works on all major platforms

Antes

I agree, we still have lot to do on Curve2 - even we can consider splitting the css into board.css / topic.css (but that's not relevant to this topic maybe we can discuss under new one).

But I think responsive styling will cover the all smartphones with 480p+

macjive01


Antes

Quote from: macjive01 on May 19, 2014, 11:10:51 AM
Please when is this going to be ready ?

This will be inside of SMF2.1, not as a separate pack/mod/theme.

radu81

Quote from: Antes on May 19, 2014, 11:30:34 AM
This will be inside of SMF2.1, not as a separate pack/mod/theme.

That's a great news and an important feature for SMF.  8) Thank you Antes!
sorry for my bad english

Akyhne

Quote from: Colby67 on May 16, 2014, 06:45:19 PM
Quote from: Alex@ on May 16, 2014, 05:47:13 PM
Trying to guess how people wants to experience a website this way, isn't one I like. And honestly, I don't see the point.
Tablets and phones are getting higher and higher resolutions, therefore responsive themes becomes less and less a great idea.

Maybe a few years back...!
I disagree. Viewing a desktop-made theme on 720x1280/1280x720 phone is still worse with things like dropdown, multicolumns/tables and small(ish) links. It just don't work on a 5 inches device compared to a (for example) 24 inches one. You need bigger hit areas for clumsy fingers, no hovering schemes to show a menu, less columns that don't look cramped and so on.

One can argue about how it should actually look designwise..but theres no doubt a separation must be made.
We actually don't disagree. You are exactly pointing out my concerns. You can buy 5" smartphones with high resolution, hence a responsive theme will never Work as intended on a phone like that. You really can't browse a forum in high res., without having to zoom in and out all the time. Therefore - to me - device detection is a much better solution than responsive themes.

Tekkla

Quote from: Alex@ on May 23, 2014, 12:43:30 AMTherefore - to me - device detection is a much better solution than responsive themes.

RWD is not only making content sizeable and floatable in relation of the users device. It's about rethinking how to display the content. Best solution seems to me the mobile first approach. Following this, you do not need a special device detection.

For me, most important on RWD was to realize what's necessary and what's not. Do I need this button, link, information or is it crap? And what is important for me, the customer, the user and what is not? Do I really need to offer a total different user experience on different devices and screens?

And finally RWD is about realizing that the same content can be represented in different ways on different devices. No more one monolithic photoshop design converted to html and css.

I think this responsive Curve theme is a good start. Better is always possible, so let's wait and see what @Antes is planning for the future.

Dragooon

Quote from: Alex@ on May 23, 2014, 12:43:30 AM
Quote from: Colby67 on May 16, 2014, 06:45:19 PM
Quote from: Alex@ on May 16, 2014, 05:47:13 PM
Trying to guess how people wants to experience a website this way, isn't one I like. And honestly, I don't see the point.
Tablets and phones are getting higher and higher resolutions, therefore responsive themes becomes less and less a great idea.

Maybe a few years back...!
I disagree. Viewing a desktop-made theme on 720x1280/1280x720 phone is still worse with things like dropdown, multicolumns/tables and small(ish) links. It just don't work on a 5 inches device compared to a (for example) 24 inches one. You need bigger hit areas for clumsy fingers, no hovering schemes to show a menu, less columns that don't look cramped and so on.

One can argue about how it should actually look designwise..but theres no doubt a separation must be made.
We actually don't disagree. You are exactly pointing out my concerns. You can buy 5" smartphones with high resolution, hence a responsive theme will never Work as intended on a phone like that. You really can't browse a forum in high res., without having to zoom in and out all the time. Therefore - to me - device detection is a much better solution than responsive themes.
Please go read on how responsive theme and resolution detection actually works and CSS3 features such as device-width and pixel-ratio. Device's physical resolution and pixel density does not make a difference. A properly coded responsive theme will look the same on a high-res 5" and a low-res 5".

Tekkla

Quote from: Dragooon on May 23, 2014, 05:49:43 AM
Please go read on how responsive theme and resolution detection actually works and CSS3 features such as device-width and pixel-ratio. Device's physical resolution and pixel density does not make a difference. A properly coded responsive theme will look the same on a high-res 5" and a low-res 5".

In addition to this http://stackoverflow.com/questions/8785643/what-exactly-is-device-pixel-ratio

Scripty

To have less working on SMF and making it more responsive, we could use bootstrap.
It saves a lot of time aswell as work.

Arantor


Bloc

Quote from: Alex@ on May 23, 2014, 12:43:30 AM
Quote from: Colby67 on May 16, 2014, 06:45:19 PM
Quote from: Alex@ on May 16, 2014, 05:47:13 PM
Trying to guess how people wants to experience a website this way, isn't one I like. And honestly, I don't see the point.
Tablets and phones are getting higher and higher resolutions, therefore responsive themes becomes less and less a great idea.

Maybe a few years back...!
I disagree. Viewing a desktop-made theme on 720x1280/1280x720 phone is still worse with things like dropdown, multicolumns/tables and small(ish) links. It just don't work on a 5 inches device compared to a (for example) 24 inches one. You need bigger hit areas for clumsy fingers, no hovering schemes to show a menu, less columns that don't look cramped and so on.

One can argue about how it should actually look designwise..but theres no doubt a separation must be made.
We actually don't disagree. You are exactly pointing out my concerns. You can buy 5" smartphones with high resolution, hence a responsive theme will never Work as intended on a phone like that. You really can't browse a forum in high res., without having to zoom in and out all the time. Therefore - to me - device detection is a much better solution than responsive themes.

Well, as already pointed out a highres 5" and lowres 5" should look just the same(because the physical size is the same, though the quality will be different - better for high-res of course) - but in order to accomplish that you have to stop the stylesheet for switching to 20" optimised styles even if the resolution is the same as the 20" screen.

Ergo: responsive design works just fine, but it only makes sense to marry it with device detection. I don't know about you guys, but I rather NOT prefer mobile-first designs because it severely hinders the design possibilites on desktop screens. Not using all that wonderful screen estate just because it should also work on a smartphone is crazy.

On the other hand: yes, its def. needed to re-think and simplify the smartphone layout/styles - but desktops should not suffer because of it.

live627

QuoteI don't know about you guys, but I rather NOT prefer mobile-first designs because it severely hinders the design possibilites on desktop screens. Not using all that wonderful screen estate just because it should also work on a smartphone is crazy.
qft

Dragooon

QuoteWell, as already pointed out a highres 5" and lowres 5" should look just the same(because the physical size is the same, though the quality will be different - better for high-res of course) - but in order to accomplish that you have to stop the stylesheet for switching to 20" optimised styles even if the resolution is the same as the 20" screen.
Please please actually try a responsive design and read up on them before throwing your claims that the responsive design will switch to the 20" optimised style even if the device is 5". That's complete and utter nonsense, you can very well make the 5" high res device return the value as if it's a low res standard 5" device which is actually the backbone of proper responsive design.

Also, there's a difference between mobile-first and responsive designs. I don't know anyone said anything about mobile-first designs here. SMF 2.1 is not having the mobile design first and then being blown up to support desktops, it's the other way around


Dragooon

Quote from: live627 on May 23, 2014, 02:40:05 PM
Someone mentioned bootstap
Bootstrap itself is mobile-first but you can still create desktop-first interfaces with it, and we're not going to use Bootstrap, that'll be a lot of work on an already delayed 2.1

Akyhne

Quote from: Colby67 on May 23, 2014, 01:49:51 PMErgo: responsive design works just fine, but it only makes sense to marry it with device detection. I don't know about you guys, but I rather NOT prefer mobile-first designs because it severely hinders the design possibilites on desktop screens. Not using all that wonderful screen estate just because it should also work on a smartphone is crazy.

On the other hand: yes, its def. needed to re-think and simplify the smartphone layout/styles - but desktops should not suffer because of it.
Exactly my point!

Quote from: Dragooon on May 23, 2014, 02:04:26 PM
QuoteWell, as already pointed out a highres 5" and lowres 5" should look just the same(because the physical size is the same, though the quality will be different - better for high-res of course) - but in order to accomplish that you have to stop the stylesheet for switching to 20" optimised styles even if the resolution is the same as the 20" screen.
Please please actually try a responsive design and read up on them before throwing your claims that the responsive design will switch to the 20" optimised style even if the device is 5". That's complete and utter nonsense, you can very well make the 5" high res device return the value as if it's a low res standard 5" device which is actually the backbone of proper responsive design.

Also, there's a difference between mobile-first and responsive designs. I don't know anyone said anything about mobile-first designs here. SMF 2.1 is not having the mobile design first and then being blown up to support desktops, it's the other way around
So You want to limit how a theme will Work on a 27" screen, just to make it Work the same way on a 5"?!

Arantor

Has anyone here other than me actually attempted to integrate Bootstrap into 2.1's theme? Slapping Bootstrap in doesn't magically make it responsive. You still have to rewrite the theme to play with Bootstrap in the first place.

Advertisement: