Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS RWD: Fluid, Flex or Mobile or a combination? So confused ….

  • This topic is empty.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #44761
    justaguy
    Participant

    Trying to wrap my poor mind around what to do and where to start ………..

    Basically, in a nutshell, my fixed width (rather simple) designs work well in both desktop and tablet mediums as I remain in a 960px fixed-width framework. I want to address those projects most suitable for having a “mobile” counterpart. In my thinking not all business would necessarily benefit from having a device-specific size, say perhaps my own web design site, more often than not I would imagine those looking for my services would be searching for and consuming content on a tablet or desktop screen. Whereas another client, an ISP provider, would definitely find a “mobile” site rewarding.

    Saying that, I want to start making a move in the direction of either responsive design overall for all screen sizes, or designing and implementing a mobile specific site. After spending a considerable amount of time researching, I grow more frustrated by the day. The alternatives I’m seeing magnify my confusion: adaptive design (fluid grid layouts, flexbox/”flex,”) or specific media queries to address specific device screen/viewport sizes. I am of the opinion, at this moment in time until I am educated further, that “fluid” would be simpler – addressing everything (?) in one fail swoop. I may be on the wrong track altogether here as I am not that familiar with breakpoints and how that would influence my decision making going forward.

    On the other hand, I’m thinking that for the amount of time and effort, would I be better off just designing a “mobile-friendly” counterpart to an existing fixed-width site? By this I mean, determining the lowest common denominator and going with a screen/viewport width framework to address the “majority” of smartphones. Naturally this would require the use of media queries and a subdomain (?) for content and styles. No?

    As you can see, I will require future support via the forums, or quite possibly a comprehensive “re-education.” Any pointers would be greatly appreciated. I’m a big boy, I can take blunt (positive) criticism. I have a rather sizable resource of pdfs on the subject, but need a hand getting focused on viable solutions before reading/studying hundreds and hundreds of pages of material.

    BTW Chris, GREAT SITE!!!!!! I am a frequent lurker: reading posts and the forums, watching videos both on this site as well as many others. Keep up the great work!

    Thanks …………..

    #135005
    justaguy
    Participant

    Thanks Melindrea for responding.

    1. Thanks, I needed to hear that.

    2. Could you expand your thinking here for me please. My idea of a fluid grid layout it that it is always fluid, and that “breakpoints” weren’t necessarily part of the equation where I’d have to consider specific media queries? My thinking is pretty constrained as you can tell. ;-)

    I imagine that it would be easier for me to jump into total redesign of a site to “advance” it to be friendlier to differing sizes. Trying to retrofit a current site or design would be a nightmare, no? I prefer to learn from square one, one step at a time. Looking at an existing 960px width site now, and thinking “breakpoints” – having no experience, I wouldn’t know where to begin in my thinking or actions. To me using “fluid layouts” would move me from measuring in pixels to %, would I still have to think media queries at all?

    I’m a blank slate here, I hope to hear back from you.

    #135063
    Alen
    Participant
    #135160
    justaguy
    Participant

    As part of my workflow, I use Dreamweaver – for the ease of coding and viewing the results. A component of Dreamweaver is a widget allowing for ease of use to develop fluid-grid layouts. I anticipate moving forward that I won’t be using that functionality because it will make me rely upon things being done “automagically” – my intention, as it has always been, is to understand the principles and how they work together – besides, using such functionality often limits people from thinking outside the “box.”

    Will I be needing to use boilerplate, as does Dreamweaver, going forward? My understanding is that it allows better hand-shaking between HTML5 and older browsers/devices. What are your thoughts? Along with boilerplate, DW uses respond.min.js which extends support for media queries, I assume some form of java would be inherently necessary.

    #135161
    justaguy
    Participant

    @AlenAbdula & @deeve007 ( and @Melindrea) : Thanks for chiming in with additional resources of thought on the subject. Having an additional pair (or 2, or 3!) of eyes looking for great articles always helps when there is so much information out there. I don’t have the insight necessary to be able to weed out the unnecessary fluff on the subject.

    The support here is pretty fantastic.

    #135182
    justaguy
    Participant

    Many, many designers encourage those wanting to move to RWD to be familiar with Ethan Marcotte’s [article](http://alistapart.com/article/responsive-web-design ) as a starting pointing to understanding the ideas necessary to begin thinking along the lines of responsive designs.


    @AlenAbdula
    & @deeve007:

    Is it necessary that I move towards a “grid system” at all, or can I address that functionality by just doing the necessary math to address the percentages necessary to have my layout present properly? The idea is essentially the same isn’t it? Introducing grids at this point in my learning makes me feel as though I would have to rely on “additional” aides so to speak. What are you thoughts and experiences?


    @Melindrea
    :

    I am getting a little confused. Earlier you stated that I wouldn’t necessarily require boilerplates (namely HTML5Boilerplate which includes Modernizr & Normalize.css), and yet your workflow pulls Yeoman’s BP in addition to Modernizr & Normalize.css. Aren’t we basically talking the same “requirements” here? Regardless of which boilerplate “flavor” is used, the same functionality results, no?

    I have heard of and researched the alternative code-editing solutions, and can appreciate the benefits they can provide regardless of source or specific application, but rather than muddy the water further – to make a change that significant would throw me into left-field so fast it would leave my head spinning. Albeit, I have heard many great things about Sublime Text 2 as well as SASS and the like. Keeping it simple and tackling the RWD question is my focus atm. I hope that doesn’t sound too snarky, for certainly wasn’t meant to be.

    :-) Nice discussion! Sharing thoughts and ideas is what it’s all about.

    #135191
    Paulie_D
    Member

    >Sass can help you with RWD

    No…it can’t.

    It can make you write your CSS quicker but actually designing…nope!

    #135200
    CrocoDillon
    Participant

    > Is it necessary that I move towards a “grid system” at all, or can I address that functionality by just doing the necessary math to address the percentages necessary to have my layout present properly?

    Definitely don’t need a “grid system” for your layout, just be aware of some cross-browser issues that each technique has.

    #135238
    CrocoDillon
    Participant

    Blatant plug… :P

    If you want math examples of a fluid grid, check out [Justify Grid](http://justifygrid.com), it has explanation and a demo on CodePen :) (it’s not a framework by the way!)

    #136121
    justaguy
    Participant

    Thanks all for your input, I’ve spent the better part of the past week reading more and investigating the best workflow to employ.

    I have reviewed several css resources to include H5BP, Normalize, and Initializer. These css resources, after awhile all begin looking the same to me. I am accustomed to using clearfix hack and Meyer’s reset and calling it a day – now I am thinking those weren’t the wisest of choices. (?) I keep seeing a lot of the same style options repeated it seems over and over again. Do they all have that much in common? Should I be leaning toward one over the other? Frankly, all the while I’m getting more and more overwhelmed each passing day. I believe I have come to the conclusion that I’ll use an existing site’s html, converting it to html5 from xhtml 1.0 transitional and diving in head-first with the ole hit/miss or trial/error mentality.

    I do understand that the “majority” hold the opinion of designing for mobile first, to me it’s 6 of one and 1/2 dozen of the other – regardless of where I start it will all be a learning experience.

    Question:

    1.) I am unfamiliar with bringing in more than 1 css styles sheet, how would I, for example bring in normalize and h5bp in addition to my own styles.css? Would I condense all this into 1 css resource (along with my media queries)?

    2.) Workflow for rwd, is there a resource or a consensus on how to logically attack the process succinctly?

    Thanks for your continued support ………….

    #136122
    Alen
    Participant

    Keep things simple. You are overloading yourself with information. RWD at it’s core is very simple.

    “**code removed, pen provided**”

    Code Pen: http://codepen.io/seraphzz/pen/Kafry

    Resize the window to see background color change.

    #136123
    Alen
    Participant

    > I have reviewed several css resources to include H5BP, Normalize, and Initializer. These css resources, after awhile all begin looking the same to me.

    They should be. It’s based of most common patterns that emerge from starting any new project. And HTML5 Boilerplate includes Normalize. It’s a opinionated starting point. You can, and I encourage you, create your own started boilerplate.

    > I am unfamiliar with bringing in more than 1 css styles sheet, how would I, for example bring in normalize and h5bp.

    You would either concatenate them together or link them in the correct order in your HTML document. Like so,

    ``

    > Workflow for rwd, is there a resource or a consensus on how to logically attack the process succinctly?

    You need to understand how everything relates to RWD to formalize your own solid workflow. So keep experimenting and adding to your improving workflow. Even most advance professionals are constantly evolving their workflow.

    http://bdconf.com/2012/orlando/schedule#stephenhay

    #136124
    Alen
    Participant

    > Is it necessary that I move towards a “grid system” at all, or can I address that functionality by just doing the necessary math to address the percentages necessary to have my layout present properly?

    Don’t reinvent the wheel, but do have a look at http://responsive.gs/

    #136180
    justaguy
    Participant

    Thanks AlenAbdula for ALL of the above!

    It is very motivating to me that you took the time to address each of my concerns. Today will be THE day that I get something done.

    Great forum + Great people = Great resource.

    Needless to say, I’ll be around from time to time in the near future – keep an eye out for me.

    I also want to take a moment to thank all of you (again) for responding to my plea.

Viewing 14 posts - 1 through 14 (of 14 total)
  • The forum ‘CSS’ is closed to new topics and replies.