• 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)

Andy.N

Well-known member
#2
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
 

Shelley

Well-known member
#3
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)
 

Forsaken

Well-known member
#4
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).
 

Arty

Well-known member
#6
Thank you!

Can you share the CSS you use for the quote element. It has some shadow which makes it pop out a bit
Its a simple background image after quote block's container.

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.
Good point. I've put it back, but as overlay, not below content.
 

Forsaken

Well-known member
#7
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.
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.
 

Dynamic

Well-known member
#8
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.
 

intradox

Well-known member
#13
What makes this a responsive design? What does it take to make my fixed width flexile style responsive?
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.

Edit:
It uses CSS3 media queries I believe.

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

Andy.N

Well-known member
#14
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?
 

intradox

Well-known member
#15
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?
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:
Code:
#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/
 

Rigel Kentaurus

Well-known member
#17
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/
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.
 

Arty

Well-known member
#20
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.
Good point. Thanks! I'll redo some parts.
Awesome man! I wonder whether this will work with the sidebar I've on all the pages with 'widget-framework'. :)
If it uses same layout structure as forum index, it will work.

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