I have a question about bootstrap.
So basically, depending on the device, I want to show a different image. Using media queries, I was the changing the content of the depending on the device's size.
However, I just learned about the visible classes in bootstrap, and I tried them out, and they gave the same result, except that all images are loaded, and they are hidden. So I was wondering: which method is more efficient?
I would say the first method is more efficient because you only load the image that you need based on the device size. It would decrease the number of outgoing requests and allow faster initial page load.
Certainy the Bootstrap classes because it's faster mobile-friendly development. These can be used for showing and hiding content by device via media query, combined with large, small, and medium devices.
They make developers work more simple and simple and the feasibility to hide excess of ifo in smaller devices and vice versa
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 regards to responsive design, if I have a set of large background images that fade between each other on large screen sizes and have them hidden on smaller screen sizes do they still load on the smaller screen sizes? I don't want to use unnecessary bandwidth if the images aren't going to show. It seems that they do not load on my computer, but it is difficult for me to test for every possible setup. If they do load and not show by default, is there any way to fix that? Also, I'd like this to work without having to use javascript, if possible.
"Adaptive Images" detects the user's screen size and automatically generate cache for that particular size.
I have used this previously in some of my projects, it works like a charm.
You can find more information here and here
And you can't avoid Javascript, that's the only solution as per my knowledge. But it is easy, all steps are given in above links.
Yes, most browsers will download images even if you have them hidden.
There is no way to stop image load with just html and css alone. JS is the best way to do this and it is also very easy, so you might not have any choice but to use javascript.
Just incase you decide to use javascript you should check out lazyload, it is very simple to use.
http://www.appelsiini.net/projects/lazyload
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 kind of sure this is not possible but I ask because it seems unbelievable.
I have some elements styled for reponsive design
img {max-width:100%;height:auto;}
but the images have to be different depending on the device (I won't load heavy wide screen images on a phone device).
Since media queries aren't supported inline, I could go for a css background solution, but background-size is not perfectly supported and honnestly it would look more like a hack.
Can anyone confirm that "widely supported device related responsive images" are not properly possible ?
Thanks
If I understand your question correctly, you are looking for a way to deliver a different image depending on the viewpoint.
Adaptive Images could be the solution you are looking for. Easy enough to setup and confirm.
A second possiblity which might give you even more control is Adapt.js . I've used it with good success on several sites. You load a small javascript file in the head of your document. This tests viewpoint width and then dependending on the results, it will send the appropriate CSS file. It has wider browser support than #media requests.
If you could live with using background images, then it would work well, and since you could specify different images for different viewpoints, you aren't up the creek with browsers that don't understand background image sizes.
Good luck!
You could try the Responsive Img jQuery plugin.
It's made to automatically create and swap in different-sized images at different breakpoints, based on the container's width.
If you already have different versions on your image created and on your server, the plugin will just swap those in at the right breakpoint sizes.
Therefore, you can create new images for all the different breakpoint sizes you want, and the plugin takes care of the rest.
It's not CSS, but it gets the job done.
2014 update
There is a nice and new technique here :
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/
It requires a small js, a 1x1px blank image, a few extra markup for img tags, and some .htaccess rules.
Seems to work fine so far.
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!