Making A Fixed Width Website Mobile Friendly


css making fixed width mobile friendlyBuilding Mobile Friendly. There was a time, when my biggest worry as a graphic designer and web developer was making my CSS function in Internet Explorer. Not only is IE still a pain in the rear, now we have to worry about numerous screen sizes and operating systems.

There will be a time when mobile overtakes desktop browsing. Since mobile has become so prominent in our everyday lives, there are times when we web designers need immediate results. If you’re one of those designers or programmers that just doesn’t have the time to convert a static website into a WordPress theme, one that’s mobile friendly, there is hope for you my friend. When it comes to viewing all of your content on mobile devices, you can accomplish this with a little CSS and HTML optimization.

http://www.smartinsights.com/wp-content/uploads/2017/03/Mobile-share-of-online-time-percent-2017.png

Globally, mobile devices account for more than half of the minutes spent online, according to comScore


That! Company provides captivating and effective web design services for agencies world-wide.  Learn More about our White Label Web Design Services and how we can help you and your clients create or improve their web presence.  Get started today!


 

Mobile friendly or responsive websites have the ability to configure the width of your website automatically, to fit the viewer’s device. Horizontal scroll bars are a no-no in responsive design. If you view your current website on a mobile device, and you see a scroll bar at the bottom of your phone or tablet, chances are your website (or elements of your site) isn’t mobile friendly. These horizontal scroll bars ruin the user’s experience and will most likely click the back button. People are so accustomed to scrolling vertically on their devices, so that when users find themselves having to scroll vertically as well as horizontally to view content, they become uncomfortable and leave the site.

It’s all-inclusive from this point going forward, design websites have CSS classes and ID’s for everything, and I mean everything.

From the header and menu div’s to the <p> tags in the footer. You’ll want to adjust the size of all these things based on screen width. Moving, sizing, and scaling are a lot easier when the element can be targeted via CSS.

CSS Media Queries are easier to use than you think.

The first time media queries were brought to my attention, I thought it was part of a programming language, and not a form of CSS. I was overcome by a sense of relief, when I found out what it truly was, and I’ve been using it ever since on ALL of my web projects.


That! Company White Label Services


 

 

Media Queries are basically CSS rules. If your screen is this width, then apply this CSS to these elements only. Take a look below.

CSS Code Sample

@media only screen and (min-width: 100px) and (max-width: 699px) {

body {background-color: blue}

}

So the above code is simply saying that if the user’s screen is between 100px and 699px wide, then change the body’s background color to blue. This is where labeling every div and span in your site becomes crucial. Manipulating these elements for different screen widths become easier with proper tagging.

Css-tricks.com list many mobile widths for us as a quick reference.

CSS Code Sample

/* ———– Galaxy S5 ———– */

/* Portrait and Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

/*****YOUR CODE HERE*****/

}

CSS Code Sample

/* ———– HTC One ———– */
/* Portrait and Landscape */

@media screen

and (device-width: 360px)

and (device-height: 640px)

and (-webkit-device-pixel-ratio: 3) {

/*****YOUR CODE HERE*****/

 

}

CSS Code Sample

/* ———– iPhone 5 and 5S ———– */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 320px)

and (max-device-width: 568px)

and (-webkit-min-device-pixel-ratio: 2) {

/*****YOUR CODE HERE*****/

}

CSS Code Sample

/* ———– iPhone 6 ———– */

/* Portrait and Landscape */

@media only screen

and (min-device-width: 375px)

and (max-device-width: 667px)

and (-webkit-min-device-pixel-ratio: 2) {

/*****YOUR CODE HERE*****/

 

}

There is much more media query code for Galaxy, HTC, and Apple phones. Additionally, the widths for Ipad, Galaxy and Nexus tablet widths are listed. All you have to do is input this code to your site’s CSS file and fill in the blank CSS brackets with your own code! Done!

Your site’s responsive, but it still doesn’t feel quite right

web design and CSSYou may start to notice that some elements on your site take up quite a bit of space on mobile devices, like your main menu. In making it responsive, you most likely applied a “float: none” on the <li> tags in your menu. But now the menu is taking up a huge chunk of real estate at the top of your site. You’ll need to convert your main menu to a dropdown menu with jQuery and CSS media queries. Css-tricks.com also explains how to do this.

You may also deem certain elements as insignificant, ones that can found be on both desktop and mobile devices. . You can get rid of them using CSS:

CSS Code Sample
@media only screen and (min-width: 100px) and (max-width: 699px) {

#main-content .sidebar img {display: none}

}

These site adjustments have a tendency to make websites’ really long, compelling users to scroll a lot. This is where anchor text (for sighted users), or skip links (for screen readers) become your friend.

Anchor text is a clickable link that allows users to skip to a certain section of your web page, without having to scroll. It’s a handy method for mobile friendly sites. The code below is an example of anchor text linking.

<a href=”#skip”>Click here to skip to Main Content</a>

<a id=”skip”></a>Main content starts here

Skip Links are mainly used for screen readers and allow users with disabilities to bypass or skip over repetitive web content, like menu navigation, and get right to the information that interests them.

If skip links have a CSS rule of “display:none”, screen readers the link becomes “inaccessible”. So, a way around this is to position the links off screen, that way screen readers can still recognize your links, and allow them to skip through your newly mobile site.

CSS Code Sample

.skip-link {

position: absolute !important;

top: -9999px !important;

left: -9999px !important;

}

 

So, that’s the quick and easy way to convert your fixed width website into a mobile friendly one. Also, don’t forget to set all your images to “width: 100%; height: auto.”  Any images, div’s or spans that have a set width in pixels, will create to the horizontal scroll bar on mobile devices, so remember to set them to either percentages, or different widths for the varying devices using media queries.

 

It can be a bit time consuming, but trust me, once you learn it, you’ll use it forever. You’ll use this method on every website you’ll ever do, because even the newest WordPress or Joomla responsive themes and templates require a little doctoring to get them to look the way you want them to. That is especially true, with the ever-changing market for mobile devices.

It can be a bit time consuming, but trust me, once you learn it, you’ll use it forever. Click To Tweet

-Izzak Hale, Senior Graphic Designer

 

 

Listen to our CEO’s podcast “The Daily Drive” to stay driven and get great business insights from top business leaders. – Are you ready to scale your agency with a quality white label SEO, white label PPC, or white label social media provider?
If so schedule a meeting here –