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.
Related
I have a question that I have searched for hours and can't find any solution to my issue.
I am trying to make it so when you resize the browser the mobile versions and break points don't show when on a desktop.
So when you're on a desktop you should be able to resize the browser to a point where you will have to scroll horizontally, rather than showing a mixture of desktop and mobile version. apple.com does it where when you resize the browser it only goes so small and you never see the mobile version. Which you shouldn't because you're on a desktop.
Here is the site:
http://www.avrs.com/
To recreate the issue you can resize your browser and at about 1000px it breaks and is ugly. You may also say that I am doing the display: none; wrong which you are welcome to inform me of how to fix.
Also I am familiar with the http://getbootstrap.com/css/#responsive-utilities. But they didn't seem to fix this issue either.
There are several techniques to achieve what you want. The easiest is to use CSS media-queries with specific properties.
Usually min-width or max-width are used for the CSS breakpoints to make your website mobile-friendly (Responsive Web Design). If you want to avoid this on desktop browsers you can use different properties with values specific to mobile devices:
min-device-pixel-ratio
min-device-width
orientation
This source will provide more relevant information: article on css-tricks.
Another question is: Why would you want to make your website unresponsive and not user-friendly like that? In year 2014 I (and pretty much most of the users) expect websites to adapt to the browser's window size.
Scenario: I really like browsing websites with my browser on one half of the screen and eg. chatting with someone or watching a movie on the other half.
Consider this point. I think it's better to improve your website so it works nice in all different resolutions because you can never assume anything about your users and their devices (smartphones, tablets, netbooks, laptops, desktops…). Nowadays I can easily get a smartphone with higher resolution than my desktop computer, or a laptop with a touch screen.
The devs at Apple are using max-device-width (plus other media query rules, like dpi, min/max width, etc.) to determine if the mobile version will be shown. Because desktops typically have a larger physical screen, the max-device-width rules will rarely be shown on desktops (but it isn't full proof, as shown below - You'd want to look at adaptive design for a separation between desktops and mobile devices...)
You can test this by setting your resolution to something much smaller. Here's an example on my Macbook Pro at 720px x 450px (via Display Menu) running Chrome.
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
I'm newbie for developing mobile website. I very confused between two methods because I dont have any experience this it. Whats more better between two methods: css query when we using all of width device in css file or using jquery mobile that use php technique for differented user that use desktop or mobile [user->php?->mobile use jquery mobile/desktop use css standard]?
Many thanks for this answer
I will classify methods by their importance, from most important one to less important:
Client side detection
Using Modernizer javascript library to detect mobile / desktop environment
Server side detection
Using Modernizer Server or WURFL. Little complex then first solution but much more detailed (if you need more data about used device)
CSS media queries
Bad solution to detect desktop /mobile devices. Current mobile devices can have screen resolution equal to desktop platform
JavaScript based browser sniffing
Worst solution possible. Specially if you want to make distinction between smartphones and tablets.
To find more about this solutions, read my other article/answer with examples: https://stackoverflow.com/a/15055352/1848600
I have to post an answer in here since this comes first in search engines and accepted answer is not accurate.
There are two main concerns regarding responsive designs:
Content: Content should be restructured based on the width/height of the view port so the user can view the content without the need of constant zooming in and zooming out. This needs to happen solely based on the resolution of the view port regardless of the device. It could be a mobile device or a small window in desktop. This mainly involved the look and feel of the website and it is absolutely fine to use media queries. Even IMHO it is the best to use media queries to have the separation of concerns between your view and logic. No web designer likes to see random width or height showing up on their html elements during debug without knowing where are they coming from. Media queries will help you to resize the elements and show or hide them; however, in some situations you may need to move elements around; I usually do these using ng-if or ng-switch in angular js in combination with modernizer.
Functionality: If you need to turn on/off features based on the device functionalities, do not depend on the viewport specifications; use the vast libraries available in JS.
On a side note smartphone browsers seem to render at far lower resolution than actual device screen dimensions. Bust out a quick JS to show you your window resolution and run it on your phone.
Example: Chrome runs at 360x640px on my android screen of 1440x2560px.
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/
I am trying to make my website resize on handheld divices but form some reason its not responding to the stylesheet.
If you take a look here: responsive design link and put www.sofiamillares.com as the site test, the top lines get cut off and everything looks super big.
Can some one please enlighten me on why is it doing that and what would be the easiest way to fix it?
This is happening because your design is not completely fluid.
Only your container div will adjust with the width (a bit)
To fix this quickly, you could
give your divs percentage widths, so they scale with the screen resolution
float your square boxes at the bottom, so they will stack on smaller screens
consider using media queries or some js device detection to target mobile devices and send them a modified css stylesheet.
Get some ideas here: http://mediaqueri.es/
As Jason suggests, creating a mobile specific version of your site is usually the best solution. You can then test the user-agent string for phrases like "android" and "iphone" and re-direct the user to your mobile site. There are libraries available for JavaScript as well as many server-side programming environments (PHP, ASPX, etc) which do all sorts of browser detection for you.
When building a mobile site, you'll of course want to make the page lightweight so it'll load quickly over a mobile data connection, and format it appropriately for a smaller screen in portrait orientation.