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...
- ohhhhhsnap0
blowed.
http://froont.com/
- yurimon0
nice slide presentation
https://speakerdeck.com/nathansm…
becareful with frameworks for grid design. I focus on design around a grid usually as 16 columns in psd or illustrator etc. if you start with frameworks. its most likely lead to confusion.
- 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
- 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.
- doesnotexist0
might be some in here:
- mg330
Responsive sites just make sense to me for some reason. A big reason is that in my mind, designing for a responsive site means focusing on simplicity of the layout, treating each component like a module that needs to change shape and fit differently depending on the view. It lends to a more simple visual destiny where good typography and proportions can take the place of overblown imagery or complicated patterns that won't scale appropriately.
Don't approach it with overblown concern for how the page is going to work as you move the browser width back and forth trying to imagine how it will look on mobile and tablets and screens. Stick to the device sizes / media queries and work around that. It's fun to watch it scale from web size to mobile size, but people don't use a site like that; the computer screen is the only place where resizing the window happens. Make that responsive part work as needed, then think of the mobile, tablet versions as their own versions of that larger site. It makes if so much easier in your mind that way.
- cbass990
Here's a free class on Responsive Design -
http://gymnasium.aquent.com/cour…
- nb0
@mg33
I hear what you're saying, and I agree. However, I'd like to add that what you're saying is how I've felt about good semantic code for years. What I mean is: I think of semantic code as having the same benefits that you're talking about. It means focusing on simplicity of the layout and breaking the site down into modules and using proper proportions and all that sweet design stuff. Plus, it has the benefit of being readable, lightweight, and separating content from layout, therefore making it even more adaptable to future designs/technologies.
In my mind, good semantic code helped move us towards thinking about the information and not just the aesthetics. Responsive design (at the expense of semantics) moves us away from thinking about the content as the most important part of the site. I think both semantics and responsiveness are important, but currently we're sacrificing one to get the other and I'm not sure we're moving forward.
- nb0
^ Keep in mind that good design can ensure that even a non-fluid site looks good on mobile. To clarify, I'm not suggesting we don't need mediaqueries for image resolution. I'm saying that maybe we don't need fluid columns that stack on top of each other.
- e-wo0
This is my Skeleton replacement.
https://daneden.me/toast/
- 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
- 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.
- 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.
- nb0
^ Yeah. It's as though people non-adaptive websites look like shit or are unusable on mobile. They aren't They look fine, often better than the adaptive version.
- 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.