There are many articles the web about Responsive Design, and how to use css media queries to accomplish your goals. However the majority of them seem to have been written in 2011, when responsive design began to get popular.
Since 2011, a lot of different devices have been released to the market with a large variety of device widths and various ppi's the media queries of 2011 aren't necessarily going to cover. Mostly I'm referring to large format mobile devices like the Galaxy Note I/II as well as 7" tablets and even high ppi devices like retina displays.
Are there any resources out there that maintain up-to-date css media query code that would be used in a best-practice approach to covering most devices adequately?
Responsive Design is not just about 'media-queries', Responsive Design encourages developers & designers to embrace accessibility in every possible way.
I highly suggest heading over to twitter(because that's where all the good conversations take place) and making an account right away and follow these amazing folk:
In no particular order after #beep:
#beep - Ethan Marcotte, the guy who popularized Responsive Design.
#RWD - Ethan Marcotte's account where he tweets about stuff related to Responsive Web design.
#lukew - Luke Wroblewski.
#brad_frost - Brad Frost.
#Trentwalton - Trent Walton.
#adactio - Jeremy Keith.
#scottjhel - Scott Jhel, creator of Picturefill a polyfill for responsive images and some other cool things.
#wilto - Mat Marquis.
#smashingmag - Smashing Magazine.
#grigs - Jason Grigsby.
#globalmoxie - Josh Clarke.
#chriscoyier - Chris Coyier, everything CSS..
#malarkey - Andy Clarke.
#jordanmoore - Jordan Moore.
#viljamis - Viljami Salminen.
There may be a few who I've left out, but this is a good place to start! You are bound to come across some good conversations or links or articles related to responsive design at any point of the day.
Also, they write about responsive web design on their websites almost daily so be sure check them out too. Right there, you have plenty to read.
Some good reads:
Conditionally Loading Content
Conditional Loading for Responsive Designs
Creating a Mobile-First Responsive Web Design
The EMs have it: Proportional Media Queries FTW! - Recommended reading.
This is Responsive - A round-up of links and stuff about responsive web design collected from all over the web, curated by Brad Frost.
As for the date of the publications, they are not relevant; if the content is obsolete or the methods depreciated, the author will most probably remove it or mark it accordingly.
Edit: And a few good tools to test your website:
Responsive.is - Test how your design performs on various screen sizes.
responsivepx.com - Know exactly where your design breaks by entering screen widths in 'px'.
pxtoem - Convert pixel units to ems.
Izilla Media Query Debugger - This plugin displays the size of the browser window(kinda like responsivepx.com, but works locally).
Opera Mobile Emulator - Test your websites on Opera Mobile.
Opera Mini Simulatr - Test your websites on Opera Mini(for lower end devices).
Please keep in mind, do not design for popular screen sizes! Insert break-points(media-queries) when your design breaks. Relevant: http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid
There is no such library of Media Queries that I am aware of, and here is why:
The best-practice approach to responsive design is to use media queries as they become necessary for your design. A proper responsive site should resize based on the users screen size and if and only if the UX needs adjustment, then a media query should be used.
To find your design's breakpoints, resize the browser until the page becomes difficult to read, clipping occurs or some other UI/UX problem is apparent. Note the screen dimensions and make the necessary adjustments for that breakpoint.
Some reading:
http://webdesignerwall.com/tutorials/setting-breakpoints-in-responsive-design
If you don't wish to use this approach, you could look at frameworks as source of best-practices. One that I like and use often is Foundation http://foundation.zurb.com and there are others like Bootstrap http://twitter.github.com/bootstrap/
These are excellent tools, however you will find yourself falling back and discovering breakpoints that work better for your design in the end. Foundation is an excellent starting point for kicking off a project.
Further reading:
http://bradfrostweb.com/blog/mobile/beyond-media-queries-anatomy-of-an-adaptive-web-design/
http://bradfrostweb.com/blog/mobile/anatomy-of-a-mobile-first-responsive-web-design/
http://www.simple-talk.com/author/edward-charbeneau/
http://www.lukew.com/ff/entry.asp?1562
http://www.lukew.com/ff/entry.asp?1485
Bootstrap from twitter is probably a good starting point for you.
http://twitter.github.com/bootstrap/
Related
I recently started using Tailwind CSS and I notice it states (and recommends) to use unprefixed classes for mobile and prefixed classes for larger screens.
This is in contrast to Bootstrap which does the exact opposite.
What are the pros and cons of those mobile-first approach?
Quoting bootstrap 5.0 official documentation here
Mobile first, responsive design is the goal. Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.
Pretty much all the CSS frameworks use that kind of approach nowadays.
It's always easier to have some basic layout for smaller screen resolutions and bigger one adapted w/ some additional styling.
Also, this website is saying that 55.73% of the web traffic is mobile. Even the 41.46% of desktop stats do have some small enough resolutions to fit styling considered as "mobile" (like the 1280x720 one).
TLDR: make your website look good for the biggest amount of users possible with as less styling as possible, then apply specific CSS for wider resolutions.
I don't know any specific cons of starting by a mobile version but maybe the case in which your webapp is targeted towards an admin kind of layout, who will be used 95% of the time on a desktop.
I'm planning to write a common component library with Vue.js 2.0 and hope the library can work on multiple platforms. This question is about the best practices when it comes to a component's style.
On the PC / browser, We usually write CSS for fixed-width or flow layout with px. On a mobile platform (webview or browser), We usually write the CSS for flexible layout with vw / rem.
I see, some components only suit either one ( PC or mobile platform ), but still some components are common and versatility, such as Button, GridView, InputField and so on.
For example, there is a Button component that has a default padding style. In order to better adaptability, should I set the padding value by what unit? px? rem? For the goal, what is the best practice to do the things?
In fact, this question is not only related to Vue, but it's relevant for any frameworks that allows developing components, such as: React, Angular, Ember, etc.
I suggest that you stop thinking of browser / PC layout and mobile apps as being different. As it looks, you can't be sure what form factor's going to come next for both of them. That's true even for platforms that have been proven to be consistent, such as iPhone / iOS.
Responsive web design is the same in both environments, your layouts should be 'prepared' for a change in form factor.
Responsive web design is not different from React to Angular or anything in between. The only thing that differs is how CSS actually gets in your app.
No matter what you're designing for, you should:
Respond to the needs of the users and the devices they're using. The layout changes based on the size and capabilities of the device.
The basic principles are: Adapt, respond, and overcome.
Technical perspective
In Vue the way to go is: isolate components, including styles -> use scoped styles whenever possible <style scoped></style>.
Then (not specific to Vue), use fluid layouts however you want; some people choose %, some use vh / vw or em / rem. As long as it's fluid, you'll probably be fine. Many choose vh / vw for containers and use percentages afterwards, but there's no default pattern. With percentages, some people find it easier to mix in calc(), which can be a useful responsive tool.
Regarding your button example, it's probably a good idea to use rem or em as a default. However, for some components it might make sense to use px - don't be afraid to mix and match. This can save you a lot of code and there's no golden rule about it.
Your breakpoints shouldn't be shaped after devices, instead figure out where your content can be presented better. This way you'll build a more future-proof layout, which can turn out to be a nightmare to maintain.
Choose whatever makes you feel comfortable.
It's up to you to combine your tools and get the CSS to work for you / follow certain RWD patterns.
Wrap up
That being said, here are some patterns you can follow when building your responsive apps:
Mostly Fluid
Column Drop
Layout Shifter
Tiny Tweaks
Off Canvas
There's a course I encourage you to take if still in doubt.
In this course you'll learn the fundamentals of responsive web design with Google's Pete LePage! You'll create your own responsive web page that works well on any device - phone, tablet, desktop or anything in between. It might feel a bit slow in the beginning, but you'll learn a lot by the end of it.
I'm just now diving into responsive CSS and design, and I'm wondering how I'm supposed to figure out various device widths out. I don't want to spend all day testing every single mobile device possible, I just want to get the responsive layout enough to where it works.
I saw some sites using #media only screen and (max-device-width: xx) but it seems that limits it to very specific resolutions, not actual browser window sizes.
Any advice at all would be great. I'm not new to web development or CSS, but totally new to responsive design.
It would seem that you're trying to figure out where and when to apply your breakpoints.
Rather than testing resolution on a bunch of devices why not build a responsive design that is acceptable at every resolution? There are no magic breakpoints that fix responsive websites for every device because every responsive website is going to differ depending on layout, content, etc. and there are tons of different devices with varying resolutions.
You might be thinking, "what the hell, I am not going to go pixel by pixel and check my website," but that's not really what I mean.
Finding your website's breakpoints:
Jump into a browser, navigate to your website, and open the console
Resize the viewport to a very low resolution. 320px is a good starting point.
(Note: To get the size of the viewport type window.innerWidth in console. See Resources for more ways to enhance debugging your design)
Analyze your layout. How does it look at this resolution? If you need to change the layout at this resolution then its time to add a breakpoint!
Slowly stretch the browser window until something breaks or looks horrible. At this point you'll need to insert another breakpoint.
Repeat step 4 to your heart's content
Keep in mind:
The point of responsive design isn't to make your site look good on all devices, its to make your content look good anywhere - Sam Richards
Resources:
Responsive Web Design - Programming with Anthony
Responsive Typography
Logical Breakpoints For Your Responsive Design
As mentioned in the above video, Modernizr is an awesome JS library that helps in detecting device-specific features
Responsive Design View Feature in Firefox 15+
Responsive Design View Tutorial for Chrome
Does anyone know of an open source JS solution to replicate the new "regions" css proposition put forward by Adobe?
I would really like to be able to flow inline content from one region to another for the development of magazine-like responsive layouts. I've found 'columnizing' plugins that create columns without CSS but haven't been able to find anything that flows text from box to box.
First think in terms of what devices are being used the most in 2014 and beyond.
Cellphone - Mainly Portrait Mode
Tablets - Portrait or Landscape Mode
Laptops, PC, TV - Landscape Mode
Responsive design and media queries already cater for most scenarios.
Float text blocks in larger modes but fit the text in the limited screen real estate in cellphones portrait mode.
2 x Columns in cellphones (which dominate already) portrait mode looks awful.
Now css regions are only a spec
It breaks the main rule of separating content from presentation by wanting to flow text through interlinking divs.
My suggestion is stick to responsive design which is supported everywhere already.
Adobe needs to make a lot of changes to expect the W3C to ever support it.
In its current form its completely disruptive to web design and will damage the html5 and css spec irrevocably.
However CSS exclusions (shaping areas) does have some merit (if it works with media queries) and perhaps Adobe and partners will find a workable solution for this feature sometime in the future.
What's the best way to make an existing website fit for mobile devices(netbooks, mobile phones based on Android, Iphone, Blackberry etc.)?
Without going as far as implementing a mobile framework I would suggest taking advantave of CSS Media Queries which will allow you to serve up different css depending on the wdith of the browsing device.
A good start would be to look at the LessFramework which has taken all the hard work out the grid calculations.
Make it flexible.
You can detect different device widths with CSS media queries: https://www.w3.org/TR/css3-mediaqueries/#device-width
Less normative explanation: https://mislav.net/2010/04/targeted-css/
Great blog post: https://webdesignerwall.com/general/the-wall-is-redesigned
The CSS3 flexible box model can also be your best friend.
Twitter Bootstrap will also give you some nice out-of-the-box responsive functionality, meaning that the site's presentation will adjust based on the type of device and the size of its screen.
And I'd recommend checking out this book.
Current now many tools available, but how to keep good user experience is the most important.