1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Responsive layout (work in progress)

Discussion in 'Forum Showcase and Critiques' started by Arty, Aug 5, 2012.

  1. Arty

    Arty Well-Known Member

    I'd like to hear opinions on my new design.

    This design features responsive layout, which means it works on desktop and mobile browsers. If you don't have a mobile browser, you can just change your desktop browser's width to see how it looks like on mobile devices.

    Its work in progress and it requires authentication.

    Login: test
    Password: test

    URL: http://preview.artodia.com/
  2. Andy.N

    Andy.N Well-Known Member

    Simple and clean. I like it very much.
    Can you share the CSS you use for the quote element. It has some shadow which makes it pop out a bit
  3. Shelley

    Shelley Well-Known Member

    Nice clean layout. liking the shadows you created (I did the same for the nature call style) a while back. More so that you put them all into a spritesheet so big thumbsup for that (I got lazy and couldn't be bothered) :p

    Overall it's shaping up nicely, excellent job. (y)
  4. Forsaken

    Forsaken Well-Known Member

    Rather than getting rid of the sidebar all together, I'd have moved it down to the bottom, as it does provide useful information that should be available at a glance.

    Also you might want to consider using a toggle style of responsive navigation (http://bradfrostweb.com/blog/web/responsive-nav-patterns/#toggle). It would allow you to implement the dropdown links in a cleaner interface and rid the design of the dropdowns all together (Other than the toggle).
  5. MOZ

    MOZ Well-Known Member

    Love the soft look
  6. Arty

    Arty Well-Known Member

    Thank you!

    Its a simple background image after quote block's container.

    Good point. I've put it back, but as overlay, not below content.
  7. Forsaken

    Forsaken Well-Known Member

    That would work as well, was just thinking that a What's Going On block would be familiar to most and would provide the information well for a responsive design.
  8. Dynamic

    Dynamic Well-Known Member

    That is awesome! I am looking for something like this too dude. Is there any chance you will release this to the community? I too would like to modify my layout to be responsive.
  9. Arty

    Arty Well-Known Member

    Yes, it will be released when my new website is ready
  10. Dynamic

    Dynamic Well-Known Member

    Dude, you seriously are a life saver. I owe you a beer.
  11. Sheldon

    Sheldon Well-Known Member

    I cannot wait to grab this. I keep looking each day to see if it has been added... :)
  12. Andy.N

    Andy.N Well-Known Member

    What makes this a responsive design? What does it take to make my fixed width flexile style responsive?
  13. intradox

    intradox Well-Known Member

    Responsive design is the new take on making mobile friendly desktop sites. Back when the iphone came out, there was a movement to have both mobile versions and the regular version. This includes the latest modern computing platform, the tablet.

    Now responsive design has become more popular (microsoft is even making their new site responsive) where the width of the browser dictates certain elements. Xenforo should have this in the core if they are pursuing the mobile version of the forum for 1.2

    My browser at almost full width: http://i.imgur.com/emsoQ.png
    Browser at a thinner, more mobile width: http://i.imgur.com/TezpO.png

    It is fluid but more importantly, responsive. I'm not a web expert so I may be wrong but I'm fairly sure what I explained is pretty accurate.

    It uses CSS3 media queries I believe.

    Edit #2:
    Gallery of responsive design: http://mediaqueri.es/
  14. Andy.N

    Andy.N Well-Known Member

    Can a fixed width style be responsive such as when it's viewed on a big screen computer, it's fixed width, not fluid and then scale down when on mobile phones?
  15. intradox

    intradox Well-Known Member

    I don't think so. That would probably simply be considered a mobile version and a regular desktop version.

    Example code of responsive design (media queries) from kyleschaeffer.com:
    #wrapper {
      width: 80%;
      margin: auto;
      max-width: 1200px;
      min-width: 800px;
    @media screen and (max-width: 800px) {
      #wrapper {
        width: 90%;
        min-width: 0;
    Checkout this article for more info: http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/

    edit: this article as well: http://www.alistapart.com/articles/responsive-web-design/
  16. MsJacquiiC

    MsJacquiiC Well-Known Member

    Really lovely design, Simple and clean.
    Nice work!

  17. Rigel Kentaurus

    Rigel Kentaurus Well-Known Member

    On the layout itself
    Nothing breath taking really. Lots of gray which make it sad. Nothing really stands out. Only thing I liked was the footer.
    You might want to use a different color for the posts, upon entering a thread everything is a big blob, the posts should stand out.

    On the responsiveness
    It is awesome, I was resizing my browser and the elements re-arranged and some of them hide. That is awesome.
  18. Gabby

    Gabby Well-Known Member

    I love it, especially the forum list.
  19. TheBigK

    TheBigK Well-Known Member

    Awesome man! I wonder whether this will work with the sidebar I've on all the pages with 'widget-framework'. :)
  20. Arty

    Arty Well-Known Member

    Good point. Thanks! I'll redo some parts.
    If it uses same layout structure as forum index, it will work.

    Yes, it can. In this style if you set fixed width to @pageWidth property, it will use that fixed width in normal desktop window, but will scale down if browser window becomes smaller than fixed width setting. I'll set fixed width when I'll update preview website with latest version to show it in action.

Share This Page