Convert ASP.NET html pages to fit in mobile device screens

Question

User-1701433212 posted

I have created an old ASP.NET data entry web site that has been working fine with pc users. Now my project manager gave me some smart phone html graphics samples and asked me to implement them into my web pages so that they can fit in mobile device screens to serve mobile users. For countless hours I have been juggling over css and html modification. So far no viable result has been achieved. Anyone who has successfully done this kind of conversion please kindly advise. Thanks.

Answer 1

User753101303 posted

Hi,

It really depends on how your site is currently built.

The general concept you are looking for is likely https://en.wikipedia.org/wiki/Responsive_web_design. A popular framework is http://getbootstrap.com/. You could also have a look at https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Once again how easy it is will likely depends on how the current site is currently written.

BTW if the site is really complex, another option could be to create particuliar simplified mobile pages that won't offer the full experience but rather what makes more sense for a mobile user.

Answer 2

User409696431 posted

If you wrote your application without considering mobile devices, it could end up being a page-by-page job to make it mobile friendly, possibly changing the html, almost certainly adding media queries and JavaScript.   I've converted older sites to mobile friendly ones.  The simpler the original html structure, the easier it will be, and tables will be the most difficult to handle.  Depending on how you created your data entry forms, you may need to change which controls you used to have the html elements that end up on the page be floatable/movable. There is no general set of instructions to follow.   If you are not already familiar with media queries and mobile design, you will have a learning curve and this will not be a quick project.  Whatever you do, test all changes in all the browsers you support, frequently.

The more common thing to do today is to start by using a framework that is inherently mobile friendly.

Answer 3

User-832373396 posted

Hi ASPBabe,

they can fit in mobile device screens to serve mobile users. For countless hours I have been juggling over <g class="gr_ gr_2271 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="2271" data-gr-id="2271">css</g> and html modification.

Sir, I suggest that you could tell your boss and re-design another mobile version for the mobile because your PC site has built.

and that's the popular method. and at the same time, it means that we need to create another project for the mobile version site.

In the mobile version site, it just needs put in more less page. and less function in one page than common PC page;

Now my project manager gave me some <g class="gr_ gr_1114 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del" id="1114" data-gr-id="1114">smart phone</g> html graphics samples and asked me to implement them into my web pages

If it only needs to do some change to a few pages,  I suggest that you could add js to check if it 's mobile screen, if yes, then redirect to the mobile page;

Both all means it needs to build two different pages, one is for PC, one is for mobile;

 2 and when only we start to build a new site, that 's a working way to use   <g class="gr_ gr_2165 gr-alert gr_gramm gr_hide gr_inline_cards gr_run_anim Style multiReplace replaceWithoutSep" id="2165" data-gr-id="2165">http://getbootstrap.com/</g><g class="gr_ gr_2165 gr-alert gr_gramm gr_hide gr_inline_cards gr_disable_anim_appear Style multiReplace replaceWithoutSep" id="2165" data-gr-id="2165"> <g class="gr_ gr_2183 gr-alert gr_tiny gr_gramm gr_inline_cards gr_run_anim Punctuation replaceWithoutSep" id="2183" data-gr-id="2183">,</g></g> or other Plug-in for responding. 

3 if you still need to change the current PC Html to Mobile Html, A guy said that he deleted all content ( html, CSS) from PC html just leaving the key content, For example, the detail page, just leave the textbox and submit button, then all re-design with responding; and re-sign the navigation bar

Good Luck!

With regards, Angelina Jolie