I have grasped @media for designing for different device sizes. (Fixed widths)
I have just seen a Responsive web site design on a YouTube video that shows the content resizing ‘pixel-by-pixel’ as the window width is resized.
Should I be looking into Responsive website design for pixel-by-pixel design or is set-fixed widths the way forward?
Also, I currently cater for desktop and mobile sites but should I cater for Tablet sizes too. My thinking currently is people with a Tablet will like to see the desktop version.
The best approach IMO is to avoid thinking about specific set sizes of devices and create a site that is flexible which will adapt to any screen size or orientation.
There are too many different devices at different sizes to think about fixed sizes.
Use % for widths not fixed width, and it will start to happen, though there is more to it than that.
Yes, media queries will likely play a part too, as you will at some point want to alter things, like show/hide re-size or re-style some elements or alter layout.
As mentioned above forget about devices there are just too many to cater for individually and instead concentrate on your design. It’s your design that dictates where a breakpoint should be and not some arbitrary device width that may or may not exist.
Just create fluid pages (max-width is all that’s needed for the wrapper) and then open and close the browser window and if at any point the design looks awkward then throw in a media query and make it look better. If you do that all the way down to about 300px you will collect almost every device that exists now or in the future (apart from the apple watch).
It really is a simple a process as that but of course that doesn’t mean its always easy:) Usually with a few well chosen media queries and a consistent design approach you can make the site responsive all the way up and down without ever knowing about a device.