Did you ever wanted your web designs to look exactly as you designed them? No matter the device or technical specifications? AsDesigned has a solution!
AsDesigned can make your websites look exactly as you designed on any device. SmartPhone, Tablet, Laptop, Desktop, TV or even bigger custom devices.
The simple iPhone and iPad media queries era is over! With much more devices to support we got into a media queries hell! But there is a solution.
When a designer creates, he takes a lot of attention to all the details, the size of the font, the colors, the contrast between the foreground and the background colors, proportions and dimensions. He tweaks everything until it is perfect, and it is perfect indeed... on his machine.
The problem starts when he needs to present his work in the clients computers and other devices, and things just look... different. The perfect sized font, the perfect proportions, all the design looks too big or too small, too dark or too light, too tight or too loose, and there is nothing to be done but to get into a compromise and make it look the best possible in the majority of the devices. Never again it will be perfect like it was imagined and constructed. The worst thing is, that it will still go with your signature on it.
That was not as it was designed!
The solution is to make everything to look as it was designed in the first place! Lets make no compromises!
asDesigned resolves the misrepresentation of the design in five steps.
The simple fact that each device has its own resolution, size and definition makes a 16px font-size to have completely different sizes between a 15.4" screen with a resolution of 1280x720 and one with 1920x1200, the difference is so big that to look good in one it has to look too big or too small in the other.
This gets even worse when you already have full HD resolutions (1920x1080) in devices of all types and sizes from 5" smartphones to 50" TVs and more. You have all the possible combinations. What I want you to acknowledge is that the resolution by it self is not a solution, by consequence the media queries based in px are not a solution anymore.
The solution to this problem would be to set your site base dimensions in an absolute unit such as inches, so that it has the same size in all devices no matter the definition.
Wait... we already have in, cm, mm, pt and pc, all are absolute units, right? Wrong! These units already exist in CSS but they rely on an old specification that says that all screens are a low definition device, and sets a constant of 96px per inch. Everything is based on this assumption, and it is an absurd... the story complicates so much that I am not going to talk about it, so that we don't loose focus of the problem and the solution.
In the browser we can get the screen width and height that tells us the resolution, but not the definition. To be able to know the real definition of a device, we need to know the screen size. So the first thing that the asDesign component needs to know is the screen size. With that is possible to calculate the definition and know the real size of 16px on your computer.
To calculate the definition, we calculate the hypotenuse of your screen resolution and divide it by the screen diagonal size.
`"ppi" = (sqrt("x"^2 + "y"^2))/("scrDiag")`
Do you use Google Docs or Office Web Documents? Did you ever noticed that even when you set your page size to A4 the dimensions are not correct? (Unless you happen to have a 96ppi device or adjusted perfectly your browser zoom).
The only thing that they need to know is the screen size to make the dimensions correct. :)
Lets see it in action:
Note: This allows us to design on screen with "real" units precision, inches, millimeters, etc.. :)
Ok, you have real units to work with, but how can you ensure that the user dimensions are the same as it was designed?
Well, that has a quite simple solution, you just have to know the author's screen definition.
The asDesign component requires two parameters, the first one is the definition of the author's machine (we will talk about the other parameter in the next section), mine is 147ppi, with that we can calculate the ratio between the user and author's screen definition. Now we know how to adjust the font-size and other dimensions so that it has the same real size in the user's screen as it had in the author's.
`"adj" = "userPpi" / "authorPpi"`
That's it then, this solves all the problems with dimensions! Well, not all... lets continue... :)
To make a design to have the exact same dimensions as it was designed is good, but the goal of a design is not about millimetric precision, but perception precision.
What I mean with this is that it does not matter if that letter has the original size if the user is perceiving differently. For example, from completely different viewing distance.
If we design a website in a 15 inches screen laptop at an approximated viewing distance of 20 inches, and the user will see it on an 50 inches at 75 inches distance, that nice and big quarter of an inch is not that big anymore, is it?
A smartphone in front of your eyes can have the same perceived dimensions as a TV that is far away from you.
In the illustration above, a, b and c have the same perceived dimensions although they have very different sizes.
This is why the second parameter of the asDesigned component is the viewing distance of the author. Knowing the viewing distance of the author, we know how he was perceiving his own design.
Calculating the viewing angle of one unit at the author's viewing distance and the user's, we can calculate the difference ratio and apply it to the global adjustment ratio of the design.
`x = 2 * atan("diam" / (2 * "dist") ) * 57.2957795`
We use the formula above to calculate the angular diameter.
`"adj" = "aDiam" / "uDiam"`
Then we divide the author angular diameter of an unit with the users and we have the adjustment ration to apply to the global adjustment ratio.
This is how we correct the perceived dimension, when the screen is further away the font size and other dimensions are scaled up the and when the screen is closer we scale them down.
Now your design is perceived as you designed it, the perceived dimension and corresponding design and readability are preserved.
Try it yourself:
It is important that you always respect your user preferences when you implement your websites, even if you think that you have the perfect dimensions, you should allow the user to set his own preferences.
Some users like/need to see things bigger, others like them smaller to more space and content on screen. So I implemented the option for the user to set his own zoom for this site, allowing the user to make is adjustment over the designers size (not proportions) preferences. Once again, always respect the user.
Yes, it is not that difficult to implement zoom in a web text editor. So, Google and Microsoft, please just implement it in your web editors, I need it! :)
Depending on your screen size, definition, viewing distance and zoom, you increase or reduce the available space and dimensions of your design, your design should adapt to the new constraints. But all the media queries breakpoints are set to the authors settings.
To solve this problem, we need to recalculate the media queries so that the breakpoints continue to be in the same relative point in your design.
Lets check it:
The growing heterogeneity of the devices and their specific characteristics is making difficult to impossible to design a website that is well perceived in all the devices.
In the beginning there was only the iPhone and things were easy, 320px portrait and 480px landscape, right? Then the other devices came along, but the iPhone/iPod were the only relevant devices. So everyone started making sites supporting smartphones with 320px width and 480px and for laptops, a 960px width layout was enough. But then, the iPhone got a retina display and the iPad appeared, and the retina also on the iPad, and the new iPhone5 with a different vertical resolution. Suddenly, the 320px rule were not "the smartphone dimensions" anymore. And... all the Apple laptops with a list of screen sizes from 11 inches all the way up, and the MacBook Pro with retina. And we are just playing with Apple.
If the world was just Apple, we could still make an (big) effort to make things just for their devices. But the truth is that Apple is not the number one on mobile devices. Android is and will catch up on tablets also still this year, and Android has all the screen sizes and resolutions that you can imagine.
And then Microsoft is coming out of their single mobile resolution to embrace more resolutions with the Windows Phone 8, even dough it always had different screen sizes.
Then there are all the Android Tablets, the 7", 9" the 10" and all others. There are even tablets bigger than 20", cool!
Now Microsoft with new Windows 8, everything will be a tablet or a laptop or both...
Reality is so much different and exciting than it was in 2007.
Now, phones convert into tablets (ex: Asus PadPhone), tablets convert into laptops (ex: Microsoft Surface), laptops convert into desktops (with a docking station), desktops connect to the TV, TVs that are Smart, devices connect wirelessly (or not) to external screens... and... everything is everything and everything is everywhere.
We got to a situation where media queries and responsive design are not enough and the websites are not being displayed as designed. The resolution of the devices is not an indicator of anything, but just the number of pixels (and even that is not 100% true anymore with the new subpixel screens).
This site is a proof of concept that it is possible to fix the way sites are being created by asking the browser makers, that currently are also the OS makers, to give us (authors) a little bit more information about the devices.
Please, give us a setting that make the units as in, cm, etc. to be correct, just like they did with the box-sizing.
You could do: css-units: real;. We need this to set the base units and to set the media queries breakpoints.
When the window is shown in another screen, just recalculate the CSS.
Easy, right?
Then tell us the active profile that is being used (smartphone, tablet, laptop, desktop, TV or custom) in the media queries. Even better tell us the viewing distance. You can have the profiles in the browser with the user settings telling the viewing distance for each profile.
And when the user connects the tablet to the keyboard, the profile changes to laptop and the CSS is recalculated. :D
In this site, you have a toolbar that simulates those values and allows you to feel the advantages today.
Now a personal request, please allow expressions to be executed in the CSS properties. It can be simples, see Sass, Less, etc.. But do what they cannot, pass all the context of execution to the CSS so that we can take decisions based on it. :D
Lets give the control back to the designer and make everything much easier. We don't need more and more units, the vw, hw, etc. are all possible to calculate with "real" units and some math in the css. Or if you want to do it now, with a little javascript.
Everything is possible and not that difficult to make, but all this should be done entirely in the stylesheet.
The asDesigned component is under development so that you can use it in your own projects/sites without having to change your layout. It will inject the controls and make the corrections automaticaly.
This might be even usefull to configure your gigantic outdoor screen to show your webpage with the correct layout and dimensions at 100 feet away! :DThe code for this website and this tool is on GitHub, feel free to participate and make this a success project.
Currently this tool only works with sites that are elastic, meaning that are based on ems from the ground up.
The media queries correction algorithm only converts values set in em.
Do you think this is important to the future of the web? Join the discussion on Branch. ;)