I am creating a mobile site and working on WAP for the first time and my main concern is that the site should render properly possibly on all handsets.
So,I was thinking to adapt responsive design approach.
But then I came across this sites :
http://www.webdesignshock.com/responsive-design-problems/
http://dapurpixel.com/blog/articles/responsive-web-design-pros-and-cons/
So,please provide some best practices to follow while developing mobile site. I googled it but it showed my tutorial for responsive design and I am not sure that this is the optimum method.
Thanks
It all depends on the website you are creating. Some type of websites (such as blogs) are really easy to make as responsive design. But some other websites (e-commerce, news magazine, deep websites) should be adapted specifically for mobile and tablets. Why? Because making the website adapts its width and column layout is often not enough.
Also keep in mind some features such as mouseover is rather complicated for tablet users. So menus with click that opens an accordion menu is simpler and feels more right. Creating a design that would work for everyone (One design to rule them all) could take more time to implement than simply creating a specific version of your website for handheld devices.
So it all depends on the nature of your website.
Related
I see so many people are going for mobile-first approach rather than desktop first.Anyways we have to do mobile responsiveness to be good using media queries or some responsive frameworks(if i need mobile responsive website).Even i choose desktop-first approach. why the people has started the term mobile-first approach and they are using it.
Been wondering lately about responsive vs mobile site, especially for ecommerce. I have a rather big project coming up and it seems like it will be a relatively heavy one (in terms of templates and functionality). So immediate thought is to do a mobile site to cut on certain functionality that may be performance heavy but not that required. But does this make sense these days? Would there still be advantage of going mobile with ecommerce, or perhaps should just do a responsive?
There are advantages and disadvantages of doing a mobile site and a responsive website. I've recently went through this decision in my work as well. The points below are the main points I looked at when updating my website.
Mobile:
- Specific site created for mobile devices
- New domain name needed for the mobile site
- This may need to be updated as new phones are developed or new screen sizes are developed.
Responsive:
- Site is adjusted based on the screen size of the users device
- Lots of up-front coding needed
- No specific mobile domain needed.
- Currently no new code needed for new device sizes.
Although there was a lot of back end work (and I'll be honest there was a lot of back end work!). I think choosing responsive was right for my situation.
If you plan to use the website for a long period of time and you have the resources and time to devote to a responsive design I believe it's worth it.
One of the most compelling reasons for making a responsive e-commerce website is that Google recommend it!
Bear in mind Google's market share and that most of your SEO effort will be for Google. The following configuration is detailed by Google, the highlight is their own:
Sites that use responsive web design, i.e. sites that serve all
devices on the same set of URLs, with each URL serving the same HTML
to all devices and using just CSS to change how the page is rendered
on the device. This is Google’s recommended configuration.
Moreover, with frameworks like Bootstrap responsive websites are relatively straight-forward.
committing to a separate mobile website is a commitment to its ongoing maintenance -- so there has to be the budget/resources to do that.
another alternative is to use a front end framework like (twitter) bootstrap 3 that allows the website to be 'mobile first'. this was the breaking change between bootstrap 2 and bootstrap 3 -- bootstrap 3 looks for mobile devices first to speed up the rendering.
http://getbootstrap.com
the code needed for bootstrap 3 is relatively easy to implement -- but it is a commitment because all of your templates and forms and layout all have to be done with its code.
i am using bootstrap 3 for e-commerce and its great. a huge advantage of using bootstrap 3 is that as new phones etc come out, they are testing etc. some people complain that bootstrap sites look the same -- but for e-commerce -- having the interface look and feel 'familiar' for customers is good for sales.
I am a noob in UX design concepts. Recently I gone through one article about flat design, where they stated that Responsive is so much cared. Usually , when i develop sites, i always tries to make a responsive site. What i want to know is , maximum of people always want their sites to be work in all kind of devices, so that they are giving much importance for responsive design irrespective of the design technique that they follow to build sites. So responsive concepts are common.so why the responsive concepts are included in flat design ?
Almost every new client these days wants a mobile version of their website. It’s practically essential after all: one design for the BlackBerry, another for the iPhone, the iPad, net-book, Kindle — and all screen resolutions must be compatible, too.
In the next five years, we’ll likely need to design for a number of additional inventions. When will the madness stop? It won’t, of course. That's why it's refer to have responsive User Interface.
I hope answer the question.
I'm beginning to build my first mobile web app and I'll be using a combination of html5, css3, javascript, and at the end I'll be wrapping it up with Phone Gap (Cordova) then deploying it out to both the Android and iPhone marketplaces. I won't be using anything else like java, php, or c#.. This is strictly front-end based, so the questions below are in retrospect to the this and will play a big role in creating my mobile workflow.
As I'm fairly seasoned in the above front-end technologies, mobile apps are a different world, which leaves me with some questions...
Mobile App Questions (Workflow)
1.) Should I build it with 1 page (single page app) or multiple pages? I know I could us an AJAX solution here to give the "1 page" look/feel, but what's the smartest solution?
2.) Ad placement, in retrospect to 1 page/multi-page apps, I assume multiple pages would be a smarter choice? The more refreshes the better for CPM or is this considered bad practice? ...or can I achieve ad refreshes with smart AJAX placement inside a 1 page app?
3.) Gestures vs. buttons and css - I've been building responsive websites for the last year and have noticed that I can achieve a lot of effects with css alone (i.e. hover, focus, active, overflow... to name a few). When is it necessary to use gestures? Hammer.js seems to be doing a pretty good job of these effects and I'll definitely be taking a closer look at that plugin.
4.) CSS3 Animations vs. Jquery Animations vs. WebGL Animations - What's best? According to this link, CSS 3 wins... But I've heard about css3 REALLY slowing things down (i.e. using border-radius). What's safe to use for a mobile app?
5.) The "back" button on android phone, I assume it's used just like a web browsers back button.. So if I build a "1 page app" that could be a bad choice if a user clicks "back" then immediately exits your application. I'm sure I could use an alert box to question the user first, just curious on if their is any recommended solutions?
6.) The "settings/options" button on an Android phone, I assume it will do nothing if I don't tell it to... But, if I wanted to tell it to do something how could I?
7.) File System - What's the best way to access the file system (opening media, saving media, saving media to "custom app folder name", sharing media to facebooks/twitter/instagram, accessing contacts, texting, email, etc...), Since I'm only using front-end technologies, what's the best ways to handle this? It seems like I've read somewhere that Sencha and/or Phone Gap have JS solutions for this.., what's your preferred way and how does it actually work?
8.) Testing - When I start implementing all of these "File System" commands, how on earth do I test this? I'm of course coding on a computer, Will Android and IOS emulators really do the trick or will I have to manually load my mobile app to a server and check? Is their a way to test locally with my phone? (that'd be cool :)
9.) Performance - I know performance is key with any application but ESPECIALLY mobile apps. I use jQuery (hey, I'm a UI guy :), and I know I'll be using a few other smart scripts so mobile phones will play nicely (SouthStreet Progressive Enhancement Workflow)... but how much is TO MUCH?? In the future if I wanted to use more powerful js libraries such as knowckout.js or angular.js, how would this effect the performance of a REAL html 5 mobile app?
These are the questions that are running through my mind right now. If anyone has some good knowledge of a tutorial that explains these things or if anyone can point me in a good direction I'd really appreciate it! I also hope that these questions will help other poor lost souls like myself ;)
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.