I got a requirement! I would like to convert Normal Web Sites for Mobile Web Sites.
Actually I want a on premise software recommendation that has the capability to do the same as www.dudamobile.com for example.
Kind regards.
(Sorry for my English)
one of the things you could do is implent the Bootstrap CSS Framework (or any other CSS Framework), to style the website more mobile freindly.
Alot of CSS Frameworks are made to auto-adjust more freindly to native mobile browsers and other mobile browsers, and work for various screen sizes.
see: http://getbootstrap.com/css/#overview-mobile
Related
First,im newbie to responsive design.So far from my reading about responsive design, I have
learnt ,its about
flexible layouts
media queries
media queries came with CSS3
But where ever i have read about responsive designs on internet HTML5 ,CSS3 and Responsive design has been spoken together.My Question is
Is HTML5 necessary for a Responsive design ?
Does HTML5 tags like header or footer tag help in anyway to make the design responsive or its all about semantics ?
What about html4 and responsive design ?
thanks
Responsive design isn't specific to web pages, but that's where you'll most commonly hear that term used. I can make a responsive design in a Windows Form application via TableLayoutPanels, that is, the form scales nicely so it looks good full screen, and when it's only 1/8 of the screen.
But really, for desktop applications, there's not as much of a need for a responsive design, since most screens for a desktop / laptop aren't smaller than 13 inches or so, especially when writing business applications.
Mobile applications / web applications (for the most part) are the only things that get accessed on a wide range of devices with varying screen sizes, which is why HTML5 and CSS get talked a lot about when discussing responsive design.
There are a lot of mobile-friendly, responsive frameworks out there for developing for the web, one of which, my personal favorite, is Twitter Bootstrap. Using some media queries, but also defining widths as percentages of the screen, not pixels, is key in responsive design.
Hope that helps. Basically, responsive design isn't just about the web, but that's the most common place for it to be put into practice.
When developing mobile apps using PhoneGap for smartphones and tablets, how to reuse most of the UI code? The reason why I am asking is the UI layout for smartphones apps and tablets will need to be different due to the difference in their screen sizes.
I would really like to know what your recommendation is so that I can take as much advantage of using PhoneGap as possible. Thank you for your guidance in advance.
Framework I am considering to use are:
PhoneGap
jQuery Mobile
Backbone.js
While We deal with the UI design in hybrid applications in Phonegap, using css techniques is a simple and good option. I have some links to share with you, which is worth reading and will be helpful in solving your problem,
link 1 : Mobile Web Design: Tips & Techniques
link 2 : Liquid layouts the easy way
link 3 : The 5-Minute CSS Mobile Makeover
Hope, these links will help you.
I would detect the useragent, and then display the correct UI depending on the device. I do this in my jQuery Mobile app (although I don't use PhoneGap) with PHP.
I am developing a page that needs to be able to view on a mobile platform. What resolution should be the standard for this? I live in Norway, and there are mostly iPhones and HTC-phones on the market here.
Any ideas?
If you want to accommodate more than just iPhone and HTC resolutions, I would consider incorporating responsive design into your site. Google also recommends it.
I have created one HTML5 mobile web app and tested in different devices like iphone,ipad,android phones and tablets.How I can optimize the size and resolution for this app in all these different devices?
You could use CSS media queries to optimize your web app for different screen sizes rather than optimizing it for different devices.
Responsive Web Design is what you want. The Responsive Web Design article on MDN is good introduction and includes links to many other helpful articles.
Okay I got some good advice for Mobile Detection but still having an issue with themed tablets as the icons will be larger for a tablet view then a mobile device. I'm using jQueryMobile as the framework and it does detect the iPad (And I'm sure other tablets are on the way), but how can I detect if it's a tablet or mobile device? would I just go with the screen size?
If that's the case than what's the largest screen size for a mobile device or the smallest screen for a tablet?
is there a better way?
jQuery Mobile adds classes to the body tag which allows you to create a single CSS for all the devices.
See here: http://jquerymobile.com/demos/1.0a3/#docs/api/mediahelpers.html
update
As of beta2 helpers will be deprecated and set for removal. You should take a look at media queries which were used to put these classes in there anyway.
I'd suggest using media queries and targeting a different CSS stylesheet.
Have you ever considered a device detection library like wurfl, tera-wurfl or the proprietary deviceAtlas?
Have you considered the benefits of server side detection? OpenDDR offers .NET and Java libraries, licensed under LGPL.
You can have a look at http://www.openddr.org
We are starting to develop using Formfactor detection libraries such as FormfactorJS - note, I created this.
The theory being using the same semantic HTML, you can specialize your CSS and Javascript using for a given class of device (smartphone, tablet, desktop etc) whilst also being cognizant of responsive design to individual device profile using Media Queries.