What's the best way to make an existing website fit for mobile devices(netbooks, mobile phones based on Android, Iphone, Blackberry etc.)?
Without going as far as implementing a mobile framework I would suggest taking advantave of CSS Media Queries which will allow you to serve up different css depending on the wdith of the browsing device.
A good start would be to look at the LessFramework which has taken all the hard work out the grid calculations.
Make it flexible.
You can detect different device widths with CSS media queries: https://www.w3.org/TR/css3-mediaqueries/#device-width
Less normative explanation: https://mislav.net/2010/04/targeted-css/
Great blog post: https://webdesignerwall.com/general/the-wall-is-redesigned
The CSS3 flexible box model can also be your best friend.
Twitter Bootstrap will also give you some nice out-of-the-box responsive functionality, meaning that the site's presentation will adjust based on the type of device and the size of its screen.
And I'd recommend checking out this book.
Current now many tools available, but how to keep good user experience is the most important.
Related
I am trying to make my site responsive and was originally planning on using #media screen property in CSS, in order to optimise it for mobile devices.
I'm already using bootstrap but want to modify parts of it (which I have been doing using #media screen) for mobile devices. However, I've been told that this is unprofessional and that I should avoid using this. Is this true?
Thanks
It's hard to fathom why someone would tell you that using #media screen is unprofessional. That's how media queries work for, ya know, screens.
No, there is absolutely no reason to think that using media queries for screen, print, or speech is unprofessional in any way. It's a necessary tool in your web dev toolkit and you should feel free to use it as intended for your responsive websites.
See here for Mozilla's documentation for using media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
UPDATE
Based on the update to your question (where you added that you are using Bootstrap), I would tend to agree with #aaron-mcguire's answer below.
As he alluded to, it's impossible to discern exactly the context in which your friend/colleague/person told you it would be unprofessional to use #media screen. But if you're using Bootstrap, it probably makes sense to customize Bootstrap's built-in grid system in order to best meet your layout needs.
It's a very wide question, the answer to the whole question would be no - it's not unprofessional to use media queries, they are a fundamental part of the responsive development process. Where the question becomes a little jaded is when you mention you are using bootstrap.
As others have mentioned Bootstrap also uses media queries: https://getbootstrap.com/docs/4.3/layout/overview/
Since we have no context or design to go off it's hard to assume whether or not you would be fine using the preexisting media queries built into Bootstrap or if you would need to define your own.
Perhaps the person you were talking to has said it was unprofessional using custom media queries in place of bootstraps built in ones. Which again is hard for us to judge without seeing code/design. I would say unprofessional is the wrong choice of words - if you're trying to optimise your website on a mobile device then it's probably more a question of - is it the most efficient thing creating custom media queries in place of using the #include media-breakpoint-up(sm) { ... } one.
But again take my answer with a pinch of salt because there is no real context to the question. Web development is a constant learning process there is always somebody who is going to tell you that something you are doing isn't the correct way.
I have created a responsive website which has a mobile.css with multiple sizes to suit most common devices. What is the best practice from your experience to ensure that each size I have specified in my mobile.css will format the page correctly on all devices.
What I am wanting to achieve is a stretching of elements to fit the page when within the specified min/max limits specified in mobile.css. Are percentages the best practice to achieve this?
Let me know if you need any more information.
The best thing to do is test it on each device. You don't need to have every device that there is, you only need a device with a fixed screen size. Also try to get devices with different browsers, opera, chrome, IEmobile etc. Thats the safest.
There are websites out there that can emulate device sizes and display your website in those scales, But they do not emulate the mobile browsers. See if you can get a couple devices.(Ask friends and family or co workers.) And test it on each size you can.
Best of luck
#Media Queries are best practice in my experience refer to this documentation and there are some really nice examples
When testing FireFox has a default User Agent Plugin that can act as different Browsers, You can also get the Web developer Extension which has a resize menu to show you the responsive versions of your sites. Google Chrome has similar plugins.
I'm working on making my site more responsive. If I decrease my browser width to its minimal width, is this a good substitute for testing what will happen on mobile devices?
I don't have devices such as the iPad Mini or Galaxy S2/3 but still want to make sure the site will look good on them.
Ctrl + Shift + M on Firefox(Windows)
Cmd + Option + M on Firefox(Mac)
If you want to test your designs locally, in the browser, you can use Web Developer Add-On which will give you an option to view responsive layouts
Also you get ton's of online website out there which will do the job for you like
http://mattkersley.com/responsive/
http://www.studiopress.com/responsive/
http://www.responsivedesigntest.net/
http://screenqueri.es/
If you are using media queries, then yes just resize your browser. You can keep an eye on the window size by using an inspection tool like firebug and checking the body width.
CHECK Responsinator: Help you to test site on different devices and different orientations
http://www.responsinator.com/
I would suggest finding browser plugins that allow you to resize your browser to specific browser dimensions. Then set up the common sizes using it...320px, 480px, 600px, etc, and/or whatever needed for your project.
For Chrome, I use Window Resizer.
I use your described method myself, it is not 100% accurate, some textual sizes could change slightly especially if you are using em or rems. If testing box layout and stuff like that it can be fairly accurate.
Another solution would be to use a service like http://quirktools.com/screenfly is a relatively good solution also.
The best solution that I also use is Browser Stack: http://www.browserstack.com/ It is not free however. Browser Stack also allows you to test different operating systems, different browsers, and a multitude of different mobile devices.
The best way to go is with the devices, but, if some or all the devices are not available then you will have to resort to some other ( good ) tools out there. Here are a few examples :
Testing Tool 1
Testing Tool 2
Keep in mind, these sort of tools will show you pixel perfect output and the user interaction/behaviors maybe different.
I'm newbie for developing mobile website. I very confused between two methods because I dont have any experience this it. Whats more better between two methods: css query when we using all of width device in css file or using jquery mobile that use php technique for differented user that use desktop or mobile [user->php?->mobile use jquery mobile/desktop use css standard]?
Many thanks for this answer
I will classify methods by their importance, from most important one to less important:
Client side detection
Using Modernizer javascript library to detect mobile / desktop environment
Server side detection
Using Modernizer Server or WURFL. Little complex then first solution but much more detailed (if you need more data about used device)
CSS media queries
Bad solution to detect desktop /mobile devices. Current mobile devices can have screen resolution equal to desktop platform
JavaScript based browser sniffing
Worst solution possible. Specially if you want to make distinction between smartphones and tablets.
To find more about this solutions, read my other article/answer with examples: https://stackoverflow.com/a/15055352/1848600
I have to post an answer in here since this comes first in search engines and accepted answer is not accurate.
There are two main concerns regarding responsive designs:
Content: Content should be restructured based on the width/height of the view port so the user can view the content without the need of constant zooming in and zooming out. This needs to happen solely based on the resolution of the view port regardless of the device. It could be a mobile device or a small window in desktop. This mainly involved the look and feel of the website and it is absolutely fine to use media queries. Even IMHO it is the best to use media queries to have the separation of concerns between your view and logic. No web designer likes to see random width or height showing up on their html elements during debug without knowing where are they coming from. Media queries will help you to resize the elements and show or hide them; however, in some situations you may need to move elements around; I usually do these using ng-if or ng-switch in angular js in combination with modernizer.
Functionality: If you need to turn on/off features based on the device functionalities, do not depend on the viewport specifications; use the vast libraries available in JS.
On a side note smartphone browsers seem to render at far lower resolution than actual device screen dimensions. Bust out a quick JS to show you your window resolution and run it on your phone.
Example: Chrome runs at 360x640px on my android screen of 1440x2560px.
Based on the MSDN link
http://msdn.microsoft.com/en-us/library/system.web.ui.page.clienttarget.aspx
Assuming I want to see how my page will look like on safari or mobile firefox, how do I implement it using Page.ClientTarget?
I can't seem to find any good resources for this API.
Thank you.
You could just use responsive design, that way you are not relying on the ClientTarget, but rather on the size of the browser.
Responsive Design basically means your design adapts to the size of the screen ... so tablets and phones can have different views of the same page.
Bootstrap is a decent place to start, but there are other frameworks.