locked
How to develop a website which opens in mobile as well without changing the url RRS feed

  • Question

  • User-85522823 posted

    I have seen one website when you reduce the browser size it automatically converts itself into mobile compatible without changing the URL

    please go through http://www.mayoclinic.org/ website and try to reduce the browser window size.

    I would like to know how can we do this.

    Thanks,

    Wednesday, February 5, 2014 1:40 PM

Answers

  • User-1440927403 posted

    There are multiple way you can have same page layout differntly. My recent project is in Asp.net MVC using bootstrap (getbootstrap.com). I do not want to manage multiple pages so bootstrap is nice where you can tell it hide control if screen size is smaller... Here is the link where you can see some of the samples: http://bootswatch.com/ (make your browser smaller and see how it chagnes the menu and the content).

    http://getbootstrap.com/

    http://www.asp.net/whitepapers/add-mobile-pages-to-your-aspnet-web-forms-mvc-application

    Good luck!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 5, 2014 2:13 PM
  • User71929859 posted

    I have seen one website when you reduce the browser size it automatically converts itself into mobile compatible without changing the URL

    please go through http://www.mayoclinic.org/ website and try to reduce the browser window size.

    I would like to know how can we do this.

    That's called Responsive Web. It's the same page. The layout of the page changes according to the screen size. You can achieve that using CSS3 Media queries. So the different styles applies for the same page depending on the screen size. There are responsive UI frameworks like Bootstrap, Zend foundation etc. You can have a look at them too.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 28, 2014 7:45 PM

All replies

  • User-1440927403 posted

    There are multiple way you can have same page layout differntly. My recent project is in Asp.net MVC using bootstrap (getbootstrap.com). I do not want to manage multiple pages so bootstrap is nice where you can tell it hide control if screen size is smaller... Here is the link where you can see some of the samples: http://bootswatch.com/ (make your browser smaller and see how it chagnes the menu and the content).

    http://getbootstrap.com/

    http://www.asp.net/whitepapers/add-mobile-pages-to-your-aspnet-web-forms-mvc-application

    Good luck!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 5, 2014 2:13 PM
  • User25800215 posted

    you have to use Responsive design to make it copatible with devices, but data information is same for all the sites. If data is different for the both u can try with different presentation layers still domain logic is will be same as per the device it will decideich wh presentation layer need to used.

    IF you use same for both mobile and desck top, mobile web site will hit performance due to smart device limitations....

    Thursday, February 20, 2014 6:36 AM
  • User71929859 posted

    I have seen one website when you reduce the browser size it automatically converts itself into mobile compatible without changing the URL

    please go through http://www.mayoclinic.org/ website and try to reduce the browser window size.

    I would like to know how can we do this.

    That's called Responsive Web. It's the same page. The layout of the page changes according to the screen size. You can achieve that using CSS3 Media queries. So the different styles applies for the same page depending on the screen size. There are responsive UI frameworks like Bootstrap, Zend foundation etc. You can have a look at them too.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 28, 2014 7:45 PM
  • User1598496393 posted

    That's called Responsive Web. It's the same page. The layout of the page changes according to the screen size. You can achieve that using CSS3 Media queries. So the different styles applies for the same page depending on the screen size. There are responsive UI frameworks like Bootstrap, Zend foundation etc. You can have a look at them too.

    My opinion is the same as Ruchira. You can make your site to be responsive by using CSS3 in your site. I also am learning to make my site be responsive Smile

    Saturday, March 29, 2014 5:11 AM
  • User281315223 posted

    This ultimately depends on what you want to do, the applications and how you would like to build them and what devices that you want to target.

    Web Applications and Responsive Design

    If your intention is to develop a web application or web site, then you should be alright as far as it being "universally accessible". Regardless of how you elect to develop it (Web Forms, MVC, etc.) it will run within just about any browser on any device that has access to the web. If your concerns lie with it's appearance, then you might want to consider designing it using a Responsive Design so that it maintains a uniform look across all devices and platforms.

    Consider using one of the many Responsive Design Frameworks that are out there for your site, such as the Twitter Bootstrap. Responsive design focuses on making your site easily usable and accessible from basically any resolution and devices available.

    These could fairly easily be integrated into a Web Forms, MVC application or simple Web Site and would basically be all that you would need to use : 

    This would really eliminate having to distinguish between a mobile and traditional (desktop) CSS file for each of the pages within your website. The above articles are specific to integrating Bootstrap (one of the most popular Responsive Design frameworks out there) into your ASP.NET Applications.

    The MVC "Mobile" templates that are offered through Visual Studio could be a variant of this, however it wouldn't be taken to the extreme that it is within one of these frameworks.

    If you need to Develop Actual "Native Applications"

    There isn't going to be any completely universal application that is going to work across all devices  and environments in a "native" application sense. Each application is going to require its own development to target details specific to each device (for instance iOS, Android, Windows 8 will all be different environments and would all require their own applications.

    I would highly recommend looking into Xamarin and some of their products, which are specifically geared for developing native iOS, Android, and Windows Mobile applications using C# (so the transition would be very minor and you wouldn't have to go learn Objective-C etc.)

    I have used them in the past to develop some iOS "Apps" and I was more than impressed with how easy their tools were to use and how smooth the transition was from working in something like Visual Studio to Xamarin Studio (the iOS IDE for Xamarin).

    Depending on your Application and what it does, you may also consider looking into PhoneGap, which aims at creating applications in a cross-platform way that can be installed on Android, iOS and other devices.

    Saturday, March 29, 2014 9:37 AM