I’ve been working on a few minor sites for myself as well as family members. I realize that these website are no where near responsive. I understand that utilizing % can help as well as using @media. The @media doesn’t seem viable for every 100px (width). I want to know what tips or hints should I use for proving both a decent mobile n desktop version.
My coworker who freelance web developer uses bootstrap or bourbon frameworks that contain grids. I don’t think that’s necessary for smaller scale concepts.
For font I use em but even when resizing, the font doesn’t change.
I don’t have a source code since this is a generic problem I have across all my projects. Any hint or idea that you yourself use would be appreciated!
First you must add the viewport meta tag or the media queries won’t take effect on mobile and the page will just be zoomed to fit and end up very small.
You don’t need grids or frameworks for smaller sites but that has little to do with the question either way as you still need to know how to handle various screen sizes.
The important thing is not to design for fixed width but create a fluid width site that stretches with the browser. You can set a max-width (usually in px or em) to stop it getting too big and indeed there is no need to use percent unless you want to. I often find that percentages break the layout as authors set a small sidebar to a percentage width and that breaks almost immediately when the browser is resized because it gets too small for any real content.
I tend to use a fixed width side column (usually about 300px so that I can scale it easily down to the smallest mobile (320px) but I let the main column be fluid without setting a width (it just takes up the available space). This allows the site to be fluid across the whole range of devices and then you just use media queries to revert the design down to one column for smaller mobile.
The secret to responsive design is to forget about devices and just design in the desktop at first and then by opening and closing the browser window you can find the points where the design doesn’t fit or looks awkward and then you throw in a media query at that ‘breakpoint’ and make it look better. A few well chosen media queries will then cater for all devices whether you know about them or not. Just concentrate on the design and when the design doesn’t fit then fix it with the media query. This may be simply removing the width from a small column and letting it stretch full width and removing floats to for going from 3 columns down to two and eventually down to one.
Far from making text smaller for mobile you should make text slightly bigger as 13px (or em equivalent) text is very difficult to read on a mobile so bump your main text up a little for mobile although you can of course reduce the size of large headings.
When using images ensure that in the css you set a max-width of 100% and height:auto and then the image will scale smaller when it needs to.
I didnt even bother with the meta tags. I’ll be sure to look into those a bit more. I did watch a video were the individual set a global px for font-size (for the body) and in every individual element in css, he gave it a percentage.
I did read that a work around it would be to set a @media for every single portion were the design breaks. However, i simply though that was bad programing design. Having so many media queries look a bit ugly. Thats why i though there was perhaps a specific method to creating responsive designs and @media queries were only for smaller exceptions.
Thanks for your time in providing all those hints!
I don’t get that at all
Fonts should not need to change size, except possibly large headers. Body text need to remain readable.
Yes, keep them to a minimum.
Yes, that’s what Paul was describing. Fluid design, making things flexible. Avoiding fixed widths and heights for major page elements with remove the need for so many queries.
That’s what I meant by setting the original font size into the body tag then using percentages for every other tag. I’m assuming it’s giving a 5% to the original 24px. I apologies for the lack of terminology since I don’t ever remember the names and exact wording for specific stuff.
I think ima do what the above user said, create a design for a normal desktop. Then minimize/maximize the screen to see where the elements/tags begin break and utilize a @media.
However, I don’t seem to understand the necessity of view ports? Why specify what viewport were using when we’re manually setting the screen to be what it should be at a specific width. If im manually designing it for every screen size, why use viewports?
The only necessary viewport reference is the meta tag for mobile devices that allows them to scale the page to fit their specific system of virtual pixels.
Yes a lot of beginners don’t understand they must add the viewport meta tag if they are going to use media query for mobile devices and tablets. If you don’t add the viewport meta tag (use the one I posted above and no other until you are an expert) then mobile devices will assume that you are not catering for them and will assume a viewport of 980px is being used and will then scale that 980px smaller and smaller until it fits the actual mobile viewport. This will result in sites that are too small to see without zooming.
Once you add the meta viewport and set it to device-width (as shown above) then the device will say “Ok I will let you take care of the layout” and then it is your job to ensure that your design fits the device as required either by using media queries or a totally fluid design but usually a mixture of both (as already described in my first post).
Generally it is bad practice to set the size of the body tag in pixels as that disrespects a users settings. Leave the html and body at the base size but use percent/ems for the content as required. This means that your content will then be based on the optimum size that either the device recommends or the user wants.
So effectively you do this:
html,body{font-size:100%}/* this rule is not really needed but just for example */
h1 {font-size:1.5rem}/* 150% the size of the default : note rems are only supported in modern browsers so supply a fallback of em/ or percent if required */
In this way the layout you create honours the preferences of the device or those of the user if set.
Wasn’t there an antiquated version of Internet Exploder that needed that rule in order for all the subsequent font size settings to work correctly? The reason why you still find that rule on many sites today even though it now makes no difference.
Yes IE6 would get the text scaling factor wrong if you didn’t set the body as a size using percent (not em) and then fonts became microscopic very quick (or too large). That why as you say everybody used to say html,body{font-size:100%} to avoid this bug without harming anything.
I like coding in a desktop first approach as well. There are a lot of people that prefer to code mobile first though. I think it’s more of a personal preference thing than there being a distinct correct answer.
I find coding mobile first more difficult than desktop first. It’s easier starting with the most complex design first (desktop) then simplifying it for mobile.
Yes, I think its just a matter of preference but I find it so much easier to go from big to small than the other way around. However most of my work is psd to html conversions so 99% of the time I just get given the desktop view and then have to work it back down to mobile so its logical to start big and go small.
I see advantages in both ways at times so to me its just a matter of preference and not a case of right or wrong.
