In the past, I've created a "global" style sheet that all browsers and devices that support CSS should be able to receive.
The problem with that is that my old Nokia understood background image but the screen was so bad that the background images made the website look awful.
I then started putting any background images inside a CSS file with a media query so that old phones like this wouldn't understand it. However, this creates a lot more work. So I've started putting "global.css" behind a media query. The idea is that if the phone isn't capable of understanding media queries I don't want it to read my style sheet. Older (desktop) versions of IE are still served the CSS using conditional comments.
SO my question is, if a phone doesn't understand the CSS, would it provide its own fall back just like a desktop browser does? So at least a h1 is bigger than h2 etc and the text isn't all lumped in one huge block?
I'm guessing this could be a "It depends" answer but I'd appreciated feedback on this. I don't have my old nokia to hand so can't see what that is doing at the moment.
Many thanks
It does depend on lots of factors, such as vendor and how old the device is. However, in my experience generally they do render h1's bigger than normal text; can't say the same for h2's of further down the h's, though.
Usually for old mobile sites (back when XHTML-MP was the new thing and WML was all the rage) we used to set font sizes with CSS using these font-size values:
xx-small, x-small, small, medium, large, x-large and xx-large
From my experience, I can tell you that only small, medium and large work reliably across most feature phone mobile browsers.
All Nokia browsers (including the old XHTML MP versions) did include a default style sheet. This included basic styling for all the headers, a basic bullet and default bullet margins for lists and a bold and italic style. The various headers were not always that well differentiated but they was enough of a difference that one was discernable from another. The only real gotcha was with italicised text. There was often no italicised font per se so the browser would shift each character's pixels to the right to simulate a slanted font. This often resulted in poor legibility.
Related
i am developing an ios and android app from Ionic. my problem is since we have different device, different density. How do you handle the displaying of images. Are you just creating one image file that will be used on all the screen device?
The short answer is that yes you use one high quality image and let the browser on the device do the down scaling.
The slightly longer answer is that you can do some optimizations because your locked into a pretty tight set of standards compliant browsers so you'll want to follow best practices for those. By that I mean if you have graphics that are in vector format, great leave them as SVG's if you can. If you have raster images you'll want to have them at a resolution that looks great on your biggest retina display and you'll want to use media queries to adjust where necessary.
You can also use CSS tricks to replace images by hiding and showing appropriate images at appropriate times.
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
Hopefully someone may know what I mean and where I may find such a thing.
I'm creating a new website and as part of it i'll be offering mobile web design. What I need if possible, is something that, should a user click on one of my examples, it load up a mobile browser (not the mobile site on a normal web browser). More like an emulator that will allow them to see working examples of potential sites.
Is there anything out there that will do this, or am I looking at opening a new window to a set size and displaying the site within it?
Please Note --- Whilst writing this out, I may have stumbled across a potential floor, as this may expose code.
I'm thinking I should perhaps consider putting JPEGs or PNGs that they can scroll through so not to expose the code behind the mobile site itself?!
If there is such an emulator or the likes that is available (and doesn't show code in the background) i'd be more than happy to be pointed in the right direction!!
Thanks
Paul
Please correct me if I misunderstood your question, but it sounds like you want to let users preview a responsive design at different screen sizes while denying them access to the source code.
If that's the case, rendering the design as a flat image file for previewing purposes is your best bet, even though it would sacrifice any interactive aspects of your design. It's a rough trade-off.
I assume you have a legitimate reason for hiding the code. But if haven't already, you might want to ask yourself what's motivating you to conceal your source code in the first place. The web is built on open standards and accessibility; you'll have to go through a lot of contortions to hide static assets like HTML, CSS, and javascript from a browser. I understand if you're concerned about a sketchy client using your work without payment, but that's more of a contracts/legal issue than a technical one.
That said, you can always place the mobile site's main content (or an image of the content if you must hide the code) within a div of a specified width and height to visually emulate a phone. Wrap it with some phone graphics, control the overflow with overflow-y: scroll; and overflow-x: hidden; and there you have it.
Web Design Weekly is a nice example of this concept in action.
EDIT: it occurred to me that another option you could feasibly explore is video instead of static images. Always an option if you need to wow a client. Typeform.com is a good example of what I'm talking about.
hopefully my questions won't be too vague.
I designed a pretty simple website. You can see an image of it >>> here
But now I'm trying to make a mobile version.
However I'm contemplating using a different html for the mobile version since the desktop version has jquery pop-ups (prettyPhoto) and a very large backround that scales, which aren't great on mobile screens.
I'm unsure of how to do that. My first question therefore is:
1.) How do I call a different html for mobile?
Also, for tablets, the website renders pretty well in landscape mode but becomes weird in portrait mode. So my second question is:
2.) Can this different html be called based on width? If so, any ideas how?
So if tablet is viewing website in portrait mode, they get the mobile version, if they are seeing it in landscape mode, they get the desktop version.
I am not sure what you are attempting to do, but from experience as both developer and mobile user, what you propose is not a good idea. Again, since you have not mentioned what you are attempting to do, I am speaking generally. Consistency is very important for UX, and delivering completely different behaviours and looks for orientation does not sound like a good usability. Also, remember that on today's tablets, switching orientations is very easy. Would you load each version on each orientation change? What if the user is on 3G?
But technically, it is possible to load depending on width or orientation. Use AJAX, and load the appropriate content.