Symphony.

Hi All,

I am working on tweaking my redesigned site (www.shrimp.dj) to be more adaptive to different devices/screen resolutions.

I am facing an issue where my site looks "twisted" on lower-density monitors.

Have you dealt with that type of issue on your sites? If so, how do you resolve it?

I was doing some research and came across CSS3 media queries (through this article: http://alistapart.com/article/responsive-web-design) which appears to be a viable solution but wanted to get everyone's thoughts. Thanks!

Adam

I was doing some research and came across CSS3 media queries (through this article: http://alistapart.com/article/responsive-web-design) which appears to be a viable solution

@ashrimplin - that's exactly what you need to do. This is a responsive web design issue (not a Symphony related issue), and you need to utilize Responsive web design practices with CSS media queries like you listed above.

Thanks man!

@ashrimplin: here are some RWD articles I’ve collected over the years that you may find useful.

https://pinboard.in/u:briandrum/t:responsive

Brian, these are great. Thanks a lot!

Not to everyone's taste, but frameworks like Bootstrap and Foundation can take a lot of the hassle out of the process.

They can be heavy, but if you work in Less or Sass you can take what you want from them.

@Fish +1

They can be heavy, but if you work in Less or Sass you can take what you want from them.

To add, there is no need to know Less Sass, you can make a custom download of only what you need and use the markup and css styles as described in the framework's documentation.

Which one

The main difference between Bootstrap and Foundation I would say is, that Bootstrap has more build-in features (and can be therefore bigger) and supports IE8, while Foundation is more like a good foundation having number of features but does not support IE8 (maybe with some tweaks but that's where you will get dirty). With Bootstrap you will be less or not dirty at all.

Alternative

There are available many lighter CSS frameworks, just UI kits, or just Grids. Or go with the @media queries, js / css libs or custom ones.

I really like the lightweight and simplicity of purecss. No js included, but you are free to add any jquery plugging without the feeling of "having" to use a load of included js.