I'm very new to responsive web design, so please excuse me for this dumb question.
I have to build an existing desktop website to responsive design. After googling I have found two ways - Fluid grid and Media queries. However I'm confused which approach I should follow or do I need to use both to develop responsive site.
As per my understanding, Fluid grid is used to display webpages according to different viewport but media queries is used to put different content(images, text) according to the room available in different sizes of browser (making browser smaller manually or from mobile/tablet/desktop browser). Please correct me if I am missing something here.
Thank you for help!
Basically, fluid grid systems will give you some flexibility within a small resolution range, but to create a responsive layout, that works for a wide range of devices, you have to use media queries. You use a grid system mainly to provide a structure to your layout. Responsive grid systems can use both media queries and a grid system. These are two different technologies with different objectives.
You have to know some history to understand this. Fixed grid systems came first and the most popular setup was: 960px width divided into 12 or 16 columns. These evolved into fluid grid systems. When they were created and used, display resolution ranged from 1024px to 1920px and their purpose was to bring some flexibility to this relatively small resolution range. The most important role of a grid systems (fixed or fluid) is to provide a structure base for your layout/design.
Media queries were created for a much wider resolution range - from mobile, tablet to plasma screens. Their primary objective in RWD is to detect the type of device and provide alternative styling for each device.
There is no one solution for using both grid systems and media queries as they have different primary objectives.
The problem in using both these technologies is: imagine a 300px wide screen divided into 16 columns (in a 16 column grid system). The columns become quite narrow.
So, what is the solution? Modern and responsive grid systems can stack groups of columns on top of each other (using media queries). CSS classes can also be used to change the number of columns, or to hide certain elements of the layout depending on the device (which is detected using media queries).
These two, different technologies can be used together to bring structure to the layout (grid system) and provide the best user experience all kinds of devices (media queries).
What you have to understand is that all responsive layouts always use css to resize the page.
its all at the end the same.
Media Queries detect the size of the browser and loads in additional css.
OR
Viewport load in css based on the device width
#viewport {
width: device-width;
}
essentially the easiest way to approach a layout if its simple is to make it fluid/100% width
and as you need more customization add media queries like this
#media screen and (min-width: 960px){
your css in here
}
its all css, like loading a different set of css files by detecting browser/browser-size/browser-type/device/ device width.
there are no rules!
Related
I have already provided designs for 19201080 and 360760 will be providing designs for the tablet version so is there a need to provide designs of every breakpoint or can it be made responsive with 3 designs for desktop tablet and mobile and can these designs be used for Mac as well, I have specified the breakpoints below.
360px to 719px
720px to 1079px
1080px to 1295px
1260px to 1439px
1800pn to ..
This depends entirely on your design. It is often not necessary to use all breakpoints. 3 breakpoints can be enough. The breakpoints often also come in handy for adjusting individual elements of your design.
I'm building a website, and I found a crazy number of favicon sizes to be pertinent for most devices. Really pretty ridiculous. I any event, I understand how to make my HTML read the viewport size and redirect to other HTML docs and stylesheets as needed, but my question is, how many is needed in this world of 30+ different screen sizes?
Is Bootstrap all I need? I imagine bootstrap is mostly about percentages (height: 5vh; width: 100vw;) etc. Seems easy enough to redo my current desktop site to a tablet and iPhone size screen, but if this is anything like the favicon ordeal, then it would be easier to use something like Bootstrap.
You need ONE website, and you need to use media queries in it - depending on how picky you are, a usual way is to create them for three sizes - one set of basic rules and two sets in media queries (though these only have to contain those rules that differ from the basic rules) for the other sizes (i.e. smartphone, tablet, desktop). (favicons are a different thing).
Bootstrap can be helpful with that, but doesn't have advantages only.
I'm hoping someone can help.
I'm recently watched a video on responsive web design on a well know site.
I'm puzzled by the method taken by the tutor. He basically creates three styles sheets (large / medium / small) and in each stylesheet he gives the PX widths of DIVS and swaps images where necessary.
Surely, this method is flawed , he could just use percentages for fluid layout instead of different styles sheets called via media queries??
Is there any advantages to his method?
many thanks,
There is a distinction between a flexible design and a responsive design.
According to some of the books that I read, you can make a layout flexible by using % length
values, so the layout adapts to the exact dimensions of the viewport's width.
If you build a responsive design using media queries, you can make a design that uses
absolute lengths (pixels) and adjust those hard-coded values to differ according to
the screen size limits defined in your media queries.
So, a flexible design may work well as a responsive design, and a responsive design may
be based on a fixed-width layout.
Needless to say, the approach that you use will depend on the design that you are trying to
build and how it must work in various devices.
The author of your tutorial is not necessarily wrong, but their approach may not be
the most efficient approach to building a responsive design. In some cases, if you use
% values, you may achieve your design with a much more concise CSS stylesheet.
You can use both fluid layout and responsive queries together - responsive media queries take up where fluidity no longer manages.
For instance, content in four columns, with column widths in percentages, will shrink the column size for smaller screen widths. But there comes a point where the columns are so narrow they are holding just one or two words per line, which looks naff, and is hard to read, and causes content to overflow its containers. By the time it gets down to mobile size everything is far too small to read at all.
To solve this, you can write media queries to relocate one or more of the columns elsewhere - queries allow you to completely rewrite a page, not simply shrink it. And, unlike the use of floats (often used for images) where only the end one drops as things get smaller, with media queries you can decide which is the most logical div or column to move, and where to relocate it to (or even to hide it completely).
It's good also to get away from using PX units everywhere, especially to keep text content on our pages accessible by poor-sighted people. Note that the point where text is just one or two words per line comes much earlier, at much wider column widths, if the user is running with a higher text zoom (as I often have to do). I wrote about this recently on my blog at http://www.enigmaticweb.com/index.php/blog/accessibleResponsiveness, which you might find useful. The answer is to use EM units for containers holding text, and for media query breakpoints (if you are just starting out with media queries, its good to get into that habit right at the start). Divs with both fixed height and width are especially to be avoided - as soon as the user zooms the text size, everything bursts out of the div and defaces other stuff!
By the way it is not usually good to do as that tutor you mention and put your media queries in multiple stylesheets (he was probably only trying to illustrate the separate nature of the queries) - that increases load times (separate HTTP accesses) which is especially bad news for mobiles.
I hope this helps. Huge numbers of commercial sites are being made responsive now, to cater for mobile phones. It's the way the world is going.
In my early years of learning how to code with a graphics and design background. I found it rather awkward to use pixels over percentage. It's this simple if the product you are designing is for a specific screen size/sizes then and only then could adapt to using pixels ( which in any case % would still make your work easier). When coding we should keep one thing in mind i.e. "aesthetics". You want your content to be fluid, adaptive kindly stick to % and save time.
I'm not familiar with responsive websites and would like to start creating a website taking all the screens into account.
Obviously media queries is the way to go but they only concern CSS.
In my current project, I would like to organise the page differently according to the width of the page (being completely device agnostic).
The thing is, on small widths, I would like the HTML layout to change completely so I will have to make the HTML "responsive" as well as it should change according to the website width.
How can I achieve that?
Is there any js library (jQuery if possible but not mandatory) that will "serve" another html page according to the width of the page?
The whole website should be build this way so the script should be more than a gadget, it should be rock solid enough to allow the whole website to rely on it.
And, of course, it should work on any device or screen or browser.
Some would say that I'm looking for adaptive techniques more than responsive ones but I believe it's a mix between those two as the elements will still be responsive in general but between some critical breakpoints, it will indeed adapt and change the html.
I read a lot about different techniques but I can't find something that suits my needs.
Any lead would be appreciated.
Thank you for your help.
What you are describing is adaptive delivery. What you want to to is detect the user agent string using a server side language, and then conditionally render your templates according to whether the device is a phone, tablet, or desktop. Realistically, you'll share a lot of code between the screens, but you might have a different navigation layout, or opt to not show more rich features on the smaller screens. This approach not only saves a bunch of hide/show code, but saves a lot of overhead on smaller screens where you would otherwise be loading stuff that would be hidden the entire time anyway.
You can do a lot with CSS and media queries to alter your page layout ("completly") depending on device and screen width. If I were you I would dig a little deeper through the possibilities these techniques can offer.
If you are positive this is not enough. I would look into Redirects and User-Agent Detection to redirect your users to a different page depending on the user-agent.
If you are looking for a full framework that can handle both what you need (redirecting and dynamic content depending on user-agent or width) and a whole lot more, you should look into AngularJS.
You CAN of course do some DOM manipulation with pure JS depending on your criteria, but as your project gets bigger you might be in for a world of hurt.
Is it possible you could use an existing CSS framework such as Bootstrap to achieve a responsive design across your various target browser widths and device types?
Bootstrap in particular will let you specify different layouts depending on the device width where the page is being rendered. More information here - adjust your browser width to see it in action.
If, after evaluating an existing framework, you're still determined to develop your own you can perhaps at least use the techniques in Bootstrap or another framework as a starting point for your own.
try Bootstrap
Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.
I do not know if it is sufficient to your project, but you can to some extent use CSS to control what markup you would like to show or hide on smaller or larger devices. For example:
<div class="mobile-only">
<p>This content will only be visible on small screens such as mobile devices</p>
</div>
<div class="tablet-up">
<p>This content will only be visible in tablet and larger devices</p>
</div>
/* media query for small screens, such as mobile devices */
#media screen and (max-width: 767px) {
.tablet-up {
display: none !important;
}
}
/* media query for tablet and larger devices*/
#media screen and (min-width: 768px) {
.mobile-only {
display: none !important;
}
}
But be sure that you do not use this technique if you have a really big project, you might be ending up choking performance.
Currently i design a responsive web design. I use fluid design including the media queries for different widths.
I could not able to find different sizes of different gadgets currently available, could any one help giving types of mobile device widths available for samsung, blackberry, htc, Nokia, Amazon, LG, Motorola, MicroMax etc. And also what should be the common width most widely used.
Thanks in advance.
Here is a list of "common" devices and queries...
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Here is another another detailed list, with many specific devices...
http://nmsdvid.com/snippets/#
It's really useful for creating additional responsive queries for the less common device-widths and so on.
Pay attention to the queries though, they are written to target those specific devices, so some use combinations of min/max widths and heights, along with pixel densities to target that specific device (and exclude others).