Is it necessary to develop a separate desktop/mobile versions of a website?

[Maximilian]

Or can I just make a website that will scale itself down automatically? I was looking at this bootstrap template:

http://getbootstrap.com/examples/signin/

Lovely! Its simple does the job, seems to scale down really well when I resize the window (so I assume this means it will scale down on a mobile device?). If I made a website using stuff like that there would be no need for separate versions right?

 

[Crusty]

For the vast majority of use cases no not at all.

Responsive web design is what you are looking for.

The big trend these days is to build your site mobile first using Bootstrap or Foundation(or any other number of responsive grids) and then add more features and UI elements to the larger tablet and desktop versions through media queries.

 

[Leros]

If you can start with a responsive template that'll get you a "mobile usable" website, which is a LOT better than nothing.

At some point, when you're trying to optimize your product, you'll probably want to have separate websites as some features makes sense on desktop but not mobile and vice-versa.

 

[Maximilian]

Okay that sounds fine. To use bootstrap I just dump the folder in the projects directory yeah? Theres nothing more to it than that?

Like so:

Thats what ive done and it seems to work fine :thumbsup: just wanna make sure im not screwing this up.

Also is there a best way to test for a mobile device? Stackoverflow suggests testing the userAgent for the OS name string, other methods involve using screen.width <= aNumber to test the screen width.

EDIT:
Found this awesome site for testing mobile stuff:
http://www.browserstack.com/responsive

Testing the userAgent seems to give better results, it will still give the mobile site for the tablets :thumbsup:

 

[Crusty]

Well it depends on where you need to run the test.

Generally you can rely on the User Agent header from the client and some regular expressions to get a fairly accurate test. You could do this test both server/application side and in javascript.

If you need to do specific things with your CSS based on the dimensions of the browser window you can use media queries in your CSS to apply specific style rules to different sets of resolutions.

 

[Ken g6]

Okay that sounds fine. To use bootstrap I just dump the folder in the projects directory yeah? Theres nothing more to it than that?

Well, once you're using Bootstrap, you want to make your site utilize its features.

Testing the userAgent seems to give better results, it will still give the mobile site for the tablets

It looks like you're testing for two different things here which may not be found together. There's testing for screen size with @media queries. Then there's testing for touch capability with JavaScript.

Some people may still have very small screens, or may shrink their browser windows, on a desktop PC. Some Windows 8 laptops have touchscreens. I have an Android tablet that can use a touchpad and has a mouse pointer when I do.

Which leads me to this answer:

Tracking the current capabilities of a given user is complex, unreliable, and of dubious merit

In other words, the best thing to do is probably to make the site responsive at different sizes, and both mouse-friendly and touch-friendly at all times.

 

[purbeast0]

i'm a big proponent of bootstrap. they have demos of how to use all of their components on their website. it's very easy to make a responsive site using bootstrap.

 

[Crusty]

i'm a big proponent of bootstrap. they have demos of how to use all of their components on their website. it's very easy to make a responsive site using bootstrap.

I personally prefer Foundation and it's associated tools. They used to be a step ahead of Bootstrap in terms of adding new features, but lately Bootstrap has stepped up their game and they are pretty much equivalent.

It really doesn't matter that much though...

 

[purbeast0]

I personally prefer Foundation and it's associated tools. They used to be a step ahead of Bootstrap in terms of adding new features, but lately Bootstrap has stepped up their game and they are pretty much equivalent.

It really doesn't matter that much though...

i've never used foundation before (or heard of it) so i can't really comment on it. i am going to check it out though. i'm fairly new to bootstrap. we started using it at my job like a year ago and now i love it. i've used it for side projects a couple times and it's just so easy to get a nice functional and clean site up and running with it. it's especially great for prototyping things from the get go. but it's also very easy to use it in real world sites and make it look different than every other site.

 

[Ken g6]

i'm fairly new to bootstrap. we started using it at my job like a year ago and now i love it.

We started going responsive where I work about the same time. Some new guy came in and re-did one site in something not Bootstrap, which I think was Foundation. This year we went back and re-did the site again in Bootstrap. I don't think this was motivated by Foundation being bad, though; just by wanting to standardize on Bootstrap.

 

[purbeast0]

We started going responsive where I work about the same time. Some new guy came in and re-did one site in something not Bootstrap, which I think was Foundation. This year we went back and re-did the site again in Bootstrap. I don't think this was motivated by Foundation being bad, though; just by wanting to standardize on Bootstrap.

yeah i was just browsing foundation's website earlier tonight after reading this thread, and just the website alone makes me prefer bootstrap. the foundation documentation isn't nearly as clean/easy to read as the bootstrap stuff is, so i could see myself preferring it for that reason alone.

it's funny though because i'm using angular at work right now too (and really like it) but the docs for angular are TERRIBLE.

 

[Crusty]

yeah i was just browsing foundation's website earlier tonight after reading this thread, and just the website alone makes me prefer bootstrap. the foundation documentation isn't nearly as clean/easy to read as the bootstrap stuff is, so i could see myself preferring it for that reason alone.

it's funny though because i'm using angular at work right now too (and really like it) but the docs for angular are TERRIBLE.

Back when I chose to use Foundation(version 4) Bootstrap was still desktop-first and the SASS packages for it were maintained by a 3rd party. With the latest release of Bootstrap it is mobile-first and they distribute a SASS package now.

Those were pretty much the reasons for my decision, but now it's really a tossup.

I've been playing around with ReactJS for front end stuff and I quite like it. Angular feels like it does too much, especially when you are working within the confines of Rails.

 

[Leros]

Back when I chose to use Foundation(version 4) Bootstrap was still desktop-first and the SASS packages for it were maintained by a 3rd party. With the latest release of Bootstrap it is mobile-first and they distribute a SASS package now.

Those were pretty much the reasons for my decision, but now it's really a tossup.

I've been playing around with ReactJS for front end stuff and I quite like it. Angular feels like it does too much, especially when you are working within the confines of Rails.

I'm looking into using Flux/React for my client apps in the future. I like the concepts behind Angluar, but I don't like the idea of mixing application code into my html. I can't imagine how that looks in a multi-year 50,000+ line project.

 

[Crusty]

I'm huge fan of the way that React is designed, having a virtual DOM that you program through JS and letting React take care of updating the real HTML on the client gives you the perfect layer of abstraction for creating rich UIs.

Also the fact that it makes no assumptions about your data or server side stuff makes it appealing to me because it makes both the front end and back end modular to the point where you could swap them out given you maintain the data contracts between the two. Using Flux to manage your data makes that pretty easy too as your data contracts are defined there.

That said, I've found, at least with Rails, that the best usage of React has been to power small portions of the site to make them interactive while still letting the routing and page rendering happen on the server side. It sort of ends up as a hybrid app where any page rendered by the server can have zero or more React components, most of which are forms or data filtering/searching controls.

 

[Leros]

I'm huge fan of the way that React is designed, having a virtual DOM that you program through JS and letting React take care of updating the real HTML on the client gives you the perfect layer of abstraction for creating rich UIs.

Also the fact that it makes no assumptions about your data or server side stuff makes it appealing to me because it makes both the front end and back end modular to the point where you could swap them out given you maintain the data contracts between the two. Using Flux to manage your data makes that pretty easy too as your data contracts are defined there.

That said, I've found, at least with Rails, that the best usage of React has been to power small portions of the site to make them interactive while still letting the routing and page rendering happen on the server side. It sort of ends up as a hybrid app where any page rendered by the server can have zero or more React components, most of which are forms or data filtering/searching controls.

I've been using Closure templates, which are nice because you can compile them to Java for server side rendering or Javascript for client side rendering. I render some of the page on the server to make the first page load appear faster and then do all my updates on the client.

When I move to React, I think I'm going to do all my rendering on the client. The JS can render the empty page frame and them make a request to get the data to render the actual view.

I'm not sure which will be faster, initial server side rendering (which means sending lots of HTML) or initial client-side rendering (which means an extra round trip to get JSON, but less data overall). My suspicion is that it will be slower on desktops with lots of bandwidth and faster on mobile devices and desktops with low bandwidth.

 

[purbeast0]

Back when I chose to use Foundation(version 4) Bootstrap was still desktop-first and the SASS packages for it were maintained by a 3rd party. With the latest release of Bootstrap it is mobile-first and they distribute a SASS package now.

Those were pretty much the reasons for my decision, but now it's really a tossup.

I've been playing around with ReactJS for front end stuff and I quite like it. Angular feels like it does too much, especially when you are working within the confines of Rails.

yeah when we started using bootstrap, we used LESS, which was provided by them, so it was definitely when they were maintaining everything.

LESS and SASS are pretty much interchangeable though, as far as like how they work and the syntax. i've used both of them professionally and if you have used one, you can use the other no problems.

 

[Rowland]

Found this awesome site for testing mobile stuff:
http://www.browserstack.com/responsive

Testing the userAgent seems to give better results, it will still give the mobile site for the tablets :thumbsup:

You can use Chrome to test mobile stuff too...
Just press F12, click on a mobile icon pick a mobile device and hit reload.
It's MUCH faster than browserstackc.om... Here's a simple screenshot to help you find that mobile icon: http://prntscr.com/6ibdw1

 

[Crusty]

You can use Chrome to test mobile stuff too...
Just press F12, click on a mobile icon pick a mobile device and hit reload.
It's MUCH faster than browserstackc.om... Here's a simple screenshot to help you find that mobile icon: http://prntscr.com/6ibdw1

Well using browserstack for testing in browsers during development phase probably isn't the best use of their services.

We use them to run our set of integration tests on as many browsers as we can as part of our continuous integration system during deployments.

Use git to push to a remote branch, and sit back and wait for the results.

 

[Maximilian]

You can use Chrome to test mobile stuff too...
Just press F12, click on a mobile icon pick a mobile device and hit reload.
It's MUCH faster than browserstackc.om... Here's a simple screenshot to help you find that mobile icon: http://prntscr.com/6ibdw1

Hah thats awesome! Cheers man :thumbsup:

 

[Rowland]

Hah thats awesome! Cheers man :thumbsup:

you're welcome