Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
There are 2 ways in which we can implement a fluid design (one that would adjust itself to the screen size on which it is viewed on);
Approach 1:
We can just use the available browser size (or viewport width/height) and accordingly define our CSS....
This is equivalent to using say a CSS #media max-width:320px
In this approach, even a desktop browser which is squeezed to a very small size would display the same design as on a mobile device
Approach 2:
We design our CSS based on the device which it is viewed on (desktop/mobile/tablet).
This is equivalent to using say a CSS #media min-device-width:768px
So if you see, there is a difference in how we are identifying which CSS to apply based on either "width" OR "device-width"
My question is NOT about media queries and HOW to apply them at all..
My question is which out of the 2 design approaches should be the preferred one, any PROS/CONS for either of them?
Should we design for a device OR should we design for the available browser area ?
I prefer the "design for available browser area" approach, because you shouldn't force the user to maximize his browser window to fully view your website even though there would be a CSS for smaller browser areas (but you don't use it because the user THEORETICALLY has more screen space).
This not only affects desktop users with widescreen monitors but also tablet users. E.g. Windows 8 will bring a convenient function to scale the browser to 2/3 of the screen width, which might be too small for your website to display properly.
I would always design for the available browser area. The mobiel device market and also hardware manufacturing ( higher screen resolutions and screen ratios) is constantly evolving and trust me designing for a device will put your website in a mess in a short period of time.
Let me know what your final decision will be as I am really interested in this subject.
I am leaning towards a mobile first approach or rather a minimal non device specific one. Small style sheet and the site built for mobile first then adding things in for the higher resolutions via media queries.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
At the outset let me clarify - please do not point me to links about responsive designs. I have done enough googling for a life time, yet am here. I am looking for specific tips, not tutorials.
I had a fixed width layout web design till yesterday when a Google search result of my site announced that my site is not mobile friendly! And I took the Google mobile friendly test as advised. Of course, my website was declared unfriendly to mobiles as it would mean horizontal scrolling for users. However when I tried to make all my fixed width including body, containers etc fluid by using percentage, it looked splendid on my laptop. But browser resizing and mobile screen resolutions now make my pages look like hurricane hit!
I am hating the fluid thing and more so ever the responsive design thing! So much work in trying to decide how to redesign and still not able to make things work. I have tried using viewport, #media screen only, a separate CSS for specific screen size etc. I'm just about to explode! I have a website with a couple of thousand pages. Though I have common header and footer, I can't change the html/CSS of the inner parts of all pages. I am not able to even make a decent home page.
So my question is, is it still possible to have fixed width layout and still become mobile friendly ? That way I don't have to tear my hair to please Google! Or is there actually some tips to easily change my CSS to a responsive CSS or some converter program or CSS checker and adviser, etc? I believe Stack Overflow is a fixed width design and they still don't seem to have any trouble.
The site is here.
To answer your question, yes you need to have fluid measurements in order to create a mobile friendly site. There are certain elements that can have fixed measurements (i.e.: height of nav bar), but most need to be fluid, so that it can properly be displayed in both desktop and mobile settings.
The main problem with your site is that your grid is not properly done. It is incredibly time-consuming to create your own grid with rows and columns. I would recommend learning Bootstrap, a common CSS/JavaScript framework. Just the grid system alone (built only on CSS), would immensely cut down the time it would take to build your site, and fix most of the problems that exist due to your containers/rows not being responsive.
You can download Bootstrap at http://getbootstrap.com/, and in addition learn the grid from W3Schools http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I just learned about responsive design. My question is what steps does a HTML designer has to do to make a design responsive?
It appears that a responsive design is all about using #media queries and controlling the flow of elements on the page if it gets resized by setting max-width, min-width and manipulating floating, margins and padding depending on browser window's size.
Is there anything else besides #media query that needs to be done for responsive design?
Responsive Images (different images in HTML for different situations) is an important one.
Few important bits :
Use of srcset attribute for switching between different versions of the same image.
http://responsiveimages.org is a well of resources on this subject.
Use of automation tools for imaging - One of my favorites is Grunt and here is a nice read about it: http://addyosmani.com/blog/generate-multi-resolution-images-for-srcset-with-grunt/
It really makes a lot of difference when user on mobile opens a page with images that are sized for it, less data and well faster loads :)
Tools like Grunt may seem like they take some work to setup but once you start working with it its so easy and fast.
More reading material:
https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/image-optimization
http://blog.cloudfour.com/responsive-hero-images/
Absolutely. There are three main tenants of responsive web design from Ethan Marcotte's original book, Responsive Web Design (abookapart.com/products/responsive-web-design). They are:
1 - Fluid Grids - percentage based widths instead of pixels for your layout/grid. This is arguably even more important than the media query as it allows websites to be fluid and not fixed. So smart phones and tablets come in too many sizes to count, so having a fluid layout makes sure your design can fit nicely at different device widths.
2 - Flexible images - which are basically images that shrink when the browser get smaller. There are plenty of challenges around images in the context of responsive, which is why #Ivan86 smartly recommended using the srcset attribute on the image tag, which I also highly recommend but also maybe wait on that until you're comfortable with the basics. Since you're just starting out, let's keep it simple with 'flexible images' which are images that are set to max-width: 100% with a parent container around them that is % based. This allows the image to shrink as the parent container (div, figure, etc) gets smaller. However, if you do happen to be interested in srcset I posted two articles on this recently: www.richfinelli.com/srcset-part-1, http://www.richfinelli.com/srcset-part-2/ which explain how to use this new attribute.
3 - Media queries - as you said, are used in your css to change the layout based on available browser width.
As I think you're finding out, once you get in to responsive web design you realize there's multiple layers of challenges you can find yourself in. But I recommend buying Ethan Marcotte's book from abookapart.com to get a good jump on it. Very short and actually funny.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
When building mobile application for Android or iOS we must provide images for several resolutions (mdpi, hdpi, xhdpi..2x, 3x..etc), beacuse mobile devices do have different resolutions...
Why we don't have to do the same task when building responsive web site (provide images for different resolutions) ?
A solution to do this has been proposed some time ago now, as it is a totally relevant use-case.
The answer to your question about "why we don't have to do this" would be, "we do have to do this", as pixel density differs on bigger screens too and especially for responsive pages, there is need to provide different pictures (not just different resolutions) that fit the content better (commonly referred to as art direction based selection).
This is why the <picture> - element (link to w3c HTML spec) exists and has added support for various attributes like media-queries, multiple sources and srcsets for different screen densities, as we use them on mobile pages.
Additionally, srcset and sizes - attributes exist for the <img>-tag as well.
This page (usecases.responsiveimages.org) describes the different use-cases for this.
The "right" approach will always depend on what you want to achieve, but at least offering different resolutions for varying pixel-ratios should be a standard in my opinion.
So these elements and attributes give you tools to select your image based on
device-pixel - ratio
viewport
context (completely different pictures, not just resolution)
image-format
and you should make use of these tools, no matter what device you're targeting.
Note that the browser support for the picture-element is getting better and better, but is not complete now (at the time of this writing, only Chrome and Opera have it fully implemented when it comes to Desktop - Browsers, Firefox has it implemented but still locked behind a flag, this should change with FF 38). There is a fairly well working polyfill though (https://github.com/scottjehl/picturefill)
tl;dr We really should do this, no matter what device and modern browsers give us very competent tools for doing so.
Why we don't have to do the same task when building responsive web site (provide images for different resolutions) ?
Actually we do, its called retina ready design.
Here three things are to be understood.
1. Pixel density
Pixel density is the number of pixels a display can fit into a fixed distance. This is most of the time measured is PPI (Pixel Per Inch)
2. Resolution
Resolution is a simple count of the number of pixels across the entire width and height of a device.
Now, to further explain this concept, lets take an example of two tablets of same dimensions, say 7 inch tablets, both are physically identical in width and height.
Now at a glance these both tablets may seem quite identical, but first one (Tab-A) has a resolution of 320 x 480 while other one (Tab-B) has a resolution of 640 x 960. So These directly affect the PPI.
What this means is that the Tab-B is cramming (displaying) more (double) no of pixels in the same physical dimensions, effectively increasing the PPI.
So if we choose an icon of say 150 x 150px and display it on both the devices, the same icon on Tab-B shall(should) be half the size of the same icon displayed on Tab-A. With this, the user of the Tab-B shall have double the content of what the user of Tab-A has.
This may sound good, but we must remember that the user of Tab-B has everything half the size of what the logo was originally intended to be, so now he has to exert his eyes more, in order to figure out what that logo is about. But thats not the case.
Here enters the Third concept.
3. Viewport
In my own view/understanding (for lack of official def), A viewport is the virtual resolution that your browser renders, irrespective of the native device resolution. This is supposed to solve the problem of "too high resolution making objects too small".
What this does is that, it renders the logo(and every other thing) on Tab-B the same physical size as Tab-A, effectively stretching the graphics.
Now if the graphics were vector then they would scale seamlessly, but if they are images, then they create a shabby/jagged edges making the images look bad.
This is where you need images 2x the resolution.
So, Coming back to your problem, The difference between the viewport of a normal desktop and its native resolution isn't much.
You should not post the question with a (false) answer included:
We don't have to, but we should create and use images with higher resolutions for all devices that may have pixel ratio>1 because it is not rare that those devices display images using much more pixels than it supposed to. Even if the pixel ratio is 1, all browsers have a zoom feature, which also requires high(er) resolution images.
This means that simple image that we define as:
<img src="myimage.jpg" style="width: 200px; height: 100px;" />
may be displayed at 400x200 px or more. Check some common device pixel ratios.
Therefor all the images used should be at least 2x width, 2x display height (which means 4x larger). If possible, for vector images we should use SVG or icon fonts.
We can also target devices by pixel density using CSS media-queries (short article here. Personally, I do not care that much, serving few Kb or Mb more is nothing to current internet speeds (and will mean nothing in years to come).
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Im new to converting from photoshop to CSS, hopefully someone could help me.
I have many layers in photoshop and I need to convert them to CSS. Many layers include images which are around 2500px width.
I am using bootstrap so naturally my website is responsive. Now should I leave the width of 2500px and add a 'img-responsive' class? It seems to work (the class scales down the image), however the image size is still massive and it takes ages to load. Should I decrease the width and height of those images? Would that impact user interface on bigger screens?
Thank you!
The procedure is to build a website that fits the design.
Do not simply take a PSD layer, dump it to a giant image, and put it on your page. Interpret the design and decide how your page should be built. You need to make decisions about what should size dynamically and what should stay static. It's up to you to figure out what works best, based on the design and your skills.
If you want your images to be fluid (responsive is not so relevant here), you can set a width to your images, but keep your height to auto; they will resize to that width. So:
img{width:100%; height:auto /*default*/; max-width:2500px;}
See here: jsfiddle
You have a number of questions, so I will answer them in list format:
Q: "Should I leave the width of 2500px..."
A: Bootstrap current version 3.2 has a max container width of 1170px, so I'm not sure why you have images at 2500px unless they are backgrounds or something similar. You should size your images to fit the layout of the largest desktop size you are supporting.
Q: After scaling the img down with a CSS class the size is massive... "Should I decrease the w & h of those images?"
A: Scale images to fit largest desktop layout, then in Photoshop use "Save for web" to properly compress image size. For JPGs I typically use a quality of 65. If it is a bg img, you can get away with using a lesser quality setting (40-50), just play with it.
Q: "Would that impact user interface on bigger screens?"
A: Yes, it would negatively impact bigger screens. If, for instance, you saved your full-width header image at 768px to accommodate tablets, it would look pixelated (blurry) on a desktop.
Pertaining to images there are several ways so you don't load large images for small devices, here's two.
Use server side detection, like https://github.com/serbanghita/Mobile-Detect/ or http://adaptive-images.com/ and deliver appropriately sized images. The latter does much of the work for you. Both are php, there are probably forks for other languages.
Then, even with this, IMO best solution, you'd use a class that sizes the images fluidly, such as "img-responsive" or your own making to make it fluid.
Use mobile first css and use background images, you'd use percentages or vh (or combine for fallbacks) on the container and use background-size:cover and then start smallest to largest with media queries. Make the images 600px, 1000px, 1600px, and 2500px or whatever and then make min-width media queries to load up background images. Use Modernizr to create a fallback for browsers that can't understand background-size css (if you are supporting IE8 or other legacy browsers).
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I've read that min-width media queries means you are designing from mobile up, and max-width media queries from desktop down. But is the result of min-width and max-width media queries not basically the same if you keep good design practices in mind?
Is one of the two recommended over the other as best practice, and why?
In terms of mobile vs desktop design, mobile first helps you to really think about what's important first, which is of course the content. Instead of taking things away, you are now designing building upwards.
min-width and max-width media queries are used in the way you've said for a pretty obvious reason when you think about it. min-width is good for mobile first because you're adding in elements, and to do that with mobile first you'd have to specify which elements display only on a bigger screen - min-width specifies a bigger screen, et voila.
So, in answer to your question, it depends. If you agree, like most, that mobile first is the best design principle at the moment, then min-width is the choice you should make, so you can add in the content to the next screen size up. Vice versa, too. If you think neither is the best way, then the world's your oyster.
You can use both in your media query. Then any device that falls in the range of the min and max will use the following css. You can set as many media queries as you need.
#media (min-width: 768px) and (max-width: 979px) {
.hidden-desktop {
display: none;
}
}
For the example above, any item with the class .hidden-desktop will be hidden on these devices. This my be a feature you only want to be visible on lower resolution devices.
I personally use ranges over a single min or max-width. There are so many different mobile devices out there, I think the design will dictate how many break points you need to set. I usually end up with 2 - 4. 1 for handheld devices, 1 for tablets, 1 for desktops. Depending on the design I sometimes add query for large displays like 27in. monitors etc...