librelist archives

Responsive design (default theme)

From:

Graham Ashton

Date:

2013-03-04 @ 12:12

I've spent the morning re-writing the CSS for effectif.com (which has 
always been heavily based on Nesta's default theme), so that the 
design/layout adjusts responsively on handsets, tablets, small screens, 
etc.

http://effectif.com

Summary of changes:

- the layout adjusts to the screen size
- the site header is much smaller
- it uses a Google Webfont
- I dropped the vertical rhythm CSS; it added complexity for little benefit

I'm planning to copy all these changes over to Nesta's default theme, so 
all new/upgraded Nesta sites that use the default design work responsively
out of the box.

Any feedback or suggestions before I move it into Nesta?

I haven't done much browser testing yet, but it's working fine in WebKit 
and Firefox.

Cheers,
Graham

-- 
Graham Ashton
Founder, Agile Planner
https://www.agileplannerapp.com | @agileplanner | @grahamashton

Very glad to see that vertical rhythm thing gone.  It puts the whole 
stylesheet beyond my ability to parse.

Hopefully, your changes will work with my site customizations, since 
these are mostly outside the SASS files (by necessity!).

On 3/4/2013 4:12 AM, Graham Ashton wrote:
> I've spent the morning re-writing the CSS for effectif.com (which has 
always been heavily based on Nesta's default theme), so that the 
design/layout adjusts responsively on handsets, tablets, small screens, 
etc.
>
> http://effectif.com
>
> Summary of changes:
>
> - the layout adjusts to the screen size
> - the site header is much smaller
> - it uses a Google Webfont
> - I dropped the vertical rhythm CSS; it added complexity for little benefit
>
> I'm planning to copy all these changes over to Nesta's default theme, so
all new/upgraded Nesta sites that use the default design work responsively
out of the box.
>
> Any feedback or suggestions before I move it into Nesta?
>
> I haven't done much browser testing yet, but it's working fine in WebKit
and Firefox.
>
> Cheers,
> Graham
>

On 5 Mar 2013, at 00:06, Isaac Rabinovitch <isaac@picknit.com> wrote:

> Very glad to see that vertical rhythm thing gone.  It puts the whole 
> stylesheet beyond my ability to parse.

:-) Fair comment.

I considered using the Compass typography module instead (which is a bit 
less mental than my Sass mixin was), but then decided it would be better 
to keep the default setup nice and light.

> Hopefully, your changes will work with my site customizations, since 
> these are mostly outside the SASS files (by necessity!).

Most likely. The current theme lets you add custom CSS in a file called 
local.sass (or local.scss), which I'll probably keep when I update Nesta 
with this new design.

It only tries to serve the file if it exists, so don't feel you need to 
use it though. This code pulls it in:

https://github.com/gma/nesta/blob/master/views/layout.haml#L17
https://github.com/gma/nesta/blob/master/lib/nesta/helpers.rb#L54

-- 
Graham Ashton
Founder, Agile Planner
https://www.agileplannerapp.com | @agileplanner | @grahamashton

On 5 Mar 2013, at 07:48, James Abbott <abbottjam@gmail.com> wrote:

> Looks good to me - one technique that I've found useful is scaling the 
font size down a little bit for tablet and mobile sizes.

I'd tried it in the iPhone emulator, on my Galaxy Nexus phone, and an iPad
mini. I've just looked at it on a real iPhone and I agree a slightly 
smaller font and reduced leading wouldn't hurt.

On the Galaxy Nexus's larger screen the current typography works okay, I think.

Cheers to all for the feedback - I'll move it over to Nesta before too long.

Graham

Looks good to me - one technique that I've found useful is scaling the font
size down a little bit for tablet and mobile sizes. For example, I have
1.15em as font size for the desktop resolutions and 1.035em for the
max-width of 43.125em.

This isn't mandatory in my view, but something I've seen many responsive
sites do. Here's the basic idea:


http://www.stuffandnonsense.co.uk/blog/about/proportional_leading_with_css3_media_queries

If your media queries are em-based, this has the additional benefit of
giving you the ability to scale the entire layout down in a proportional
way, so the layout follows the font size:

https://github.com/jonikorpi/Frameless/blob/master/frameless.scss#L176

Cheers,
James


On Mon, Mar 4, 2013 at 1:12 PM, Graham Ashton <graham@effectif.com> wrote:

> I've spent the morning re-writing the CSS for effectif.com (which has
> always been heavily based on Nesta's default theme), so that the
> design/layout adjusts responsively on handsets, tablets, small screens, etc.
>
> http://effectif.com
>
> Summary of changes:
>
> - the layout adjusts to the screen size
> - the site header is much smaller
> - it uses a Google Webfont
> - I dropped the vertical rhythm CSS; it added complexity for little benefit
>
> I'm planning to copy all these changes over to Nesta's default theme, so
> all new/upgraded Nesta sites that use the default design work responsively
> out of the box.
>
> Any feedback or suggestions before I move it into Nesta?
>
> I haven't done much browser testing yet, but it's working fine in WebKit
> and Firefox.
>
> Cheers,
> Graham
>
> --
> Graham Ashton
> Founder, Agile Planner
> https://www.agileplannerapp.com | @agileplanner | @grahamashton
>
>

On 5 March 2013 07:48, James Abbott <abbottjam@gmail.com> wrote:
> If your media queries are em-based, this has the additional benefit of
> giving you the ability to scale the entire layout down in a proportional
> way,


An additional tip (again via Andy Clarke) is to use rems (relative
ems), and use a mixin to serve up pixels for those browsers that don't
support rems:

http://www.stuffandnonsense.co.uk/blog/about/less

and more about rems:

http://snook.ca/archives/html_and_css/font-size-with-rem

--
[~] Jake Rayson
[w] www.jrayson.co.uk
[e] subs@growdigital.org
[t] @growdigital