Converting sites to responsive - any tips?
Permalink 1 user found helpful
I have several sites that I want to add responsive code to. Are there any hints or tips? Any pitfalls?
I presume as well as the main stylesheet, I have to amend all the stylesheets for each block component?
Any chance of a new tutorial in the designer section for coping with responsive coding when 'concretizing' a theme?
I presume as well as the main stylesheet, I have to amend all the stylesheets for each block component?
Any chance of a new tutorial in the designer section for coping with responsive coding when 'concretizing' a theme?
To add to goldhat's fantastic response, there are also some responsive "framework" packages available in the marketplace ready for customization. Includinghttp://www.concrete5.org/marketplace/themes/flex1200/... which I've created a theme with that I use on a few different sites.
To add on top of both goldhat and enlil's responses, I offer several themes - all of which are responsive - for free in the marketplace!
Foundation:
http://www.concrete5.org/marketplace/themes/foundation...
FlexCRETE (based on Skeleton framework):
http://www.concrete5.org/marketplace/themes/flexcrete...
Plus there are many others you can find either on my profile, or in the marketplace.
Foundation:
http://www.concrete5.org/marketplace/themes/foundation...
FlexCRETE (based on Skeleton framework):
http://www.concrete5.org/marketplace/themes/flexcrete...
Plus there are many others you can find either on my profile, or in the marketplace.
Thanks for the freebies.
Thanks for your responses. Very helpful.
My biggest issue with frameworks is the very generic look to the design of sites:
Header
Menu
Banner
3/4 even columns breaking to 1 col
etc
My biggest issue with frameworks is the very generic look to the design of sites:
Header
Menu
Banner
3/4 even columns breaking to 1 col
etc
Now just using a Framework alone does not mean you will have a good responsive site. Frameworks are not magic, they just give you a responsive layout. You must still understand responsive design and apply responsive design principles, and test heavily in all screen sizes. Generally the approach of "mobile first" is exactly that, layout your design in 1 column or at most 2 columns and make sure it looks great at about 320px wide. Watch for any images that don't scale to that size. Watch for any elements that by design are too wide to scale nicely and look garbled at 320px.
Foundation provides a grid where options look like "large-4" and "small-12". So if I make the following divs it will use 4 columns out of 12 on a large screen, and all 12 on a small screen. So basically on larger screens in the example below it will be 3 columns beside each other. But on mobile each of those divs will be full width of the screen because of the "small-12" class.
Generally we never want more than 2 columns on a small mobile device unless we're layout out some small buttons but if you split 320px across 3 columns it's only 110 or pixels each. Very small. So normally I would mostly use "small-12" to make all my divs collapse into 1 column. But I could use the class "small-6" to say use half the available width.
Hope you find this helpful, also consider checking out YouTube for responsive design videos there are quite a few that show specific site examples and go quite deep into the topic.