Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
Ha all,
So I've been taksed with developing a smartphone website for our property portal and first thing I did was see what lessons others had to tell online but I've found very little.
I'm not building an app, I'm building a website and I'm looking for do's and don't with regards to html, css, widths/heights approaches, javascript (is jquery going to play nice on all platforms?) and anything else that relvant to this kind of platform.
Looking around at others I like http://mobile.whistlerblackcomb.com/ very much.
Regards,
Denis
UPDATE:
While most of the text below still applies, I would now say that jQuery Mobile does a great job of providing a well-designed and usable set of UI components, while also alleviating a lot of the device testing and detection issues that I've used WURFL for in the past. It's still in beta, but seems to be working pretty well. I recommend checking it out.
The two most important issues to consider when getting started are:
1) Device detection
2) Mobile UI design
For issue number 1, I strongly recommend looking at the WURFL device dataset:
http://wurfl.sourceforge.net/
Using this, you can retrieve (some) capabilities of devices that are accessing your site, using their User Agent string. Testing mobile web apps is kind of like browser testing from hell--there are so many different combinations of devices and browsers, that it's a difficult task. If you can focus on developing one or two versions for fairly capable phones, say:
1) minimum 300px width with claimed "web" support and a touch screen
2) The same as above, but without a touch screen
you can create a very usable site that will work for most "smartphones," or "app phones" as David Pogue has more accurately named them. For the actual testing, you can try:
1) Making a list of all of your friends and what kind of phones they have
2) Going to a phone store and using those phones to test your site
and, regardless of what you do, you'll have to be agile when you receive the inevitable user feedback about broken/slow content on their device.
Regarding UI design, there are a couple of issues. The simplest one is nice looking CSS. Here, just look at some mobile sites you like and steal their CSS. Once you've done this, you're basically doing regular old web development, just on a small screen. ul's will become nice iPhone-y tables, etc.
The bigger problem is mobile web usability. In a lot of ways, we're in a 90s-web situation with mobile web development. What I mean is that we working without well-established design patterns. This makes doing mobile web development really fun, but it also means that you have to be ready to adjust your ugly/broken UI as better ideas evolve. One current example are the global nav/breadcrumbs you see on a lot of mobile sites. A surprising number of folks out there are trying to mimic the behavior of native iPhone apps by providing a persistent navigation tool (back button) within the mobile app. While this is kind of pretty, it has a few problems:
1) It is redundant, given that the browser comes with a back button that users are very familiar with. The reason these global navs exist in native apps is that they don't come with a free navigation tool.
2) The web is great. You can enter, leave and re-enter "apps" at any point in their structure. By assuming that a user takes a linear path through your app, you are decreasing its webiness, making it a lot more crude relative to the rest of the web.
3) It breaks. Either you can get in a situation where the app nav and the browser nav point in opposite directions (hitting the back button in your app steps forward through the app history), or you fake a back button with javascript, which breaks if they don't start at the beginning of an app (emailed link, bookmark), or you set up sessions, which can be a big pain just to replicate what you get from the browser for free. Sessions are also vulnerable to brokenness (emailed links, bookmarks), and you're really not gaining much.
I guess my main points here are:
1) Don't forget you're on the web. The web is cool, browsers are cool, make use of that.
2) Don't be afraid to play around. There aren't many well-established patterns here, so you may have to try out some of your own.
A List Apart can get you started:
"Put Your Content in My Pocket" by CRAIG HOCKENBERRY
With modern smartphones there's actually no difference between developing a conventional webpage and a dedicated website.
But you could try the emulators that the major players like Apple, RIM, Motorola and Nokia provides to see how they look.
I'd suggest taking a look at some other mobile sites. I posted a few below.
m.reddit.com
diggriver.com
mobile.washingtonpost.com
Since modern mobile browsers work quite much like desktop browsers, the old adage of "minify JS and CSS, optimize images" should be your primary concern, as bandwidth is more valuable on mobile devices.
In addition, consider following:
Think if you need all your images, and if they are too large for small screens. Consider removing or reducing the size of large images.
Check your JavaScript - Will your site work without it? It may be beneficial to disable parts of it, as it may easily reduce speed on mobile browsers
You can often get by simply by including specialized CSS styles tailored for small screen devices in your main site
You might also find this helpful: Why your mobile site probably sucks
Mobile sites are often used on regular phones, and often go to m.example.com instead of www.example.com. These sites have little/no javascript or css compatibility. When you ask about mobile sites, keep in mind that there are two types of mobile sites.
Modern smartphone are supposed to handle browsers the same as a full fledged browser, but they are not. In fact, the iPhone lives in a fantasy world and will report a window width of over 900 pixels!
There are tricks that you can do for a smartphone. A touchscreen has no use for the :hover pseudo-class. This can be a problem for menus that require hovering. You can design around this. How? you ask...
Apple looks at a new meta tag (do a google search on it) and other smartphone browsers look at this as well. With this, you can force the smartphone to report it actual screen size in pixels, and not it's pre-programmed fantasy size.
Now that you have done this, you can use css conditional statements,
#media only all and (max-width:600px){
CSS RULES THAT ONLY APPLY IF THE SCREEN WIDTH IS <600 PIXELS
}
I've used this to block <div>s that cluttered up a mobile device screen: lightbox, for example. I also used this to modify image widths, so they fit on the device better. Why did I choose 600 px? I felt that many of the newer "netbooks" should be lumped in here as well.
I hope this helps.
--Dave
If you are looking to do development specifically for an iPhone or iTouch use thise conditional statement.
[if SafMob] #import url(iphone.css);
Here is an article about building sites for mobile.
http://www.alistapart.com/articles/pocket/
Meagan Fisher's talk on Designing Effective Mobile Interfaces provides a good overview. She recommends the book "Mobile Web Design" by Cameron Moll. Technology wise, I'd start by getting familiar with XHTML Mobile Profile if you're not already.
As far as design goes, think thin. Snag a book with nice typography and see if you can duplicate the page layout with CSS. "Elements of Typographic Style Applied to the Web" is a good starting point for that. Phone websites are about scrolling, not complex navigation. Rhythm and spacing are important. Keep images small and your text high contrast, and you'll end up with something that loads fast and looks good.
There is also this threeparter, "Mobile Web Design" by Cameron Moll:
State of the Mobile Web
Methods to the Madness
Tips & Techniques
The series is from 2005, but many of the info is still relevant. The last part "Tips & Techniques" also lists a lot of other resources on mobile web development.
Related
i'm trying to redirect my mobile users and all of small devices users to my mobile version of web site.
but i don't like change my URL.
like below example ,
desktop version : domain.com ( with desktop version of site )
mobile version : domain.com ( with mobile version of site )
Redirect means to Change the window location.
since you dont want to have a seperate mobile site,
The Only feasible solution is to use a good responsive ui framework like bootstrap. but in your tags you mentioned wordpress and i feel most of the wp themes are in fact responsive.
Anyways, use bootstrap if you would like to design a responsive site.or another alternative would be to write all css using media queries.
Hope that helps.
You need to replace the theme of the site for this "on the fly".
You can do it with code but it's too long, use this plugin instead device theme switcher
URls for both should be same and they are same in their case as well. Well done !
Now, for automatically rendering the specific layout, take help of media queries.
Refer
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
They define the specific width range and pick up those specific styles only.
So you have a lot of work to do.
This is a optimal way to work and this is termed as responsive design.
You can find n no of tutorials for same. But to experiment just work with one or two media queries.
Also, read about meta tags which enables to pick those media queries written in stylesheet https://css-tricks.com/snippets/html/responsive-meta-tag/
Good luck !
When customizing a page on WordPress, at the bottom left corner, you can see how your website will look like in phones or tablets.
Also, some page builders like Elementor, allow you to control what sections to appear on what screens.
A better way to state your question question would be, how to make a page responsive?
When reading about Grid Systems, you'll be amazed at how a simple change to the orientation of your divs, can make a huge user experience difference.
When using a framework that uses Grid Systems, Bootstrap being one of the popular ones, you can imagine any screen divided into 12 columns (grids). Then you can specify how many parts a div takes on each screen size by adding classes. For example, <div class = "col-sm-6 col-lg-3" </div> will cover have the screen (horizontally) in small screens (6 being half of 12) and a quarter of large screens.
The reason behind this peocess is to eleminate right and left scrolling which makes it easier to navigate.
Hope this gives you a little overview of what you need to be looking for to make mobile-friendly websites. Good luck!
thanks all of you for commenting my question.
Now that i write my answer to my self , i found my question's answer.
Responsive design not it's answer. You have to show a mobile version of site, not responsive version of site. so using #media()
not useful.
For this issues , You have to detect user's device in your back-end. for example in PHP you can use mobile-detect.
And you can detect your device and show it's template for that device.
Also, mobile detect have a js version. click here
I hope you find your answer here.
Until now I mainly made web sites suitable for PC (desktop) with help with Javascript, jQuery. Now I need to make some small web site Tabular job time records with menus, popups, dialogs, charts and the ability to input and modify data by click events (mouse or touch device) on table cell, plus additional statistics, math, etc. I started by making separate versions including jQuery mobile) but after some time it was very confusing for me to track all changes and understand such complex coding! Then I decided to apply some kind of responsive technique but after reading a dozen web articles I'm still unable to make conclusion what way is right!? Do I need to start web site as primary for mobile and then add some code for desktop, or opposite? Or is there some way, implemented does score for all three type of devices? Thanks.
This question is a little vague. If this question is only about the javascript interactions your answers will vary with UX requirements and libraries. As far as layout etc is concerned, both bootstrap and foundation recommend you start with a mobile design to have the minimum amount of elements necessary for all the content, then add features and readability as you get more real estate.
Mobile first is simply a way to ensure that you don't end up with too many elements to fit on a smaller screen.
We have website that was developed for desktops and now I've been blessed with a task of creating mobile version of it. The mobile design might be quite different from desktop version and the website is build on Wordpress. Now I'm not sure what would be best approach:
shall I stick to CSS changes only (as much as possible) and use media queries to target smaller screens? I'm worried about large images still being downloaded even if these are display:none. There is also quite a bit of JS happening on every page and this JS will not be used in mobile version of the site so I would have to build in additional checks possibly etc. Any other possbile problems with this approach?
server side code should detect if its mobile browser and should return custom html? Any other possbile problems with this approach?
mixture of two above?
any other options?
If anyone has experience with similar project and could point me to what proffered solution would be that would be great.
Use media queries as much as possible for layout changes.
For you JS, create yourself a small breakpoint handler that will trigger the js to run or stop.
I think a lot of people don't realize that a 2x image compressed is smaller than a 1x image compressed. So, if you use compression for you images, you will actually get a better network performance using just large images. How much of that image gets displayed is a potential issue that can cause negative performance, but I imagine that it's insignificant.
Are you using completely different UI for mobile than for desktop or is is just a different positioning of elements? If you have to support two templates then you will want o think about Adaptive(responsive from the server), where the server will determine based on the UserAgent which template to send to the client. UserAgent wont really get you much except for the type of Browser the client has. To figure out the dimensions of the device's screen you will need to know the dimensions or use a service like WURFL.
If you can do all of your UI change in one template using media queries then it might be best to start working on this from a Mobile First approach and basically start from scratch on your mobile look of the site and then figure out how you can re-position the elements on the page to match as close as possible to the current desktop look. Using the Responsive vs Adaptive approach will eliminate the need for UserAgent detection and you will only work with the width of the device.
Thinking of Responsive in "Mobile" vs "Desktop" is really limiting and causes a bit of confusion. Mobile should refer to devices that change location. Try using names like small, medium, and large to describe the layouts(breakpoints) for your Responsive Page.
Finally, there is not preferred way of doing "Responsive." Each site will have it's own requirements that need to be met. It is up to you to learn as much as possible and create the preferred way for your needs.
I am a big fan of the Responsive Theme Wordpress has. It is very customizable, and will allow you to use one site for both Mobile and Desktop.
https://wordpress.org/themes/responsive
You could always use:
<meta name = "viewport" content = "width = device-width">
in your header. Then the whole site will resize to fit the mobile device.
All your js should still work on mobile devices. It would just be 'flash' that wouldn't.
The site isn't "responsive" with this but, depending on the site and how much interaction etc the visitor needs, sometimes this is adequate and simple?
I'm trying to figure out how to streamline my development process for responsive design. The standard way is to design mobile first by using media queries going from mobile to desktop sizes.
The issue I'm seeing is supporting IE7 and IE8. The solution everyone is going to, is to use response.js. What about supporting those who disable javascript? Is there something I'm not seeing?
EDIT: I know the its a super small percentage of users that have JS disabled. It's a requirement for this project.
Mobile First follows the path of Graceful degradation. To put it simply, "We provide backward support up to this point only, or you get nothing". And for older browsers, you will get nothing. This is the path of polyfills, patches and workarounds which is what scripts are trying to do.
On the other hand, Progressive Enhancement caters all basic functionality only up to what the browser can do. It's like "We support everything up to the latest which you support". This is what you are trying to do, and what you should be doing.
So let's exploit the fact that CSS is cascading. Initially use a fixed or fluid layout, then the responsive layout. For browsers that don't understand media queries will simply disregard it, leaving your fixed or fluid styles to shine through.
Mobile browsers support media queries or have JS most likely turned on. Wap browsers also live happily with fluid layouts.
*For JS, 95% of users have JS on. The other 5% are people that
have outdated browsers (Mosaic?)
are not desktop browsers at all (crawlers, proxies, scrapers)
wap browsers (except some browsers like Opera Mini which run a few JS on load)
and paranoid people who fear JS.
*Now, how much of those are actually a browser? Most likely #3 and #4. What are the chances that it's IE? 1/3? What's the probability of hitting 1/3 of half of 5% of the population in order to use a pure CSS, no JS approach?
Don't rely on the fact that possibilities exist. Those are extreme situations that in the real world, only happen 1% out of a billion. As people from UX would say: demographics.
*exaggerated estimates
It's 2013. If someone has js disabled, they know their web experience is going to suck. Not just on your site, but everywhere. It's less than 1% of users, so don't worry about it. You can/should basically assume js is enabled.
Just make a fixed width version at desktop size for older IE's using conditional comments for an ie.css sheet. (See http://html5boilerplate.com/ for a great example of this)
Respond.js often runs really slowly and is far harder to debug then "traditional fixed width" IE 7,8. So it's way more work to support (even if it weren't part of your project requirements to support non-js users).
Thing about it from the end user's perspective. If I needed to borrow grandma's beige tower running IE 7, I'd rather have a faster, fixed-width site then a buggy, slow responsive site. Also these are old computers with users used to fixed width sites anyways.
Also consider looking into using SASS to help with the breakpoint madness. My favorite mixin is "Breakpoint". Check out their documentation here related to supporting browsers that don't support media queries. In short you add a variable to a media query to see "export to my IE.css = true" then these become the core components of your ie.css sheet and there's less custom IE work to do.
https://github.com/Team-Sass/breakpoint/wiki/No-Query-Fallbacks
Seems that with handheld devices on the rise, one has to start taking them into account more and drop IE6 instead.
With that in mind, it has come to my attention that certain things don't work as well as can be or at all on say, my iphone.
what seems to break includes (but not limited to):
mouseover/mouseout events (can break almost anything)
CSS pseudos :hover as well, naturally (breaks nav CSS-only menus, for instance)
DOUBLE CLICKS - it zooms instead of the event handler
CSS-related issues (minute, it seems to work just like in Chrome w/o the gradients + some font-size issues)
the real question is: do you have any guidelines, articles or whatever that can cover things below or any advice you can give.
where do you start in order to transliterate the experience for desktop users over to mobile ones? do you try to make a separate skin for mobile devices or do you alter / fix your site to work as best as possible - how much maintenance and work is involved in either approach
are there any frameworks (CSS or JS) that can abstract that and do the graceful degradation where required? boilerplate comes to mind, jquery-mobile mootools-mobile (power tools)?
what do you replace things like the ones above with, click events?
how do you incorporate swipes into a web app? can you handle and respond to finger zooms? should you?
additional events like shake, tilt - do they bubble to the browser window?
do you do anything to accommodate awkward OS elements like select, checkbox and radio?
resource management - do you use a detection layer that will only send whatever files are particular to the device as opposed to generic js libs that can deal with both?
as for device support, I am interested in droid and ios only so javascript support will be pretty good - would you drop your main framework and go with a micro js lib instead?
and finally - do you have any impressions on how viable handheld devices are for e-commerce and monetisation (currently and in the near future). I would like to make sure from a business standpoint that the dev work will be worth the expenditure and we're not going to go after buzzword gimmick like '#socialmedia'. any data on conversion values in comparison to the desktop ones? this can help me gauge if these are used as a quick browsing instrument or can actually do the full monty.
any examples of a site that does a great job of working in mobile and desktop at the same time or through different designs, I would like to see them and find what's even possible.
thanks in advance.
You've just asked a lot of questions I've been asking myself recently. I can't give great answers yet as I'm still researching and exploring. but here are some useful links.
Rethinking the mobile web
Mobile emulators
How to build a mobile site
I hope this is at least a little helpful.
I can answer the conversion rate/business viability part of your question.
I had the chance to see Omniture numbers for some very, very big ecommerce interests and the answer is that conversion can be somewhat less, somewhat more, or about the same. There was a pretty good amount of variance depending on the device and the seller's site.
It's what you'd expect though, I think. The quality of the mobile/tablet experience varies a lot right now depending on how well each business optimized for mobile (and for which mobile devices). I think conversion varies a lot as a result.
following link should help. To make website like a nativeapp, jQuery plays amazing role
http://blog.2partsmagic.com/2012/07/developing-web-application-ipad-android-tablet/