I've been trying to optimize my lay out as responsive as possible, but I've bumped into weird problem; despite my iPhone and iPad Mini are showing to be two different sized platforms according Bootstraps' site, yet while making edits on my lay out, they both seem to interpret the lay out in sm-size.
How I can get it so that Bootstrap understands that small screen with 960 px screen is no suitable for sidebar without effing up desktops and tablets?
Bootstrap provides exact media queries here: http://getbootstrap.com/css/#grid-media-queries . With a 960 px screen you would have to alter this to fit this exact resolution. When you hit desktops and larger, the same would apply to adjust the media query/css.
You're able to customize these media queries and CSS to fit your needs a few ways:
Customizing Bootstrap and compiling and downloading the results thru the 'Customize' section http://getbootstrap.com/customize/
Creating custom Media Queries/CSS to right over the default Bootstrap Media Queries/CSS rules. This can be done with regular .css file, Less or Sass (see 1st url for grid table that outlines pixel dimensions for different media size(s)).
It seems the default media queries are working fine for your iPhone and iPad Mini - and as the default for Bootstrap is mobile first, the sm-col class prefix would make this work likely how you want (I am assuming I am reading your statement properly).
Post a follow-up to see if this helps and/or more detail can be provided.
I hope I've helped and/or guided you in the proper direction (this is my first question I'm answering, be kind :-)).
Related
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.
For the life of me, I can't quite figure out how this template is responsive without any extensive use of media-queries.
https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/
Anyone have any ideas?
I bought this template, and the responsiveness kinda broke while I was applying it and the author is not responding to emails.
I can't quite figure out how this looks so elegant on small screens particularly.
A webpage doesn't need to use media queries to be responsive. Responsive by definition means the elements adapt or "respond" to your device or screen size, instead of using a fixed or pre-defined width/height/arrangement regardless of the viewing device.
The link you pasted is certainly a "responsive" site, and they achieve this by allowing elements to have a fluid width (only with a max-width on the container, to make sure it doesn't keep growing if you have a very large screen, since that would look funny).
The way they do it makes your CSS code very simple and uncluttered from various viewport pixel definitions and media queries.
You can simply set max-width to prevent an element to be wider than required on large screens. Here is fiddle: http://jsfiddle.net/ur3futxp/
The site uses twitter bootstrap to make the site responsive. Bootstrap by default makes a site responsive using media queries if you use it grid system. Please refer the documentation http://getbootstrap.com/css/
This site is using twitter bootstrap framework which is developed to make the site responsive with all the devices without using any media queries as it already have predefined all the media queries in its framework and if you want to any more things to get responsive you must add your classes in your style.css file and make it sure that it will not conflict with twitter bootstrap predefined classes and you can do that by reviewing this site
http://getbootstrap.com
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!
I need to put together website for mobile devices, so iPhones and various androids. The problem is I struggle with getting viewport right and other settings. My goal is so webpage would be coded for specific width e.g. 640px wide. Then once open device would zoom it in/out to the width of the screen so everything became larger or smaller same like after zoomig in/out via pinching on the device screen.
So I would like to develop it for lets say 640px width and depending on device it would scale up or down once open. So if device screen would be 960px wide it would automatically scale to this width via viewport somehow. Is this possible at all to have it coded for predefined width in css and have zoomed in/out as needed by device itself?
I apologize if the question is too generic, will explain details if needed.
EDIT:
So the most common approach if I understand correctly is to provide few layout versions for most commons screen sizes? Using media queries in css provide different values for widths, fonts sizes etc is that right?
If I decide however to go with percentages rather than media queries, given the design provided I think still would have a problem with resizing fonts as layout has images with text in it and text needs to be proportional to the image. Also percentages would take care of widths, height might be an issue though as the images would have to be resized vertically too. Some parts of the design would need to "fit" each other it seems and it would become problem I think.
Now if I simply build a website of certain width, lets say 640px I should be able to position everything on the screen with pixels, no diffeent from normal non-mobile website.
So I tried to set <meta name="viewport" content="width=640"> and inside of a page set width of widest container in css to 640px making page width 640px basically. If I understand correctly it will set up viewport to exact width of the page. So the page would be build as any other non-mobile webpage. User will have to adjust scale by pinching as when the page opens it is usually zoomed in/out for some reason. Is my understanding of what is happening here correct or is there some problem with it. Having it predefined size takes care of different mobile screen sizes as viewport is always same, fits into page width and only scale seems the problem, that is unless I'm missing something here.
I also should have mentioned that I need to do only portrait and make it only option, so no landscape view (that will be another question).
Would love to know your thoughts and I appreciate all the answers so far.
This is called Responsive Web Design when a website adjusts according to screen size...
You can make this kind of responsive website easily through CSS3 Media Queries:
How to write CSS Media Queries for common types of devices
Responsive Web Design: What It is and How to Use It
If you google for Responsive Web Design you will find lots more information on this topic. It's really an amazing method to make your website look great on all devices from small to large screens.
We have a series of tutorials on creating web pages using responsive web design. If you want a quick introduction to it checkout Introduction: Creating a Responsive Web Design, it lists common mobile phone and tablet sizes, so it might lead you to the answer you need. You can find the link to our tutorial series in the article. The solutions provided use Bootstrap in order to provide easy to create pages. And it also provides free samples of responsive web design pages.
I hope this helps to provide the answer that you need, if not, then please let us know if we can provide any further assistance.
Regards,
Arnel C.
InMotion Hosting Community Support Team
Specify the width in percentage say width=100%,which automatically adjusts the width with the screen.
I like to use a lot of unique graphics on my pages, which often results in making different page sizes depending on available screen width/height.
Here are two examples:
http://www.uvm.edu/~areid/homesite/ - the image floats at the bottom of my screen but on a larger browser, the image floats near the middle making it look off. It looks best when the bottom of the window aligns with the bottom of the image
www.stevenlebel.com - it loads two different pages depending on what monitor size is detected.
This seems like a lot of redundant coding. My question is, how can I make sliced/Photoshop images transition well to different screen sizes. Does Photoshop allow you to make DIVS instead of tables?
Can i make each of the slices created by Photoshop grow/shrink when the browser window size changes?
If anyone has any input on creating websites like this I would be very interested to hear what they have to say.
Thanks
Katie
Using a combination of media queries with properly selected breakpoints, sprites or individual images, and even a library like foresight.js you can achieve the results you're looking for.
The media queries will allow you to set up your site for different screen groups with breakpoints set to cover most tablets, phones, etc. You could then load a different image version from a sprite or a separate image entirely. Finally, foresight.js will look at screen resolution and available bandwidth to load higher resolution images for retina browsers if so desired.
set the page size as
.page
{
width:100%
margin-left:auto;
margin-right:auto;
}
Take a tour on mediaqueri.es and find out how others have solved your problem and don't forget dribbble also. I think you know about web designing for PCs, others are smart phones, tablets and TVs. Get some basic understanding of the user interfaces of apps on mobile OSes. Read the Android Design, App Design Strategies for iOS and Designing UX for apps for Windows 8. After that I think you'll have a proper design to solve your question. Then learn about css3 media queries, start coding with html5boilerplate and start from the mobile design. Good luck!