I want to create a website with responsive design. Now I would not only provide different CSS files for different resolutions. Ideally i will also provide different css files for different input devices. For example: Link should be shown larger for touchscreens, as for devices with mouse.
I can detect resolutions with CSS media querys, is there a way to detect touchscreens or general the type of input device?
You can use a library like modernizr to detect features (like touch) and then apply styles based on that. Check it out here:
http://modernizr.com
Related
I'm making a website and want the font size to be readable on mobile, desktop, and also when printed.
I find the default font size on my desktop looks good on desktop, but is way too small in mobile (and often I notice default fonts are way too big when printed).
What's the best practice for setting a font size that is legible on mobile, desktop and print?
Generally speaking you can accomplish this one of several ways. Two concepts that come to mind would be to have a stylesheet that is for web which would control your desktop, tablet and mobile styling. You can then have a separate stylesheet that targets print which is a less complicated stylesheet. You can also use media queries to target media type also. A reference for how to accomplish this can be reference by visiting https://www.w3schools.com/css/css3_mediaqueries.asp
Do you know is it possible by means of bootstrap 3 classes or some other its features to hide some html when there is no mouse at device which is browsing my site?
There are three possible solutions to this, none of which will work completely:
User agent detection - compile a list of user agents of devices that you know are touchscreen (without mouse) and use navigator.userAgent to check if they're being used. This may not work because people can change their user agents in some mobile browsers, and it is almost impossible to find a list of every possible touchscreen user-agent.
Use feature detection libraries like Modernizr. This answer explains it well. However, these detect for touch events, but some desktop browsers have these, so that would tell you something was touchscreen when it wasn't.
Detect the height and width of the window. Most mobile devices have small screens, but some touchscreen devices (like tablets) can have screens as big as some computers, which means it wouldn't always work. You can use window.innerHeight and window.innerWidth (this wouldn't work in IE). You can also use CSS media queries here.
I am buillding a website which looks great on a desktop however when i view it on a mobile it doesnt really work. I was wondering how I could set up a method/system which would automatically load the mobile site when being viewed on a device. Is there a way to do this? I have no problem with building 2 different sites but I would just like it to be automatic.
If you take a look you will see what I mean -
redchevron.co.uk
Thanks
As a general rule, you shouldn't build two separate sites if you can avoid it. The general best practice is to use responsive design techniques to build a single site that automatically adapts its appearance and behaviour to suit different devices.
To automatically adapt the layout and styling of your site for devices, use CSS Media Queries. That's a big subject - so here's some places to start your research:
Beginners guide to responsive web design
Media queries for standard devices
Mobile first responsive design
In short - Media Queries allow browsers to use styles (and ignore others), depending on properties of the device displaying the site. For mobile, the most common technique is to set up a media query for screens smaller than x pixels wide, and include your mobile styles within it.
To adjust behaviour for different devices, you can use javascript to detect various attributes of the user's device (is it a touch device, for example), and adjust to suit. It's worth noting though, that your site's functionality should work without javascript - it's important to create a solid, HTML only site as the foundation for whatever other work you do.
I'm just reading up on how to develop sites with responsive layouts. I think I've grasped the idea and can now style content differently, depending on browser dimensions.
However I've also looked into Jquery mobile and I like the UI that they use.
My question is, is it possible to combine the two? ie. Could I have a web page that renders normally when viewed on a pc/mac, but when the browser width drops sub 320px (for example), could I switch over to using Jquery mobile?
I thought this'd be possible by including the jquery mobile scripts in my page, along with the 'data role' attributes, but only including the jquery mobile stylesheet if the browser is a particular size, ie:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 320px)" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
Is this at all possible? I can't tell whether I'm trying to use Jquery mobile for something it's not designed to deal with? Should I just have an entirely separate site ie. http://m.mysite.com that has standalone mobile content? Or is it possible to have an adaptive website?
Thanks!
Yes jQM Supports Media queries:
http://jquerymobile.com/demos/1.0/docs/api/globalconfig.html (Grade A)
http://jquerymobile.com/test/docs/api/mediahelpers.html
http://jquerymobile.com/gbs/
that is a very interesting question...
The answer depends on factors like how differnt the 2 designs are like one below 320px and other above that..
If the difference is huge, having a separate mobile website is a good idea..
But if the difference is minimal, you can just handle that with the CSS Media Queries.
You can combine the CSS Media Queries with Responsive Web Design to handle different sized screens..
The question was not really answered as it was asked.
You cannot use JQM only on the mobile site and not on the desktop verion using only CSS media queries. You'd have to do completely separate sites and do a redirect.
A possibly better option is to use JQM on both mobile and desktop version, in which case CSS media queries work perfectly. The problem with doing that is it limits both how you can use JQM and how you design your site. You really can't take an existing modern desktop design and make it JQM.
The JQM demo itself uses media queries to turn it into a two column layout on desktop and tablet sized browsers, and single column on phones. Issues with doing it that way: the entire page acts like a page, meaning divs such as side menus transition and reload with a new page (which is why they only use the fade transition). Normal AJAX loading of content that doesn't involve the whole page will need to either be made to involve the whole page, or done custom outside the normal JQM way of doing things. Might not be too hard in some cases but it will up the JS code and make certain applications much more complicated. I can also see the CSS getting quickly out of hand for designs that are more complicated than the JQM demo.
Okay I got some good advice for Mobile Detection but still having an issue with themed tablets as the icons will be larger for a tablet view then a mobile device. I'm using jQueryMobile as the framework and it does detect the iPad (And I'm sure other tablets are on the way), but how can I detect if it's a tablet or mobile device? would I just go with the screen size?
If that's the case than what's the largest screen size for a mobile device or the smallest screen for a tablet?
is there a better way?
jQuery Mobile adds classes to the body tag which allows you to create a single CSS for all the devices.
See here: http://jquerymobile.com/demos/1.0a3/#docs/api/mediahelpers.html
update
As of beta2 helpers will be deprecated and set for removal. You should take a look at media queries which were used to put these classes in there anyway.
I'd suggest using media queries and targeting a different CSS stylesheet.
Have you ever considered a device detection library like wurfl, tera-wurfl or the proprietary deviceAtlas?
Have you considered the benefits of server side detection? OpenDDR offers .NET and Java libraries, licensed under LGPL.
You can have a look at http://www.openddr.org
We are starting to develop using Formfactor detection libraries such as FormfactorJS - note, I created this.
The theory being using the same semantic HTML, you can specialize your CSS and Javascript using for a given class of device (smartphone, tablet, desktop etc) whilst also being cognizant of responsive design to individual device profile using Media Queries.