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.
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 am a newbie in UX/UI. I see that html5 also says responsive design and Bootstrap also telling the same. So which1 do i use for my layout. What is beneficial over the other. I want to get my basics right.
HTML5 and Bootstrap are totally different entities, only when you use them together in conjunction that you get a responsive site. Bootstrap is a CSS framework that allows you to build up a responsive site using predefined css classes and some javascript.
It depends on what you want.
If you want everything to write youself, then plain HTML5. On the other hand there a Bootstrap - CSS framework which does most of boring stuff and also uses HTML5.
Basically, you can use Bootstrap with HTML5. If you want to do everything by your own while keeping the site light-weight, then you can do plain HTML5-CSS. But Bootstrap handles almost all of UI responsiveness, at the expense of weight.
In the end, it's your call if you want to create a light-weight and self-written design(which is going to be harder) or add a little more weight, for a great number of functionalities you can just basically apply in ease.
Html5 isn't responsive but bootstrap is. Responsive isn't a HTML thing but a CSS thing. Usually you want users to be able to view your apps from different devices without any problems (such as cluttering) and for that porpouse we've got responsive and adaptative (both of which are CSS related).
Let's say you've got a div tag and you give it width and height propperties, such as 500x500. In large desktop's screens it could seem to be normal size, but on mobile phones it could take the entire screen or even more. So if you give it its size as a percentage such as width: 10%; and height: 10%; it would be a responsive-like solution.
Then it is bootstrap as a responsive framework with has its grid layout system that allows you to give different porcentages to the same HTML tag in different devices, using class="col-<device>-<columns>" (of course you could use more than 1 class for the same HTML tag). Bootstrap has 4 devices:
xs: mobiles
sm: tablets
md: desktops
lg: TVs
And it also has 12 colums for each row (it doesn't handle height manually, height increases as needed unless you manually define it in your css). So , our previous example could end being something like:
<div class="row">
<div class="col-xs-10 col-sm-8 col-md-9 col-lg-5"></div>
</div>
Here you've got a codepen example. (Try resizing its width)
And it would take different sizes for different devices. So at this point you could notice 2 things, there is something more (beyond of porcentages/responsiveness) going on here, and I still haven't mention what adaptative is. Ok, adaptative is just conditionally using some CSS rules for different screen sizes (not neccesarely as porcentages) by using media queries an example of adaptative layout would be Youtube and an example of responsive layout would be Twitter.
In addition bootstrap also provides you with some js functionality, some default css components (such as navigator, tables, and much more), and also a set of font-icons.
Functionally the answer is that Bootstrap is more complete, it has more buttons, menus, slide shows, etc. that you can quickly pick up and use. The downside is that the result will look like a Bootstrap site (just as you can usually tell a WordPress site).
HTML5 (I presume you mean HTML5 Boilerplate otherwise you are comparing apples to oranges), is more basic, and you will need to edit the HTML and CSS more. On the other hand, because it is more basic, you can have more flexibility with it.
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!
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).
How to change dimension of a webpage. I want to build a mobile website and thus the width should not be greater than 320. Is there any way to change dimension.
Also what should be the steps to build a mobile website.
I assume you are using a fixed width layout like the 960 grid system?
You have two options:
Build a separate 'mobile' version of your whole website, and switch to that by detecting the phone in the HTTP headers.
Use a fluid design, so your website design can squeeze into any space you put it into.
If you choose the latter, take a look at http://cssgrid.net/ - this allows your website to fit onto large widescreens and tiny mobile screens, with only one design!
Got the answer. By making a table of desired width. Working perfectly.