I've finished a layout for the website I'm designing using DIVI and it looked perfect on my 1280x800 laptop resolution, but when I tried to display it on the bigger resolution (in this case 1920x1080) a lot of the elements (mainly the ones with left or right margins/paddings) were out of place. I've tried using percentages instead of pixels as my margin/padding values, but gave the same result.
What would be the best practice in going about designing responsive CSS layouts? Should I define fixed values for width of the containers? Will that solve the issues?
Should I focus on media queries? Define values for each resolution? Then again, there's the issue of resizing the window which again would make the whole media query solution obsolete. What are your suggestions?
RWD (Responsive Web Design) is an argument too broad to give you a single answer. Personally I love building my own web pages from scratch, without any page builder or something like that, and this's the tip I give you: first, try to build your own web pages by hand!
Three guidelines I can give you to build a responsive website are:
Use percentage values, no fixed values;
Use media queries;
Use the display: flex property to adapt the layout of webpages when the screen width changes;
With these advices I think you can build easily your responsive web pages.
There are many other factors to worry about: search, learn and get your hands dirty with code!
Related
I have been given a task to convert an already hosted website into responsive. My working knowledge on CSS is below average.
In that quest, I heard about media queries. I looked for a solution, but what I got was more confusion. Media Queries? I tried responsinator.com and checked my website in that. Actually I don't know how to know whether a website is responsive or not.
My website fits the mobile screens. Header and footer automatically adjusts themselves.
There is a big slider and it just got cropped, but still loads images and works fine. If my website is responsive, how come the slider get cropped?
To make a responsive CSS, Will I have to make any changes to the values in my already existing CSS? Or will I have to just add my styles (without any edits) into the media queries given below.
#media(max-width:480px){
/*PUT YOUR CLASSES STYLES HERE*/
}
your media query defines which part of your css to look in, think of it like an if statement.
When it falls within a media query in your css file, your css has be defined to cater for that screen size,
Just because your page objects crop when you make the screen smaller does not make your site responsive,
best take your phone or tablet and visit your site, if the user interface is simple, easy and smooth, then you dont have to worry, but if you have a desktop styled site on a phone as wide as your numpad on the keyboard, you have some work to do.
It's quite difficult from my experience to "convert" a static website into a responsive one, especially if you do not have good CSS knowledge. Try to find elements with a fixed width and make them fluid by experimenting with max-width and procentual width values. Hope this helps.
I am building a responsive layout with Twitter Bootstrap and I am finding it difficult to keep the layout looking good across all sizes/devices.
In my early attempts I tried simply using the grid for placement, but page elements never ended up where I wanted them at different sizes. Now I am at the point where I am using media queries to override some of Bootstrap's styles and my own styles. This seems like it may cause a maintenance headaches down the road.
Rather than overriding styles I am thinking that I should add/remove the styles based on the screen's size by registering for media query events.
Can someone offer advice on good practices for adjusting the layout of a page at different screen sizes using Bootstrap?
I am looking for general advice, but I can post code and screenshots if that will help.
Update: Looks like media query events are not well supported.
Your on the right track. Use CSS media Queries. Firefox has a nice add on that enables you to adjust the page to a particular viewport so that you can see the changes pixel by pixel, though Im sure chrome would have something similar
There are no special tricks just because its bootstrap, as long as you have enabled the responsive stylesheet then you are pretty much good to go
This is a good place to start for media queries
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
In this question, it is said in the most upvoted answer:
Use liquid layouts
Why this is considered a good practice ? My opinion is that it is more difficult to dezign a liquid layouts because it can vary quite a bit from one window size to another... Is the extra complexity worth it ? What i should take into account to make the choice ?
Hmm, I disagree with that. With a fixed-width layout you can create something which will be viewed the same on all browsers.
I've been in web design and development for quite a while now and there have been very few times I've ever used liquid layouts on a website.
There are some times when it can come in useful, web apps sometimes can benefit from having a liquid layout. However, the safest (in terms of design and everything working across different browsers, screens etc), best looking (in my opinion) and "standard" way to create websites is with a fixed width.
Just look around. See the websites which have a liquid layout and ask yourself why they have a liquid layout. Do they have a lot of areas of dynamic/varying text for instance? Lots of information to show? Lack of visual/graphical design? Its a very subjective area, but one which you'll have to choose between. Does your website look better fixed or liquid? Do you want people with huge monitors (like me - 27" imac) to have to see your website really fat? I hate viewing amazon on my mac!
Personnaly I find liquid layouts are always harder to work with, but they look nicer when it is nicely designed.
You can take a look at some grid css frameworks that can help you working with liquid layout.
http://www.designbyfire.com/liquid_blueprint/tests/liquid.html blueprint liquid
http://www.designinfluences.com/fluid960gs/ Fluid 960 Grid System
The right choice depend on what are your needs.
Liquid layouts are perhaps more difficult to understand and implement, but you gain flexibility.
A flexibile layout means it can easily adapt to different screen resolutions.
Once you have your liquid layout done, you can possibly adapt it also for mobile websites (if it isn't already) with a couple of changes, mainly CSS rules.
With the fast pace at which new technologies come out (new devices, new screens, new resolutions, 16:9, 16:10, Full HD etc), you can easily implement a layout which has no problem displaying at various resolutions on different displays.
This is what liquid layouts are for.
On the other hand, a static website is nothing more than what we've seen in the past years, like a centered 960px wide page, unable to being displayed on most mobiles, and even if they display it, good luck navigating the website.
Note that you can actually implement a sort of hybrid: a fixed size layout, with a max width of let's say 960px to be viewable in desktop browsers normally, which then adapt to lower resolution with an auto width.
Im trying to make some sort of liquid-fixed weblayout with CSS. The problem is that the site isn't very big, so when users with big screen resolution visits the site it looks very small and empty.So I need the menubar(which is located in the bottom) and some of the main elements to use some more screen space, when visited with larger screen resolutions. Sort of "scale to fit" can anybody help me out please?
My CSS styling as for now is just made as a fixed weblayout.
Read this: http://www.alistapart.com/articles/responsive-web-design/
and try to avoid using PX for widths, use % more :)
You might find this useful too, if you are looking for a cross-browser method for responsive web designs. It's called Respond.js:
https://github.com/scottjehl/Respond
There are also some good snippets and theory in this article from Smashing Magazine:
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Here is some more information from WebDesignerDepot:
http://www.webdesignerdepot.com/2011/09/the-ultimate-responsive-web-design-roundup/
EDIT: Updated with a nice new anything and everything roundup from WebDesignerDepot
I have created my webpage in asp.net in 1024*768 resolution, my problem was that when i change my monitor resolution then the controls in my webpage will be displayed in unmanaged manner .
How to arrange items in my webpage which support multiple resolution ...
Whatever the resolution of my monitor the controls in my webpage will display as it is as managed in 1024*768 reolution !
This really has less to do with .NET and more to do with website layouts. It sounds like you have a lot of inline HTML elements which wrap in a specific way at a specific resolution, but wrap differently at different resolutions.
Do you always want a defined width supported by 1024*768? If that's the case (and often is in website design) then you can simply wrap your content in a div with a width set to the specific pixel width desired.
Furthermore, however, you'll want to get a good book on CSS and learn about that. The Zen of CSS Design is a pretty good book on the subject, and similarly you can look through the CSS Zen Garden for inspiration and examples. It's an extensive subject, but critical for good website design.