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).
Related
How can I make my website responsive according to the different device sizes?
Different laptops and PCs have different resolutions. In that case, if I use media query and
apply it for a particular device( in pixels ) then it will not apply for a different device having
different resolution.
Let's say, I am using this website(this is just an example) on one pc and it is working but if I use this same website in a different pc with a different resolution then the margin between the Website Type and Number of Results vanishes and they overlap each other.
Please tell me a solution so that when I run a website on a different device with different resolution, it
can run.
I recommend to use bootstrap framework, by default it has responsive feature other wise you must apply media query every break point.
see this article to learn media query and breakpoints
https://www.freecodecamp.org/news/css-media-queries-breakpoints-media-types-standard-resolutions-and-more/
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 am new to bootsrap and I am creating a website that I want to be versitile across multiple devices. I was reading about the width types (xs, sm, md, & lg) and I saw they are able to scale up. With that said, should I just make everything on the site with a width of xs in hopes it would be the most universally scaleable? Or is this a bad practice?
With Bootstrap you can actually specify multiple layouts for the different sizes.
If you look at the documentation on the grid system here you'll see that you probably want to specify multiple layouts for the different devices.
Unless you want it to look the same on all devices, in which case, don't specify size.
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!
What are the most commonly used pixel sizes (primarily widths) and what are there advantages and disadvantages?
How can I best find a happy medium to give a good experience to people with a wide variety of monitor sizes?
An answer with an explanation rather than just the size would be greatly appreciated.
the most grids use a width of 960px. (When the design has a fixed width).
When you take a look at global statistics 1024 range resolutions are still the most common: http://gs.statcounter.com/#resolution-ww-monthly-201006-201106
Do not use 1000 width. (You have to count in the border width of the browser and the scrollbar, in certain browsers / OS they are larger then in others)
I don't think there is a ultimate resolution that's why you should check the statistics on the concerned webpage (if the page already exists), to decide what resolution is most appropriate. If you can't do this you can check stats for you target market on http://gs.statcounter.com/
Or even better use responsive webdesign: http://www.alistapart.com/articles/responsive-web-design/
Since max- and min-width attributes in CSS, you can target whatever resolution you want, if you have the time / budget for it of course.
960px width is a good standard, as others have already elaborated on.
However, one should keep in mind that websites are viewed on a lot more than just desktops these days, so the answer could vary based on what the site is being styled for. For example, 960px would be a poor width for a mobile stylesheet.
One resource that could help you is www.resizemybrowser.com. (There is a similar tool built into Firebug.)
At the end of the day, I think 960px is a good standard, but really, "it depends". :)
960 is a standard for fixed-width websites. It is to ensure that 1024x768 resolution will pick it up easily. As for height - it does not really matter.
In general, for a fixed-width website, that is meant to be read on a computer screen, nowadays, I'd say around 1000px (because there's no 800*600 resolution anymore and the least you can find is 1024*768).
You should really aim for an extensible design (generally harder to do though).
Out of experience, for the web i would say a width greater than 850 and less than 1000 px preferably in the 900's and a height of around 750 px, but bear in mind that the height would be variable in case of dynamic content. so the height could be set to 100% or auto.
and best to align the website in the center, via the css property margin: 0 auto;
The most common size is between 900-1000 pixels there are some good sources for screen size useage which most people tend to desgin for the largest group. mostly its assumed anyone with a 800 by 600 screen wont want to be doing much business. ie strapped for cash (big generalisation)
I won't consider only the desktop monitor resolutions. Nowadays you can browse websites on almost any device, and is fairly common for people to browse also with their mobile phones and tablet PC, so you really should consider them both.
This could result in a different site version for different devices, or a site layout that is ableto accomodate based on different sizes. This is something you have to consider when first thinking about the website you are planning to do, since not every website is suited to have a layout of this type.
An adaptable layout has the added benefits that it will be good even if new devices with custom (non standard) resolutions came out, you won't have to worry about checking it in those new devices because it will fit ok (if the layout was done right).
Anyway my standard minimun width is still 960px for desktop monitors, and for an adaptable layout I usually choose a max-width for really huge monitors (think about viewing a site which extends for the entire monitor width on a 2500x1600 monitor... gosh) of about 1200px, and a 100% width if the browser size is less than that, to allow the website to fit good everywhere.