Is this possible. I am getting frustrated with responsive design as I start at desktop size and work my way down, when I get to a point where I have to change the size of a graphic or type it then affects the sizes above and undoes all my work.
Can this be overcome?
Regards
Kevin
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Currently you can’t change the size of type without using some extra manual @media query. We haven’t touched this in GridMeister (or CSSMeister) yet because I’m in good hope that this feature will be part of one of the next FW releases.
Regarding “graphics” I’m not sure what is meant here - if it is a graphic-item, by setting those to a 100% width, things should work (as seen in GridMeister Episodes 8+9 ).
You elsewhere mentioned that GridMeister is not much of help - which disappoints me. But it’s not to change. So show me (or us) a result of what you already did - and I tell you how detailed you watched the episodes. The construction method is not a question of choice - it’s simply required.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
I am getting frustrated with responsive design as I start at desktop size and work my way down, when I get to a point where I have to change the size of a graphic or type it then affects the sizes above and undoes all my work.
Then you aren’t going about it the correct way.
Personally I use the flexible image method for graphics and add media queries to affect type styles at smaller sizes.
Doing it that way ensures that changes made at smaller sizes do not affect larger.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Hi Thomas. Thank you for your reply. I think you misunderstood what I meant in the previous post about Gridmeister. I found it very helpful indeed but incomplete. I look forward to future tutorials to take me further along the line of discovery on these.
OK where can I find out about media queries please?
Regards
Kevin
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
The easiest way to familiarise yourself with a media query is to look at a FW created one.
Start with a totally blank FW page in FW 7.
Starting with the Default page size draw an html item and give it a meaningful name.
Now click on one of the smaller Media Tabs (like Phone 320) change some aspect of the item you created (size for example) and publish/preview the page.
If you open the published page with a text editor like TextWrangler or TextEdit you will see some code something like.
@media screen and (max-width:320px)
{
#item1 { left:36px; top:79px; width:224px; min-height:146px }
}
That is a Media Query and what it is doing is changing aspects of item1 ie its size, position etc for a screen of 320px.
This is a very basic starter as it is a huge topic but you can use Media Queries to change any aspect about an object or text style at different screen sizes.
David
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
So what on my screencasts is helpful if you’re completely frustrated? I think it’s more a question of attitude rather than technical thing. Or is it lacking direction if it comes to add content to a “framework”? Simple text (which is content), some sections one below the other - ending up in a very simple page-structure just to get the hang of it?
As I already said: Disappointing, but I will note it down:
“Turning my subscribers into good designers - will require their willingness - but do something - smelling like DesignMeister series”
If it comes to additional @media, David already pointed a way out to do. My problem is, that the Version 6 series in TheLounge shows a lot of “how to figure out which styles to put where and how to manipulate”. But reviewing them, I recognized, that it could cause some serious confusion - cause at that time, I did “responsive” slightly different. Even in late 5.5 series there is some stuff about.
Responsive text-styles is (just as a footnote) is btw. more a matter of switching text-sizes from px to rem (or em).
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thanks David, that has clarified what media queries are.
Thomas, I think that for me the frustrating thing about working with Responsive layouts is following the rigid box structure when I am used to plonking things where I like, even overlapping if the design suits.
But the hardest and really frustrating part is when I need to change aspects of the design and try to re-arrange items it all seems to fall apart (probably because I have been rigidly following tutorials and maybe not fully understanding why certain things happen).
I am working on a website at the moment where the client has changed his mind about the way he wants the phone number and email at the top of the page, and he now wants a new logo (thank god). I have had all kinds of problems trying to get that section to work - I will be trying again today. Also on the home page, there are 4 blue boxes which I can’t work out how to make them stay the same size as each other - particularly when resizing the page.
This can be seen at:
http://www.creativeline.co.uk/directpallets/index.html
Regards
Kevin
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
Thomas, I think that for me the frustrating thing about working with Responsive layouts is following the rigid box structure when I am used to plonking things where I like, even overlapping if the design suits.
Yes - I realized this.
A Code-editor (whichever) is not a Design tool. The decision of what happens where on the page has been made way earlier, whether by you or someone else. It requires a plan literally to get in. But this is nothing new.
Overlaps can be made - even in a relative positioned world. We’ll cover this. But the place of an item needs to be clear - and is not the result just by placing them.
No topping-out ceremony before the brick-built!
But the hardest and really frustrating part is when I need to change aspects of the design and try to re-arrange items it all seems to fall apart (probably because I have been rigidly following tutorials and maybe not fully understanding why certain things happen).
This is not supposed to happen, cause you already discussed the design with your client (or yourself). Adjustments are smaller parts such as alternative Fonts, Colors or Images - they all are not effecting TheGrid.
I am working on a website at the moment where the client has changed his mind:
Rule Number 1:
Discuss as much as possible before you start HTML. Once a client agreed (to the plan) changing her mind, handle this as “new” issue - so no loss at all.
about the way he wants the phone number and email at the top of the page, and he now wants a new logo (thank god). I have had all kinds of problems trying to get that section to work - I will be trying again today. Also on the home page, there are 4 blue boxes which I can’t work out how to make them stay the same size as each other - particularly when resizing the page.
The 4 boxes, this is indeed pretty tricky. While I’m used to solve this with flexbox today, we had recently a discussion about some alternatives. Ernie wrapped this in a nice article to be found here:
http://cssway.thebigerns.com/workbench/css-even-column-cookoff/
This can be seen at:
http://www.creativeline.co.uk/directpallets/index.htmlRegards
Kevin
In your page-example, there is nothing in I’m used to teach. It’s entirely different built and shows some of the reasons I’m teaching it my way.
Cheers
Thomas
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
there are 4 blue boxes which I can’t work out how to make them stay the same size as each other - particularly when resizing the page
Have you tried simply making them all tall enough so they don’t NEED to grow? Moving them to different positions (two-up instead of four abreast, for example) at the iPad or iPhone (Landscape) breakpoints might also help. Just a thought.
k
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options
On 22 Apr 2015, 7:23 am, Thomas Kimmich wrote:
Responsive text-styles is (just as a footnote) is btw. more a matter of switching text-sizes from px to rem (or em).
That’s certainly one way of making Responsive text styles. Adding different px sizes in @media breakpoints is another, although that something of a PITA to add by hand.
freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options