"Mobile first" is recommended, I know.
However, I understand this to be because of the progressive enhancement principle.
But when I build a simple site, where I am just scaling/re-arranging items to fit better and have better legibility on smaller devices, can I not just as well start with the desktop design and work my way down to mobile?
It's near impossible to design something perfectly for every possible screen. The basic "breakpoint" as you put it has always been to determine what the client needs, and what they expect. Presently, most clients need a site that meets some basic mobile requirements or at least has a few mobile-friendly pages, even if deeper content is still in a desktop format. There is no one fixed answer for this. However, you should probably be conceptualizing how your design will work in both formats and trying to minimize the amount of rewriting you'll need to do from one to the other, by keeping the layouts as fluid as possible.
Related
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.
So, I worked on responsive sites before but I'm on my way to build my first responsive site now. I opened some articles on the subject, and boom: Mobile First.. I have no idea how I skipped that concept till now. From the beginning I cant seem to understand whole thing (except that number of mobile devices will take out soon desktop computers) and here is why.
How I'm supposed to know how my site will look for desktop version, if I design it for mobile first? I mean, on the smallest device I will have to eventually hide some content etc, how I'm supposed to know what to hide and move things, when I don't know how the site will look on bigger screen? Isn't stripping the things easier?!?!
For me (right now), the Mobile First concept looks to me like building pyramid upside down.
Most implementations actually have two sites: one for browsers and one for mobiles. The webserver redirects the client to m.your-domain.com (or mobile.your-domain.com) if it recognizes it as mobile accotding to the user-agent.
Still, there's room for responsiveness since you might decide to consider different screen sizes, both for mobiles as well as browsers - for example: iPad browser might display things differently than chrome on desktop.
Remark:
Even though we already reached the point where major portion of the internet traffic is done by mobile devices, your site/service might be such that most of its clients will be laptops/desktops. Take Stackoverflow for example :)
You should use google analytics and see what's the split and decide according to that if it's really worth putting energy into it (and if so - how much).
In my opinion. mobile first applies more to apps than to websites. It is relatively easy to make a responsive website, or two versions of a website, to accommodate different screen sizes. It is much more difficult to create an app that works equally well on both small, mostly touch-driven screens, and large desktop screens. In applications the difference is more than just what information you can fit into an available screen real estate. Mobile applications often have a different UI flow and use a different set of components (widgets).
Once you have analyzed your requirements, you have to answer a key question: can a single application/website offer a great user experience on both desktop and mobile devices? If it can, go for it. If it cannot, then you arrive at the mobile first concept: these days it is often better to start with a mobile experience. It will work on large screens too, even though it may look a little strange and it will not take full advantage of a desktop environment. If you app is successful, you can always create a desktop-optimized version.
Note that I said "often", not "always". There are many applications that users still prefer to access from their desktops. If you build one of those applications, there is nothing wrong with going desktop first.
stripping away stuff scaling down your website to a mobile website is not a best practice. nor is mainting two separate websites. starting from mobile lets you focus on what you really need and on the content of your site. don't think "graphics" but think "content"
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.
There are two common ways to run mobile version of a website:
Detecting the mobile browser by server-side scripting to display mobile theme.
Having a separate subdomain such as m.domain.com or mobile.domain.com.
Which is better in action? In both cases, I think mobile search engines fairly index the mobile website. What are pros and cons for each method?
Option 1: This is more user-friendly for a few reasons. The biggest is probably link sharing and bookmark syncing. If a user on a desktop browser gets shared a link to a m.domain.com, it won't look very good, and non-savvy users will get annoyed. There are also certain users that prefer all pages to be in desktop mode (even on their mobile browser,) so all they need to do is adjust their user agent string on their mobile browser.
Option 2: Some people find this easier, but I can't think of a good reason for it with modern web development. ASP.NET MVC4 makes it really easy to create separate views for the same URL and there's simple functionality to switch between mobile and desktop mode. I would stay away from the subdomain option unless you find a very good reason to use it.
I'm not a big fan of displaying mobile theme/css since it'd be completely different than the regular css.
Also I think search engines will like that your site has more content since the mobile site will be considered as "more content"
Since they're seperate it'll be easier to deal with one or the other.
Negative is it's more work. Even though it's less complicated.
These are my 2 cents.
I think responsive design is a simplest solution without any need of sub-domain or extra effort to put on how it looks on many different kinds of devices!
Responsive design is do-and-forget-it kind of design. once it is done properly and tested well, not matter what kind of device you are using to browse, it always makes look and feel better way. No need of separate development for multiple views.
I feel media query is the way to go for small websites. http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
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.