Hack Forums
Optimizing website for Mobile - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Optimizing website for Mobile (/showthread.php?tid=5155512)



Optimizing website for Mobile - T0ucaNSaM - Feb 1, 2016

I have a website that I did my next step is to optimize it for Mobile.

However coding and programming a website for every single different types of mobile devices is very time consuming.


Found something like this https://www.dudamobile.com/

Anyone have experience or ideas for optimizing your site for mobile other than the

PHP Code

<?php 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
or is that the only way for real. 😧😧😧


Here is my site http://www.testsun.comxa.com/

on mobile it just not right.... SUGGESTIONS!?! PLEASE!


* - Exemplification - Feb 1, 2016

http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design


* - BatDan - Feb 1, 2016

CSS3 Media Queries is the proper way to do this, you can define dimensions for the CSS.

Example:
Code
.class {
  width: 50%;
}
@media screen and (max-width: 700px) {
  .class {
    width: 100%;
  }
}

Essentially, what is happening above here is that the width will be affected from 50% too 100% if
the viewing area (Dimension) is smaller than 700px.

The code:
Code
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Is just telling the unit to view the page in the desired dimensions for best UX (Though you have to optimize your website!)

ALSO, did you know that your SEO rankings WILL be affected by your design? Responsive design is key to better SEO.


* - Numinous - Feb 1, 2016

You have to use Bootstrap Framework if you want to make your website fully mobile friendly on all devices


* - T0ucaNSaM - Feb 2, 2016

(Feb 1, 2016 09:58 PM)APEX.HACKO Wrote:  You have to use Bootstrap Framework if you want to make your website fully mobile friendly on all devices

Thinking I might have to do the Bootstrap thing.

🤝🤝


* - eyeShockk - Feb 2, 2016

(Feb 2, 2016 09:19 AM)T0ucaNSaM Wrote:  Thinking I might have to do the Bootstrap thing.

🤝🤝

Bootstrap definitely makes it easier using the responsive 12-grid system.
You could also do it without, but it will take a longer time for a similar (or worse, or better) result.


* - D3xus - Feb 2, 2016

(Feb 1, 2016 09:58 PM)APEX.HACKO Wrote:  You have to use Bootstrap Framework if you want to make your website fully mobile friendly on all devices
This is not true. Bootstrap makes it easier for responsive design, but it is by no means the only way to develop a website that plays nicely with mobile. There are many other frameworks and content management systems that are responsive by default, or have the ability to be responsive quite easily (WordPress, Drupal).

(Feb 2, 2016 09:36 AM)ShadowBoost Wrote:  Bootstrap definitely makes it easier using the responsive 12-grid system.
You could also do it without, but it will take a longer time for a similar (or worse, or better) result.
This is more accurate. Making an existing website responsive is not impossible, just takes a little work.

Here are some guides:
http://www.w3schools.com/css/css_rwd_intro.asp
http://learn.shayhowe.com/advanced-html-css/responsive-web-design/
https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/


* - Hash G. - Feb 2, 2016

You could write all media-queries by yourself or just use a framework. I personnally would choose a framework because it's easier to learn and use but that's up to you. Frameworks include but are not limited to Bootstrap, Foundations, Gumby, Skeleton, Pure...


* - Rushax - Feb 2, 2016

(Feb 2, 2016 10:00 AM)Hash G. Wrote:  You could write all media-queries by yourself or just use a framework. I personnally would choose a framework because it's easier to learn and use but that's up to you. Frameworks include but are not limited to Bootstrap, Foundations, Gumby, Skeleton, Pure...

Backing up this point for using frameworks as there are so many different devices out there that have different screen sizes that you need to work to.
The amount of coding inside the Bootstrap frameworks is crazy and they're compatible for all screen sizes including some of the very different screens such as HTC.

Stick to using frameworks as a lot of the hard leg work has been done for you.
Or spend the rest of your life applying each CSS style to every media screen available.


* - itsMeCherry - Feb 2, 2016

It isnt really too hard to convert a site to responsive without using a framework.

It only becomes alot of work if you wish to support a variety of phones/dimensions, rather then just sticking to the average 350~ pixels and 700~ pixels for tablets.


* - T0ucaNSaM - Feb 3, 2016

You guys helped out a lot I read through the w3 bootstrap and found a template cut my work by half