My question is about resolutions and user interface of web sites. I am developing a free web site for a non profit organisation for having experience and I have not worked with mobile apps/ web sites. Will thankful if you please can help me.
Can you please guide me as per best practices UI for computer browser and for mobile are same or two different UI are developed ?
I am also confused what is standard resolution for a web site and how to manage resolutions on different screen sizes (of course cannot develop for different screen sizes).
Please guide.
Thanks
A common technique in use right now is responsive design. That is, your design and layout of the page will adapt for the resolution and orientation of the device it is being displayed on, without a need to change anything.
The easiest way to get started with this is CSS media queries. Check out this article for more general information: http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/
Related
I want to make a mobile friendly version of my website, but I have this dilemma.
What is better? Use CSS3 Media Queries to make main website responsive or detect if user is using a mobile and redirect to a new one (for example m.example.com).
This really is depending upon what kind of website you are having. Your decision will not only affect the way your site is presenting, but also how you would deliver business strategies (if it's a commercial thing).
Responsive design will work just great with simple websites that doesn't really need too many detailed experiences. Company profiles, or landing pages will fit best with RWD.
Once you're building much more complicated application, you might need to re-think how the user will interact with even the tiniest part of it. Note that using RWD often require greedier resources compared to a dedicated mobile site. If you're dealing with e-commerce, social media, or some other mature applications, a mobile version is a way to go.
I have PHP-MySQL dynamic corporate website. All text and image based content is managed from admin panel. Desktop version website is displaying very fine in mobile phones too. Layout is also fine and structured.
Now I want to create mobile version of this website but I am novice in this field. I have read few topics on this website about mobile version of website but I have found no answers I am looking for. I have also read about responsive website solution.
Please guide me with some helpful info so I can go in right way.
Q 1. If I use responsive website technique, then same website and it's layout will be used for desktop as well as different screen resolution mobile phones? Please reply.
If an answer of above question is 'YES' then please reply for below.
Q 2: Will I need to redesign my existing desktop version website using responsive webdesign technique so it can work in all screen resolutions devices? Please reply.
If an answer of above question is 'NO' then please reply for below.
Q 3. My current desktop website content is managed from admin panel. So if I host mobile version website on sub domain (like m.sitename.com) then will I able to use same content for both main domain as well as sub domain where mobile version website is hosted? Please reply.
Q 4: Is it compulsory to use any tool like http://www.mobify.com/ to design mobile version website? or can I design it in same way as I am doing for my desktop version website? Please reply.
Thank you in advance,
First to answer your questions:
Q1: Yes, if you're using responsive web design you can use the same layout for all kinds of devices.
Q2: Depends on your project, but you'll probably need to rewrite some parts of your layout to make it more responsive.
Q3: Yes, if your code base is somewhat reusable this should be very easy.
Q4: Nope, you don't need any extra tools. You could write everything yourself.
Depending on how complex your front-end stuff is, I'd recommend to use a fronend framework like Bootstrap, Foundation or INSERT_ANOTHER_MOBILE_FRIENDLY_FRONTEND_FRAMEWORK_HERE. These frameworks make it very easy to write responsive websites.
Our company decide to not support IE7-8 which is super good new year news And I want to apply zurb-foundation5 css to our existing medium size e-commerce site so mobile user can have better UX/UI experience. However, I realize that many elements such as html or asp needs to be restructured and duplicated if I want to make the site display well on mobile. This would cause slow speed of site experience and perhaps even some other issues. However, If I made separate site for mobile, I would have to maintain two sites!!
My question is
What are the pros and cons of making a separate site for mobile vs. merging responsive css to current site and modify, rewrite, duplicate, move around html/elements?
Pros of a responsive site:
A single codebase for a website can serve both mobile and desktop users.
Easy to maintain and change code for all users.
Cons of a responsive site:
The mobile version of the website loaded on smartphones has the same size and complexity as the desktop version.
The loading time will be much higher than the mobile counterpart.
I'd recommend you to go with adaptive design which most of the businesses are adopting these days. In an adaptive design approach, a server can choose how to optimally render pages, as well as enhance or remove functionality on the fly, based on the capabilities detected. It allows you to focus on different kinds of consumers with different device configutrations.
Adaptive design has following advantages -
It allows you to capture user intent based on user specifications.
The code need not be written from scratch for the mobile site.
The performance and load time is faster than a responsive website.
You can refer to this article for further reading - http://venturebeat.com/2013/11/19/responsive-design-adaptive/
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.
I'm starting to develop WAP (websites for mobile devices) websites, however I'm finding there are such a wide range of mobile devices that stretch from the advanced iPhone to older blackberries. Are there any helpful sites that discuss best techniques and good practices so that I'm not ignoring any of the major issues?
Cheers
I suggest looking through the articles here, here, and here. If I was tackling this problem I would try to group the various mobile devices into as few unifying groups as possible. This way you could detect the device server side and provide the user with the best looking site for their device. For instance the iPhone has all that webkit stuff that other mobile phones don't render so obviously it's site would be different from on old Nokia with a browser. I think looking up best practices for each individual group of devices is the way to go.
I have an existing website that I need to develop a small portion of for mobile devices. For reasons that are not in the scope of this entry - I am using the Microsoft platform and tools - VS2008, ASP.Net, VB.net, .Net AJAX Framework, jquery.
I have 2 questions:
What is the best page size (Height and Width - mostly width) to make the pages as I do not know what devices will be accessing the mobile portion of the site. I can detect if they are mobile devices and direct them accordingly to the mobile portion but I do not want to write customized content for each mobile device - so I would like to create something that will be sort of a one size fits all mobile app.
Any suggestions or links for Mobile Web development in the .Net 3.5 framework environment?
Thanks
Your average mobile device still has a very small screen resolution.
A quick google found a number of sites listing this sort of thing, or pointing to lists, the best one I saw was:
Cell phone screen resolution by Brand and Model
or for a better idea of average:
Cell phone screen resolution, sorted by size
As for building the mobile version, I'd start with System.Web.Mobile, and work my way on from there - taking in System.Web.Ui.MobileControls, and also their walkthroughs.
And can I say "thank you for thinking of us"? As a user of the "mobile" internet, it's always a pain to come across a heavily javascript enabled site (I'm looking at you SO) that doesn't work on my phone (Windows Mobile 6.1, with Opera Mobile 8.5 installed) because of limited (or percived limitations) in the JS support.
Just had another thought - with everyone talking about DRY - looking into an MVC framework would be a really good thing to do - then your controllers can all be the same, and just return a modified view based on the browser caps - Scott Hanselmann included a bit about this in his MIX talk, all good stuff.
I knew I had more here.
Scott also had a podcast (ASP.Net and the mobile web) on this, and the Mobile Device Browser Files are on codeplex
We are developing a mobile app right now as a separate application. The reason for this design decision is that we won't use our existing pages because they contain too much information. So while Scott has a point about being "DRY" to an extent, it is not an accurate generalization to make.
Mobile apps should be optimized for really small screens and low bandwidth. Reduce images, JS files, etc. as much as possible. This will improve the user's experience. The best thing you can do is to get a mobile device or some simulators and check out how they perform/look on those devices. Here's a cool one for iPhone.
Also, keep in mind that many mobile users only use mobile apps for a few minutes - and only to get to critical information quickly. Your app should make it easy for the user to access only the information they need with the lowest amount of few clicks and page loads.
Ideally you should be developing pages that work regardless of screen size. Creating separate pages for mobile devices means having to update things in two places when they need to change. This goes against the principle of don't repeat yourself. Create a stylesheet using the handheld media type to serve your content to mobile devices. This allows you to reposition the elements into a single-column format quite easily. Just beware that many mobile devices will report to the server that they accept both handheld AND screen media types, because they are trying to offer a consistent user experience with the desktop. You will likely need to override some screen rules in your handheld stylesheet.
There are several distinct display sizes that is worth considering when you build up your XHTML+CSS templates.
They are as follows (width in px):
120 - I suspect there is no need to worry about smaller displays than 120px. Less than that would probably have to be served in WML anyway.
128
176
240
320 - probably the largest width you need to worry about at the moment.
All variations should be suited with these widths. Also consider setting the width with something around 10px less than the view port (e.g. 240 must be 230). Same goes for images. That is necessary because of the scrollbar which is shrinking the viewport even more on many mobile browsers.
There is no need to worry about height, as with normal browsers, that is not a concern - one can always scroll down. However, a good advice might be to keep pages relatively short.
Oh, and I will point you out WURFL, although I haven't used it myself, perhaps you might find it useful.