responsive design on a grid
- Started
- Last post
- 41 Responses
- fourth0
once again thanks guys... lately I've just been messing with blank boxes and creating my own fluid grid. I'm trying to learn the fundamentals. The frameworks are great but I'm really trying to learn exactly how they work...
- albums0
i don't know why you guys start by editing a theme...
create your markup as if you were coding a webpage then drop in the wordpress codex.
fuck starkers, skeleton, all of them. just code your own page and simply paste in the markup.
- I don't think this is about WordPress. Just using a starter HTML template.hereswhatidid
- i may have jumped the gun, i guess i'm just used to mg33 fighting with WPalbums
- fourth0
alright nocomply...
Yeah I've been reading some of Ethan's stuff. I'm going to try and just start out with the type and going from there. All the concepts seem pretty simple but I just keep staring at my layout wondering how I'm going to keep everything tight on the grid if it's "all moving around". If that makes sense.
- BabySnakes0
@mg33 and @nb
I have always thought that responsive design reinforces content and semantics. A huge win when getting consistent and streamlined information, no matter what device you view it on. Movement of columns really bother?
- mg330
^ Baby Snakes,
Are you referencing my comment about how a responsive site moves in a browser window? I can't tell if that's what you mean but if you do what I am getting at is this: I don't really like when a responsive site is sold as if changing a webpage width between a wide window width and a mobile size window width is a usable or benefiting feature of it. Most people don't use a computer based web browser that way.
I've seen someone show a responsive site in a meeting before with clients and excitedly say "look what you can do with this! " moving it all back-and-forth. It's important to know how all the pieces move and adapt to the window, but most people aren't going to see that happen visually unless they have some wild habits about how they resize browser windows.
- BabySnakes0
I agree about showing off browser re-size does nothing. Just people showing off buzzwords and poorly educating the client about its main purpose.
I believe the most important part of responsive design is to challenge the site's design to provide the user with consistent information but also adapting to where/how the user is interacting with it.
You can still have your rich desktop site, just make it play nice on my device when I am using one hand and on the toilet.
- sseo0
Download something like http://csswizardry.com/inuitcss/… or http://html5boilerplate.com/ or http://www.getskeleton.com/
Pick it apart or refer to it when you're not sure what the best practice is to do something.
Get inspiration from http://www.teixido.co/ or http://www.dolectures.com/ or http://trentwalton.com/
???
Profit
- zoozoo0
templates
- bulletfactory0
this may sound ridiculous, but...
do you have a design?
- nb0
@BabySnakes
It's not the movement of the columns, the idea of an adaptable layout is very enticing. You start out trying to get your site to look good on different screens, but your code ends up full of <div class="one-third column alpha"> and class="clearfix" and so on. This is the opposite of semantic! It feels so dirty!
- The importance is in the tag type more than the class name. To me anyways.BabySnakes
- When developing I see class="col-1-2" i know that is 50% width. haven't used clearfixes in over 3 years.BabySnakes
- fadein110
responsive design has created the next wave of sites all looking the same. I can see its benefits but sometimes I find a website looks better on tablets using the full view rather than the reduced one.
Focussing on how users interact with sites on mobile seems more important to me. Already getting v.bored of building sites with the stacked layouts at smaller sizes - often creates a poorer experience for mobile users.
- tymeframe0
I second the book in the note above. I just finished reading it. It really breaks the process down in a simplified form. Quick read too.
- nb0
I've noticed that most of the examples I see people using Skeleton or similar framework use a design where most things are centred. Logo, nav, overall page.
Centering works sometimes, but I can't seem to find good examples that follow the left-align grid format.
- doesnotexist0
you should start over with the site being responsive in mind
- Daithi0
For quick and easy implementation —
http://cssgrid.net/For a more complete setup —
http://foundation.zurb.com/
- sherm0
I found this site for inspiration
http://mediaqueri.es/I have another resource for a responsive grid system but you can google it and pick one or just go from scratch. It's not that hard.
- gramme0
I don't know if this helps, but here's what I do. I think of it like designing any other visual system with different-sized pieces that all need to relate. I also think about how each device is used in terms of touch or click and the space needed to account for those interactions, as well as reading distance.
I design 3–4 checkpoints or scaling moments, and focus on the things that will change once a screen hits each width checkpoint. E.g. for mobile, I'll have a 3 or 4 column grid, then 6 for tall tablet, 12 for 1024 on up. I look at worst-case scenarios in terms of line length for paragraphs. Columns scale however they need to (thank God for developers who can do that math for me), and lately I've been using three different measurements for gutters and margins, as the design goes from mobile to desktop.
I'm currently working on the responsive site for my new company. One thing we're carefully considering is the three reading distance ranges: desktop, knee, and 12"–18" from the eyes. This means the size of p- and h-tags change as the browser expands or collapses. For instance, desktop body copy might be 22px, tablet is 18, and mobile is 15.
I took me a while to get over my negative reaction to largish type on desktop sites (e.g. Medium – http://medium.com/). I finally realized it's just plain usable.
- nb0
Let's say I'm starting from scratch and would like everything left aligned to my grid. Any favourite examples out there? I notice some that have a few left-aligned elements, but overall the vast majority feature what one might describe as a "centred" design.
- 3030
I started using this one (16 cols) -
http://www.getskeleton.com/Works really well.
- doesnotexist0
might be some in here: