0

After checking a few dozen articles I am still in the dark how to actually implement a responsive ux-design (I really understood the layout part). A simple example: Bootstrap (CSS framework) collapses toolbar buttons into one drop-down button on mobiles. That's all I need! I'd like to understand just the basics of this very behavior. Does it requires only CSS, or do I need JavaScript too? I actually don't know any other way than JavaScript.

In my apps (IDEs), I usually have lots of toolbar buttons and at a certain breakpoint or width I guess I will have to put them just into a dropdown button, in one way or another, right? The obvious things such as re-arranging layout containers per break-point/width are a piece of cake with CSS; at least this is how it looks.

Update, I am working only with JS based widgets. Mostly generating all HTML.

xamiro
  • 1,391
  • 1
  • 16
  • 32
  • possible duplicate of [Responsive Web Design Tips, Best Practices and Dynamic Image Scaling Techniques](http://stackoverflow.com/questions/8429058/responsive-web-design-tips-best-practices-and-dynamic-image-scaling-techniques) – TaoPR Jun 05 '15 at 02:14
  • You're looking for media queries. – SLaks Jun 05 '15 at 02:15
  • @TAOP not really, exactly this I can get from any blog. Doesn't tell what I have to do re-arrange or transform widgets; but thanks for the hint! – xamiro Jun 05 '15 at 02:16
  • @SLAks: media-queries don't build a drop-down button out of a multiple toobar buttons (or other drop-downs). – xamiro Jun 05 '15 at 02:17

3 Answers3

1

You can make multiple (for different screen sizes) menus, dropdowns or navbars etc. And then use media queries to just display one of them at a specific screen width ( ie display: none for others). And I think Bootstrap works similarly (It might also use JS).

In this way your design will become responsive, although it will increase file size.

Mustaghees
  • 506
  • 6
  • 16
0

Check GRID. It's a (great) simple guide to responsive design.

http://adamkaplan.me/grid/

nunoarruda
  • 2,679
  • 5
  • 26
  • 50
  • thanks, I got the layout part but I still don't know how to manage my widgets ,ie: collapsing them into something smaller. – xamiro Jun 05 '15 at 02:20
  • @mc007 check CSS media queries. You can use them to change the width of your widgets according to, for example, screen size. https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries – nunoarruda Jun 05 '15 at 02:27
  • thanks, my widgets are all already reduced to a minimum (32 or 16 font-icon); i can't make them smaller :-) – xamiro Jun 05 '15 at 02:29
0

After doing lots of research and development; there is basically nothing standard out there for a JS based solution. I checked Dojo, Sencha and some others paid stuff. At the end I did end up with custom JS code. Media queries did only help to some degree, actually just when it comes to moving and sizing layout containers and pictures; but that's pretty much it. Its even better to do it in JS only since calculations become far more accurate and interfere less with your Code.

So to me 'responsive design' has actually no mean at all; its great for regular web-sites but really not for complex ux.

back to square one, g

xamiro
  • 1,391
  • 1
  • 16
  • 32