In what is the pip.io UI built? - javascript

Can anyone tell me if the http://pip.io UI is built in AJAX or only JavaScript?
The reason I ask this is that I noticed the UI is scalable in the browser. So with different screen resolutions it displays the same.

Do you mean scalable as in it works with multiple resolutions? The UI is designed with CSS which allows it to do so. The rest of the frontend is built with Mootools, which handles all the fancy animations and api calls.

We set the minimal height and width to accomodate for the design. It is a technical decision because at a smaller resolution, some areas won't be able to render properly. Also since most monitors are at least 1024px wide it shouldn't be an issue with most users.

Related

how does responsive design work?

After checking a few dozen articles I am still in the dark how to actually implement a responsive ux-design (I really understood the layout part). A simple example: Bootstrap (CSS framework) collapses toolbar buttons into one drop-down button on mobiles. That's all I need! I'd like to understand just the basics of this very behavior. Does it requires only CSS, or do I need JavaScript too? I actually don't know any other way than JavaScript.
In my apps (IDEs), I usually have lots of toolbar buttons and at a certain breakpoint or width I guess I will have to put them just into a dropdown button, in one way or another, right? The obvious things such as re-arranging layout containers per break-point/width are a piece of cake with CSS; at least this is how it looks.
Update, I am working only with JS based widgets. Mostly generating all HTML.
You can make multiple (for different screen sizes) menus, dropdowns or navbars etc. And then use media queries to just display one of them at a specific screen width ( ie display: none for others). And I think Bootstrap works similarly (It might also use JS).
In this way your design will become responsive, although it will increase file size.
Check GRID. It's a (great) simple guide to responsive design.
http://adamkaplan.me/grid/
After doing lots of research and development; there is basically nothing standard out there for a JS based solution. I checked Dojo, Sencha and some others paid stuff. At the end I did end up with custom JS code. Media queries did only help to some degree, actually just when it comes to moving and sizing layout containers and pictures; but that's pretty much it. Its even better to do it in JS only since calculations become far more accurate and interfere less with your Code.
So to me 'responsive design' has actually no mean at all; its great for regular web-sites but really not for complex ux.
back to square one,
g

How to deal with different viewport sizes the best way?

I am Programming a webapp that uses a mobile-first design principle.
I have tested the design with my primary devices but then I discovered, that other devices with nearly the same display displays the page completely different.
The problem is because of the device-pixel-ratio, the app toggels to another media query and so the margins just look strange. On the Picture that does not look much, but on the device it really looks strange.
Is there a way I can modify the device-pixel-ratio within my javascript or css?

Can someone explain responsive functionality over responsive design?

I'm only just getting my head around how to build a responsive design site and in addition to a changing layout, I've also been tasked with functionality which should be responsive at various sizes. For example, on desktop, a link might not exist on a particular element, but then at mobile size, it should not only exist but it should also do something it didn't do at larger sizes.
I can understand using media queries to change the size or position of any particular element in CSS, but how does one go about changing functionality (i.e. JS & HTML) at various breakpoints?
(I'm not sure if the term exists or not, but for lack of a better name I'm going to call it responsive functionality.)
You're describing the difference between responsive design and adaptive design.
Responsive layouts respond to different screen sizes (using flexible
grids and media queries). They will often hide content or apply
different CSS rules on smaller screens.
Adaptive layouts adapt to different screen sizes and/or devices by taking a premeditated approach and optimizing the content that is served to the user.
For example, a responsive design might simply hide a sidebar on smaller resolutions while an adaptive design might show content specific to mobile devices (because the website knows the user is on a phone).
There are some good blog posts on the topic:
The biggest similarity between the two methods is that they both allow
websites to be viewed in mobile devices and various screen sizes,
ultimately providing visitors with a better mobile user experience.
Where the two methods differ is in their delivery of the
responsive/adaptive structures: RWD relying on flexible and fluid
grids, and AWD relying on predefined screen sizes. One of the main
distinctions between the two is that RWD might take more code and
implementation strategies with the fluid grids, CSS, and flexible
foundations, while AWD has a streamlined, layered approach, which
utilizes scripting to assist with adapting to various devices and
screen sizes.
Responsive functionality could be achieved a couple different ways:
You could use media queries to hide and show different segments of HTML that have different behaviors tied to them.
You can trigger your behavior with javascript where the javascript in the event handler examines the size/platform and decides what behavior to call.
You could dynamically generate different portions of HTML and their corresponding event handlers with javascript based on the size.

CSS/HTML/JS: what to watch out for when building website that will have a mobile layout

I'm building a website that will need to have diff mobile layouts depending on the screen size of the device but I don't want to have to design entirely new layouts for each device. So I was wondering if there are things I need to watch out for that don't convert well into a mobile layout? Or how to set up the original to scale well to smaller devices. Thanks a lot
Read about media queries:
http://www.w3.org/TR/css3-mediaqueries/
Then read about responsive layouts done with purely CSS:
http://css-tricks.com/6731-css-media-queries/
This is basically all about styles and sometimes javascript (if you want to make responsive design)
Take a look on what CSS should be loaded for different devices and how to use
http://podlipensky.com/post/2011/08/25/What-CSS-file-to-load-for-mobile.aspx
http://www.alistapart.com/articles/return-of-the-mobile-stylesheet
And here you can read about responsive web design
http://www.alistapart.com/articles/responsive-web-design/
http://thinkvitamin.com/design/beginners-guide-to-responsive-web-design/

Can I zoom into a web page like IE or Firefox do, using programming?

Simple - I have a layout that is 800 by 600. When I press Ctrl and +, it zooms in and looks wonderful.
I want to know if there's a CSS/Javascript way to do the same? Without the user having to do it (because users will not do it and see the small layout).
Same question was posted by someone Setting IE "Optical Zoom" feature using Javascript/CSS that got no good replies.
There is a zoom CSS property, but it is part of CSS3 and is most likely not widely supported. By setting this on the body element using JavaScript you can zoom the entire page.
I would agree with the sentiments of the answers to the question you linked to though in that it should be up to the user to choose their own zoom settings. If your site is too big/small to see, it indicates a problem with your site design.
You can set all sizes as dynamic (use em for fonts, % for divs/images sizes). Then change the main wrapper and the main font size using javascript.
You can also use CSS switching. Put all the colors and such in one css file. Then create 3 or 4 levels of zoom and inside hardcode different sizes for all the existing classes.
Example:
main.css
a{color:red;}
small.css
a{font-size:10px;}
medium.css
a{font-size:12px;}
Not all designs (in fact I'd wager, none, without targeted style sheets) can cope with the vastly different sizes of screen out there today, from portrait orientated screens at public libraries, to ultra fine artworking Macs with giant landscape screens and tiny little laptops - the latter two often used by executives that have NO understanding of how the zoom features in a browser work and also often have terrible eye sight and little patience.
My suggestion is to use relative sizing like Marcgg suggests. If you're really looking to be super flexible the you could use javascript or browserhawk (or equivalent) to measure the screen sizes and switch out style sheets for those that are really not going to work with your layout.

Categories