Looking for advice on this - please give your opinion on which is best and the pros and cons.
I've got a site I'm working on that will be catering to basically three types of devices. Desktop/Laptop, Tablet, Phone. It is a responsive site so it looks great on all three.
BUT!
For the tablet and the phone there are a couple of features we will be including that will not be available for Desktop. There are links that will be included just for these and there will be a whole new menu that will sit snugly along the bottom of the site.
AND!
For the phone there will be even more features that will be in that bottom menu (like a "phone" icon to quick call from any page - not on the tablet).
We've got a WURFL setup telling us the device capabilities (is_smartphone, is_tablet, neither) - just want to know what you think is the best way to implement this?
a) set theme based on capability?
b) show/hide certain menus in the CSS based on capability?
c) something else?
Since you are using server side detection you can deliver specific sets of css and html depending on what type of hardware is creating the httpd request. The benefit of this over using media queries is you are able to decrease load times. The issue of doing display none is they are still getting loaded and not displayed. I would recommend to use the RESS technique.
Related
I am trying to convert my current website to a mobile version. I will be creating different views (I am using codeigniter) but want to make sure the CSS will look perfect on all phones. What are the universal/standard specs for a mobile website?
Also, what language is recommended? I was thinking just changing the CSS to a specific width and redesigning according to that width.
As there is no fixed limit of screen width/height of mobile devices. You must consider using percentage value for sizes. That way your mobile site will be more compatible.
For info on effective mobile websites, ie, what you should include and what not. Take a look here
http://www.qsrweb.com/article/202567/3-tips-for-creating-an-effective-mobile-website
For width related queries, see this,
Mobile version of my website, what design width is optimal?
A quick google search yields the following:
W3C's thoughts: http://www.w3.org/standards/webdesign/mobilweb.html
Smashing Magazine's thoughts (I have enjoyed some of their comparison articles before): http://www.smashingmagazine.com/guidelines-for-mobile-web-development/
You will want your page to be easy on the fingers, keep the text displayed to a minimum at first (i.e. summary + expanding things), and overall run fast. You will probably want to have multiple levels of fallback on things like CSS so that people running a CSS 1/2 browser can still use the website, even though CSS3 browsers may have a better experience.
Your site could also make use of media queries to choose a stylesheet based on the size of the user's screen (there are several standard sizes, especially if you consider the popular devices).
Javascript and other things like that should also work well for fallbacks. Using things like HTML5 canvases and WebSockets and such are good since they can be assisted directly by the mobile device hardware, but your script should handle those things not being available as well.
And, as always, an easy to navigate page goes a long ways just as it does with normal development. If the user can tell just by looking at the page how to use it intuitively (remember, intuitive for you isn't always the same as someone else), then I would think you are on the right track.
There are many takes on designing sites for mobile devices. The most straightforward, is to build an entirely separate user interface, just for the mobile site.
The next method would be to use CSS media-queries. This allows you to re-use your current UI and styling, but you can tailor it's content to specific widths and devices.
Lastly, is fully responsive design. It's rather similar to media queries, except that it uses percentages, instead of absolute pixels. It's the most seamless way, that a standard width-webpage can scale to fit the screen of a smaller mobile device. It can even scale up easily!
Here's a good place to start learning about responsive web design, and how it applies to mobile devices - http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
Try scaling the size of your browser while on that site. Notice how the layout changes. That's CSS media queries at work.
I'm a big fan of Zurb Foundation. They just released Zurb Foundation 4 which was redesigned to be mobile first. I'm fairly new to responsive design taking into account both mobile, tablet, and traditional desktop experiences. I'm trying to wrap my head around how best to manage my site's content for these different devices. With Zurb Foundation 4, you can hide or show content based on small, medium, or large device sizes. So, it seems with Zurb's approach you drop all of the content down to the device and let the CSS decide what content to show depending on device (this is responsive design).
My question is why do we have to drop all of the content to the device? That seems like a waste of processing on the server, a waste of bandwidth, a slower experience as the browser handles the content some of which may never be shown to the user because of the device they are using. Am I missing something? Wouldn't it be better to go back to the server and let it send content to the client that's appropriate for the device type? Shouldn't we be concerned about mobile user's data plans and not send down content that's not appropriate for their device type? All the examples that I've seen on responsive design has content for desktop and mobile/tablet downloaded to the client which seems to be a waste.
I'm developing a time entry application that has a different user experience based on the device type. Desktops (when in full screen) have a more detailed data entry experience whereas mobile/tablets have a different experience because of device real estate is smaller. I'm developing the app so when the desktop browser is resized to something smaller that 768px wide that jQuery makes a call to the server to swap out the UI for the "smaller" mobile/tablet version. Is this appropriate? I certainly do not want to download 2 versions of the app and hide one or the other depending on the device width.
Am I on the right track with my jQuery approach? Am I missing something regarding responsive design and needing to tailor the content to the device? Any ideas, suggestions, and guidance is appreciated. Thanks.
Mobile First with Zurb Foundation is basically a philosophy change by the Zurb team and if you want do develop a responsive site and not take a Mobile First approach then I suggest using Foundation 3 which is still available and fantastic. There is a book that I am reading that gives a great pitch for Mobile First, called Mobile First by Luke Wroblewski who is also listed as an adviser to Zurb.
here is an article by the same author that might be interesting:
http://www.netmagazine.com/interviews/luke-wroblewski-mobile-first
Basically: the premise is that you start your development and design for a mobile, meaning basically an iOS or Android style browser and then add features.
So instead of starting with a desktop / tablet experience and removing things as was commonly done with .hide classes in foundation 3 and could still be implemented in this way with foundation 4, they suggest using .show classes to add additional content.
This can be taken way further by using Compass and Sass Mixins. There isn't a lot of great documentation on how to do this, but you can basically keep your markup semantic, apply an id rather than a class and use the mixins to apply it to that id. There are advantages here in speed traversing the dom for an id vs. a class so it can be a good way to go.
Note: foundation 4 is using the drop in replacement (there are some limitations) for jQuery called Zepto. You can replace Zepto with jQuery if you really need it in foundation 4 or use foundation 3 instead. Zepto is much more lightweight and thus suited well for mobile.
As for it being faster by using jQuery to async load the data (I am assuming) based on the size of the browser, that is one way to do it. I am not sure if you are going to have a huge speed increase here. There are many strategies, pagination, async loading more data on the fly, and it depends on how you arrange the UX / UI around that data.
There are also many other issues such as caching resources, CDN, etc. that are typical in front end engineering that might give a faster load time. One resource you can check out related to this is ySlow.
There are also many design patterns such as off canvas slides, the 3 line (hamburger menu), loading more data on scroll, stateless apps, that can allow you to have the same functionality in a mobile app. If you go stateless, after the initial page load other pages should appear to be almost instantaneous.
I think the question here is more philosophical, in do you need all of the features, which is one thing that I believe taking a Mobile First approach is trying to approach.
Another thing to think about is the perceived loading time. I think I read about this is Seductive UX (another great read) but the faster you can get the page up with a loader or spinner, the faster it is perceived to be loading, even when in actuality it can be loading slower.
As a final note, if you plan on using foundation, you might look into using jQuery/Zepto with Modernizr to pull from the same media queries foundation is using. That way you don't duplicate or create something that is inconsistent with the rest of the responsiveness.
I'm developing the app so when the desktop browser is resized to something smaller that 768px wide that jQuery makes a call to the server to swap out the UI for the "smaller" mobile/tablet version. Is this appropriate?
It doesn't sound like a good approach do you take orientationChange in to account?
I certainly do not want to download 2 versions of the app and hide one or the other depending on the device width.
If you are on most tablets visiting the website in portrait and change to landscape you'll have to download the >768px UI after already downloading the <768px UI.
The mobile first approach in zb4 (with media queries) allow you to prevent stuff that belongs to big devices to be downloaded in to small devices. Basically you start with mobile styles and if the device meets the conditions you set on your mediaqueries (you can have much more breakpoints than the zf4 framework gives you by default) then the next rule jumps in.
I have worked in several 'responsive' projects even back in the pre-mediaqueries days were I use javascript to measure windowsize
Regarding javascript and like #powjames3 said zepto is much lighter / faster than jquery and if you could write your own javacript functions will be much better than using a over-bloated library.
Nowadays I do mobileFirst responsive webapps and websites use a mix of user agent sniffing ( sometimes to decide what image src or script / style src to deliver), despite the decision of the user agent tests i always serve mobile first mediaqueries, and conditionally loaded content.
"As Ethan Marcote (and John Allsopp before him), were right to point out, the inherent flexibility of the web is a feature, not a bug."
Here are some resources that might put you in the right track:
User agent parse and detection:http://mobiledetect.net/
Tutorial http://www.html5rocks.com/en/mobile/responsivedesign/ that covers:
Why we need to create mobile-first, responsive, adaptive experiences
How to structure HTML for an adaptive site in order to optimize performance and - prioritize flexibility
How to write CSS that defines shared styles first, builds up styles for larger screens with media queries, and uses relative units
How to write unobtrusive Javascript to conditionally load in content fragments, take advantage of touch events and geolocation
What we could do to further enhance our adaptive experience
Hope it helps
I want to know how to design a website. The website is shown normal on the web and mobile, but I need to know which one is better?
Design two different templates (one template for mobile and the other one for a normal monitor).
Check online through the user's device to see if its using a mobile device so I can change the stylesheet.
Is this correct? If there are any ideas, please tell me.
Thanks
I would go for 1. Normally you don't want to show as much content on your mobile website as your "normal" desktop website. But include a link to your normal website from your mobile website.
I would go for one, as axelios suggested, I would include a link.
I, as a user, find extremely annoying websites that refuse to display the full site because they "recognised my browser as a mobile browser". Several newssites do that, which has eventually diminished the number of news I read, and some shops did so, which means I don't visit their sites anymore... so I strongly discourage the second solution.
I host a small web shop for a client who wants it to be easily accessible from mobile devices.
How do I detect if the user is browsing my site from a mobile device?
When I have done that, should I:
Check if the user has mobile device and then forward them to another site?
I think the advantages would be:
I can optimize layout from both sites for screensize
I can use different techniques in the two sites (eg. jquery mobile for mobile)
Use CSS for the different screen sizes => like on tutsplus
I think the advantage would be:
I only need one site but it seems to me heaps of work when talking about a small webshop
Ideally, you should try using jQuery Mobile page structure with your own CSS and JavaScript for non-mobile devices.
You can easily detect user's browser and conditional script includes as per html5 [boilerplate]:3
/* Grade-A Mobile Browsers (Opera Mobile, Mobile Safari, Android Chrome)
consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
#media screen and (max-device-width: 480px) {
Main things to consider when aiming at iPhone users:
ensure there's no vital flash objects
on the page as it isn't supported by
many mobile browsers (yet?)
appropriate screen size (using
viewport meta tag)
keeping in mind that there's no mouse
cursors, meaning no
hover/double-clicks are available any
mouse dragging gestures are different
on touch devices
remember all pop-ups are open in new
tabs and won't be seen at the same
time as the main window, use
javascript modal divs as alternative
test all your javascript and css to
ensure everything looks and works the
same (Safari requires -webkit- prefix
for the newest CSS properties)
create a Home screen icon for your
website (a nice thing to have)
most of these things are covered here
take a look at Safari Dev Center for tutorials/videos/coding how to's etc.
There are several options but this is my favorite:
http://code.google.com/p/mobileesp/
Comes with a API in a couple of different languages as well
You don't need jQuery at all if you don't want to use it. We don't. Not that there's anything wrong with that.
Number 2 is the best option. If you create a site with mobile in mind first, it's far, far easier to expand and manipulate for the desktop than trying to shrink things to a mobile screen.
JQuery Mobile is currently in beta 1 right now. Beta 2 will be out within a month. It is fairly stable at the moment and you can gain a lot of knowledge about what is considered "best practice" from them. You can use media queries for screen sizes for different platforms which JQuery Mobile also supports.
http://jquerymobile.com/
I'm trying to determine what kinds of interactions a mobile website can handle. For example, I obviously can't track page-level dragging operations because this scrolls on mobile browsers. So, I'm looking for demos that can tell me what interactions work, how well, and hopefully for information about how consistently that is across mobile devices. For example, I'd like to know if I had a page that fit on the screen, would my page elements receive mouse move events when I drag my finger? I could test that myself, but I figure there are probably lots of things that could be tested, so I was hoping there was something like the ACID test, but for mobile UI interactions.
I don't think I've ever seen such a thing, but the thing to remember is the browser is just one key factor in the interaction between your application and the user. The capabilities of the device itself is a large part of what you can and cannot do. For one, the iPhone has a full JavaScript stack and CSS rendering ability as well as the ability to "click". However, on a BlackBerry you're going to lose a lot of that CSS and JavaScript functionality. Also, with Nokia handsets you're going to be dealing with a different beast. The best way to develop for something like this would be to either use a framework/device template like the ASP.NET Mobile platform, or to go as close to basic HTML as you can.
There is no silver bullet, and you're just going to have to try to cover as much market share as you can. One thing I can share, is that the more standards compliant and semantic your markup, the better it will render across the devices. Sometimes, you can even get away with just coding the site once provided your site degrades well when CSS and JS are not available.