Is it possible to remove mobile first approach in bootstrap and use regular desktop first? Basically from desktop to tablet to mobile, as it used to be.
I want to keep the responsive features, but when creating media queries to target smaller devices, I want to go from desktop > tablet > mobile. Do I need to edit some files?
Bootstrap was completely built in that 'mobile first' mindset.. It wouldn't be a simple thing to make changes on that scale. If you want to use desktop first, as it used to be, I would recommend just using the older versions of bootstrap.
You can find Bootstrap 2 here:
http://getbootstrap.com/2.3.2/
If I'm not mistaken, that one uses the desktop first approach.
I'm not sure I would use the terms Desktop first, or mobile first, as IMHO they are not really representative of what bootstrap is.
Bootstrap 2.3.2 (as to what has been mentioned as Desktop first) did not have responsive features built in, you had to 'turn them on' by including an additional CSS file (bootstrap-responsive.cs I do believe).
I wouldn't have called this Desktop first, simply that the base CSS had limited flexibility for different screen sizes.
They changed that paradigm in Bootstrap 3, now you do not need to include an additional CSS file for the responsive features, it is all included So I wouldn't call this a Mobile first approach, but an approach that is flexible for different screen sizes, regardless of the device, weather it be Desktop Tablet, Mobile, Projector, etc, I would say more its more device agnostic approach.
Now you say you still want the responsive features (so reverting to Bootstrap 2 without the responsive CSS you would lose the responsive), so is there something specific you seem to be concerned about with Bootstrap 3 that would somehow be of hindrance?
Ultimately the CSS simply rendered based on the screen size, I wouldn't call it a Mobile First, Then Desktop then Tablet approach at all, simply responsive to the screen size.
Related
I recently started using Tailwind CSS and I notice it states (and recommends) to use unprefixed classes for mobile and prefixed classes for larger screens.
This is in contrast to Bootstrap which does the exact opposite.
What are the pros and cons of those mobile-first approach?
Quoting bootstrap 5.0 official documentation here
Mobile first, responsive design is the goal. Bootstrap’s CSS aims to apply the bare minimum of styles to make a layout work at the smallest breakpoint, and then layers on styles to adjust that design for larger devices. This optimizes your CSS, improves rendering time, and provides a great experience for your visitors.
Pretty much all the CSS frameworks use that kind of approach nowadays.
It's always easier to have some basic layout for smaller screen resolutions and bigger one adapted w/ some additional styling.
Also, this website is saying that 55.73% of the web traffic is mobile. Even the 41.46% of desktop stats do have some small enough resolutions to fit styling considered as "mobile" (like the 1280x720 one).
TLDR: make your website look good for the biggest amount of users possible with as less styling as possible, then apply specific CSS for wider resolutions.
I don't know any specific cons of starting by a mobile version but maybe the case in which your webapp is targeted towards an admin kind of layout, who will be used 95% of the time on a desktop.
we have a mobile application developed using Kony. We are trying to port the same to desktop version. Everything goes well but there are small challenges wrt UI i.e., responsive UI. Since I am new to Kony please guide me if there is a way to include media queries in a Kony application or what could be trick to make the app responsive on browser.
Thanks.
Kony does not currently support media queries to say "for screens of this size use this css rules". Remember in Kony your styling is done with skinning, not CSS3. Skins do translate into css for web apps, but that's a different story.
In Kony the approach is different. You design your forms for different screen sizes based on the type of mobile device: Mobile phone, tablet, desktop, watch, etc.
If you come from a web development background like I do, you might even be expecting a grid system like in Bootstrap or Foundation. But bear in mind that the real value of responsive design is not having to worry about the resolution of the screen, except Kony already gives you this through the use of Dp units instead of pixels. So the same mobile form design will adapt to any mobile device resolution. The same tablet form will adapt to any tablet resolution and so on.
For different device types, the premise is that your desktop and mobile screens will most likely be very different, or even start alike but evolve differently over time.
So the solution is to just copy your form from the "Mobile" subtree (right-click>copy) and paste it under the "Desktop" subtree. Then you'll be able to edit them independently.
I hope this helps.
Edit:
Starting with Visualizer V8 SP2 Kony does support Responsive Design.
I'm just now diving into responsive CSS and design, and I'm wondering how I'm supposed to figure out various device widths out. I don't want to spend all day testing every single mobile device possible, I just want to get the responsive layout enough to where it works.
I saw some sites using #media only screen and (max-device-width: xx) but it seems that limits it to very specific resolutions, not actual browser window sizes.
Any advice at all would be great. I'm not new to web development or CSS, but totally new to responsive design.
It would seem that you're trying to figure out where and when to apply your breakpoints.
Rather than testing resolution on a bunch of devices why not build a responsive design that is acceptable at every resolution? There are no magic breakpoints that fix responsive websites for every device because every responsive website is going to differ depending on layout, content, etc. and there are tons of different devices with varying resolutions.
You might be thinking, "what the hell, I am not going to go pixel by pixel and check my website," but that's not really what I mean.
Finding your website's breakpoints:
Jump into a browser, navigate to your website, and open the console
Resize the viewport to a very low resolution. 320px is a good starting point.
(Note: To get the size of the viewport type window.innerWidth in console. See Resources for more ways to enhance debugging your design)
Analyze your layout. How does it look at this resolution? If you need to change the layout at this resolution then its time to add a breakpoint!
Slowly stretch the browser window until something breaks or looks horrible. At this point you'll need to insert another breakpoint.
Repeat step 4 to your heart's content
Keep in mind:
The point of responsive design isn't to make your site look good on all devices, its to make your content look good anywhere - Sam Richards
Resources:
Responsive Web Design - Programming with Anthony
Responsive Typography
Logical Breakpoints For Your Responsive Design
As mentioned in the above video, Modernizr is an awesome JS library that helps in detecting device-specific features
Responsive Design View Feature in Firefox 15+
Responsive Design View Tutorial for Chrome
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.
I've just finished reading yiibu's slideshow on their responsive site development for nokia, and one of the larger points of it seems to be to focus on mobile first, then desktops and other larger and faster platforms. ( http://www.slideshare.net/yiibu/pragmatic-responsive-design ) Not just in the planning phase, but literally develop your responsive design in the sense that the innitial styles, with no media queries applied, will be the design for your smallest platform, with the lowest capabilities. (older phones, depending on your audience) Which is backwards from what I've innitially thought to do (and from what I've seen, what others usually do as well).
The rationale was that this method would prevent people on mobile devices with lower bandwidth from downloading additional scripts and large images, by innitially downloading only the scripts and images needed for the minimum device, then loading more, and more, depending on the size and predicted capabilities of the device, eventually putting the most burden on the largest devices (laptops and desktop computers). --- This being contrary to what I've been doing, which is designing for the desktop, then adding media queries to optimize for mobile devices.
My question is, do I need to design for mobile first, then add media queries to optimize for larger devices with more capabilities in order to prevent the burden of downloading large images that wont be used on mobile devices?
.....Or can I just use sepparate stylesheets and call to a mobile stylesheet before calling to a stylesheet focused on larger browsers/devices?
The order of who you call first or not, shouldn't matter. The media queries by themselves are a bunch of if-else based on the criteria you place in them (device, orientation, width, etc). So by adding them first or last won't mean that a mobile phone will consider a style sheet for a desktop browser (example).
What you should do though, is to have the base stuff that is consistent across ALL devices (such as typography, font-sizes, background colors of elements, text color) on a base stylesheet that is readable to all devices.
This makes the actual reading of the file smaller as a specific stylesheet will be made for margins, paddings and widths depending on the actual size of the screen.
Last but not least, as to whether you should design the experience for mobile first or not, it's up to you, your way of working and what not. I know I don't. I design for desktop first and work my way down. I much prefer this.