All of the 960 gridwork themes should be good on all screens. The rest of the themes like responsive are set up for mobile as well and you can always check the preview first to get an idea of the differences. You can set specifics on looks by getting into the viewport metatags and tweaking it to exactly what you need for your content. Responsive themes will behave a little different and for the most part work very decently in mobile but again this is something you can set in the viewport metatag if you need some display changes.

Could you please write a few sentences, or elaborately, about exactly what, where, and how to tweak a theme to make the website pages beautifully responsive for all screen sizes? I need a tutorial. Is adjusting a Concrete5 theme, to make the website pages beautifully responsive to all screen sizes, as easy as just adding a one-line metatag about viewport? This information will help me tremendously.

Sure no problem. The metatag for viewport should be in your themes header.php found in the elements folder and looks like

<meta name="viewport" content="initial-scale=1,:">

There are a ton of things you can place in here like

<meta name="viewport" content="width=1140px; initial-scale=.45;width=device-width; user-scalable=1;" />

The above is for a responsive theme in 1140 so I have set it so that my content in mobile or tablet displays at 1140 scale so that a responsive mobile look doesnt affect my layout. Initial Scale is how large it comes in as, and I have it at .45 to ensure that it fits on older blackberrys. Width device width forces it to conform to the device its shown in and stuff like turning the phone sideways for full width will auto size the site to this view instead of staying at the scale it was upright. User scalable=1 is setting it so that user sclable is enabled on all devices.

There are a ton of these some more obscure than others but you can find a good place to start here http://learnthemobileweb.com/blog/2009/07/mobile-meta-tags/...

There are also device specific meta commands like

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-touch-fullscreen" content="yes">

These ensure apple capable, change the scrollbars to black, and enable touch swipe. The list goes on and on with these as well but again they are a bit obscure.

Playing with this should only really be done after reading a bit so google metatag viewport like crazy before starting.

If I knew which theme you were in I may be able to help you out by finding what works for your theme and sending it over. However it has more to do with how you want your content displayed and depending on how you have your stuff layed out changes what you will want in viewport.

As for laptops they are a different ball game and all sorts if factors come into play. Your content can have a large affect on how your site looks in laptops. Restraints on heights and width are placed on laptops and its not the same as viewports. To check more on this google "why my site looks bad on laptop"

A nice tool to help in getting it right is

http://quirktools.com/screenfly/...

Does someone know some quick, easy code to copy/paste to make all Concrete5 themes responsive to all screen sizes?

Or, could each Concrete5 theme developer make their theme responsive, or give clear instructions on how to tweak their theme to make it responsive?

Request: All DEFAULT Concrete5 themes be updated to be responsive to all screen sizes. (They were not, last time I used them.)

The 9000 devices out there make that a pretty large order, and differences between a tablet to a laptop to a tiny blackberry from 2005 are pretty vast. All the themes I have used function extremelly well and I have only had to change one theme ever, and was because I made a selection system with tabs and layout that wouldn't display properly in mobiles. As much as it would be nice to have a universal setting for awesome, I dont think thats something that will be happening for awhile or until hardware developers standarize a bit more.

If you take a look at some sites in screenfly you will see that no site does what you want.

Like I said pm me what theme your in, and I can probably help you nail it.

"Does someone know some quick, easy code to copy/paste to make all Concrete5 themes responsive to all screen sizes?"

As Ekko has said, unfortunately this is not going to be as simple as pasting in a few lines of code, a lot of responsive themes use media queries, which basically allow you to write individual CSS for respective screen resolutions, this requires a decent amount of testing, and re-writing of certain element, navigation for example needs extra consideration and often extensive alterations, then throw into the mix, portrait and landscape modes at different resolutions and it becomes a pretty complex job if your aiming to do it well.

At this moment in time there is no silver bullet for responsive design, and as more and more companies join the mobile revolution its probably not going to get easier any time soon.

I do second your request for a responsive filter in the theme search, good call.

The last half a dozen concrete5 sites I've built recently have been responsive and mobile compatible. We've even gone live with a full concrete5 ecommerce site that is responsive down to mobiles (including the cart and checkout process). As a business we've been focusing very heavily on making sure we can create concrete5 sites that are 'mobile ready', as that's where it's all heading.

It's been a very steep learning curve, but here are some of the things we've learnt and some general thoughts about the process:

- It's either about taking an existing theme that is responsive or creating one from scratch, not really taking something that isn't responsive and bolting on mobile compatibility.
- It's as much about your content (your divs, classes, etc) as it is your CSS. Poorly constructed sites will require large amounts of overriding code, or potentially be impossible to make responsive.
- The order of content on your page becomes incredibly important. So when your actually designing a site you really need to keep this in mind.
- Responsive CSS frameworks are your biggest help here. I've taken an open source one (Skeleton, plus html5boilerplate) and turned it into a starting point for all our projects, adding in concrete5 specific stuff to handle things like layouts and images.
- If you're creating a responsive site, you might as well do the site in html5. Html5boilerplate has some mobile specific features in it (as well as some handy tricks for IE debugging).
- Designs are much easier to implement if they consider in the first place the framework they'll be built in - i.e., the design uses a grid system and the designer doesn't go too crazy with ideas.
- I personally don't think fluid responsive designs are realistic, rather it's about targeting the following break points: Desktop (940/960px and perhaps a size larger), iPad portrait, iPhone Landscape and iPhone Portrait.
- Menus are a massive challenge. I've spent the last month or so working on a css/jquery menu solution that takes an existing autonav and turns it into one of those nice drop downs from the top of the mobile screen. This is the only nice way I've found to handle multiple level menus.
- I've had to write a lot of jQuery code to get menus, lightboxes and photo galleries working correctly across devices. iOS isn't too bad, but Android has some pretty funny quirks. I'm not able to test on other devices like Blackberrys, so I'm trying to write things as 'standard' as possible.
- It's important to have some tricks up your sleeve to target different devices. It's a combo of javascript platform detection and CSS resolutions breakpoints.
- Some things like youtube videos are tricky to resize - for things like this there are jQuery libraries available.
- We've found that concrete5 isn't bad when it comes to the content it generates for responsive sites, great even, but I'm pretty sure the default themes would be hard work to make responsive, you'd need to roll your own.
- Many add-ons aren't designed to be responsive. The ecommerce add-on wasn't too bad to make responsive, but that's very much because concrete5 allows you to easy override block templates, single pages and elements. Still a huge amount of work though.

So my point of this rambly list is really to point out that there is a lot more to responsive web sites than just some overriding CSS.

Hi EmeraldOffice

Looks like Julia from core team has seen this thread, she has added the category, so you should be able to filter via "Responsive" very soon.