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.
Related
I'm familiar with two approaches for scaling content in UIWebViews that are on the smaller side (>~320 points in width).
The first approach is to set the appropriate frame size on the web view and the scalesPagesToFit property. This works fine but may easily result in content being presented at such a size that it is not easily consumed.
Another approach is to inject JavaScript to set the content's viewPort width programatically. This works on sites that are intended for mobile presentation (eg, responsive web design). If you're presenting a website that was coded for mobile consumption, the results with this are far superior in terms of content legibility than using the scaleToFit property.
The trouble is that these two approaches are mutually exclusive, or so it seems. If you scale the contents of a site that doesn't feature responsive design and then inject the JS to set the viewPort, you end up with an illegible content frame that scuttles the good work of scalesToFit.
Is there any way to detect programmatically, when a page will respond to the javascript injection as expected and optimize the site for the presentation size, versus when the page will not respond to the javascript but injecting it results in the undoing of the auto-scaling?
Can somebody throw some light as to what are the various ways this Site is using to be responsive. Especially how is the top and left navigation changing to drop down , when you when you re size the browser.
http://www.smashingmagazine.com
I am sure this doesn't use twitter bootstrap. Are they any better ways to go responsive without leveraging twitter bootstrap.
Responsive design has been around in name longer than Twitter Bootstrap, and in principal it has been around for even longer.
Are they any better ways to go responsive without leveraging twitter
bootstrap.
"Better" is subjective, but there are many ways:
Another out of the box framework
Media queries
JavaScript to adjust the page layout (your own, or something like Masonry)
Floating elements which wrap based on width
Percentage-based layouts
All of the above
The site you linked to actually has good info on responsive design: http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
These frameworks look interesting:
http://framelessgrid.com/
http://webexpedition18.com/articles/responsive-css-frameworks/
http://foundation.zurb.com/
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 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.
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.