+357.22.396997 | Blog | Clients

Monday, 23 February 2015 09:38

Basic Mobile Layout

Mobile web development is an expansive field of engineering and design, and can require extensive expertise and involve using many tools. Dojo is designed for mobile development at many levels, including lightweight, granular modules for bandwidth and CPU constrained devices, touch and gesture events, mobile-style widgets in Dojo Mobile, feature branching for mobile customizations, and much more. However, before even getting into these sophisticated aspects of mobile development, it is worth considering some of the basics of mobile layouts. Many web sites and web applications can provide a vastly improved user experience by simply employing viewport definitions and adaptive layout techniques.

Setting the Viewport

First impressions are critical, and for many outdated web pages, the first thing a user experiences is illegibly small text that they must zoom in to read properly. Probably the first thing any web developer should learn about to prepare for mobile devices is the “viewport” meta tag. This simple tag instructs mobile devices what scale and dimensions to use to display a page, so that users can be instantly greeted with a properly scaled page where they can immediately start reading and consuming your information without zooming.

The “viewport” meta tag allows for a few different parameters that are set through the “content” attribute. Probably the first parameter (and possibly only) to set is the width. If your web page does not have any other mobile-specific customizations, the quickest way to determine a good mobile viewport width is to point your browser at your page and resize the browser horizontally. Make the browser as narrow as possible where you can still comfortably read the main content of the page without having to use horizontal scrollbars (horizontal scrollbars may appear, but shouldn’t clip the main content, only extraneous side bars). The width of the page (document.documentElement.offsetWidth) should be a good mobile width. Ideally this should be a relatively low number, in the range of 300-400 pixels (see the next section if it is not).

Now, only setting the width is not sufficiently adaptive. If you set a width of 400 pixels, this is great for a phone (at least in portrait mode), but is far too zoomed in for tablets that also use the viewport meta tag. Fortunately, this is easily solved. If we combine the width property with an initial-scale property, the browser will use both of these, first ensuring that the page will at least be the specified width, and if a wider display (such as a tablet, or a phone in landscape) is available, then it will match the initial-scale provided. This allows us to have proper scaling on multiple devices. The typical setting for the initial-scape is 1.0, which is the device’s preferred scale level for ease of reading. If you have a minimum page width of 400px, your meta tag could be:

<meta name=“viewport” content=“width=400, initial-scale=1.0”>

Now your users will be greeted with a page that is properly scaled right away!

There are a number of other parameters that can be used with the viewport meta tag, such as minimum-scale, maximum-scale, user-scalable, and constants device-width, and device-height. However, the settings described above provide a simple technique and an excellent user experience for initial scaling and size, without limiting the user’s ability to later scale to their preferred reading size.

Adaptive Layout

If your web application can really be resized down to a 300-400 pixels width and still be usable, you probably already have a remarkably adaptive layout. However, for most pages, having a layout that can really be usable at these widths will require some layout modifications.

There are a few CSS techniques we can use for more adaptive layouts. First, rather than specifying widths in pixels, we can use percentages. However, this approach is not heavily used in most modern web pages, as it becomes very difficult to maintain pleasant aesthetics across unbounded page widths. Having more definite limits on the layout gives a designer more constraints to work within. Instead, we can still specify widths in pixels, but provide opportunities for adaptation by using the CSS min-width and max-width properties instead of just a single width property.

A popular width for web pages is 960 pixels. To utilize a more adaptive strategy, rather than fixing the width at 960px, we could make this a maximum, and allow for narrow widths (for narrower devices). For example:

.container {
    max-width: 960px;
}

Grid systems like 960.gs then often use float: left blocks to align elements within the grid. This can still be used with an adaptive container like the one above. Using floating elements can also contribute to the flexibility of your layout since blocks can wrap down below if they run out of horizontal room. Note, we can also use a min-width if we need to have a lower bound as well.

The inner elements of the layout can also use min-width and max-width when possible. In particular, blocks of context or text can typically be resized quite a bit (while sidebar’s and navigation elements sometimes have less flexibility). Some reasonable width ranges, combined with floating elements can quickly lead to a highly adaptive layout that will scale nicely on smaller mobile devices.

Media Queries

Simply using CSS with flexible widths and floating elements may not be sufficient for a highly polished interface that is fine-tuned for the major devices out there. Media queries give us a powerful way of articulating more complex and precise styling based on device size. With media queries we can specify certain CSS properties and rules that are only to be applied for certain media conditions. For example, perhaps we don’t just want browser-controlled flexible width, but we actually want to alter font size and or background-color on smaller devices. With media queries, we can do just that.

A common media query to use is applying a maximum width for a rule (or set of rules) to be applied. Here is an example of applying a rule to our #nav element when the device width is 500px or less (generally phones, but not tablets), where we reduce the navigation bar’s font-size and change the background-color:

@media screen and (max-device-width: 500px) {
  #nav {
      font-size: 0.8em;
      background-color: green;
  }
}

It should be noted that you can specify a minimum device width, but since older versions of IE (IE8 and earlier) don’t understand media queries, usually you will want to target the smaller and newer mobile devices with the media queries.

Because media queries have multiple conditions that can be combined with different logical operators and encompass different CSS rules, the permutations for how we adjust our styles based on the media is virtually endless. This is powerful functionality for making web applications that can run smoothly and beautifully on many devices.

And Beyond

These tips provide a basic start to making your web applications more mobile-ready, and give a much better user experience with a minimal effort, regardless of what toolkit (if any) you are using. However, a truly mobile-optimized web application can be much more involved. For more advanced capabilities, such as device specific builds, native matching mobile widgets, mobile themes, and touch and gesture event handling, Dojo has a robust set of tools and we can help you create amazing user experiences.

Source: sitepen.com

You can find this post on Google Plus by ConvertPLC

 

About ConvertPLC

We use the massive power of the internet to help you take your business from local - to global - to profitable.

Keep in Touch

  info (@) convertplc.com
  +357.22.396997
  Corner of Gladstonos & Lordou Vironos No38

Latest News

13
Sep2016

The online business of using emojis

We have all received a text or an email from someone and wondered how we should take...

13
Sep2016

Leading the hunt for Pokémon to business gold

The world of mobile gaming has gone from crushing candies to chasing Pokémon in the street. The...

23
Aug2016

Does content have to be rooted in social matters?

If digital marketing is all about content and if the platforms used to get that content out...

08
Aug2016

The new landscape of Google SERPS

Google needs no introduction. It has become so embedded in our society that if we have an...

29
Jul2016

Five Ways to Use Snapchat for Business

Everyone loves a good story, but the story itself is only half the, well, the story. The...

25
Jul2016

Why Visual Content Improves Social Media Results

Attention is something very hard to grab and once you have managed to hold onto it, the...

14
Jul2016

3 Ways To Make Sure Your Link Profile Isn’t Toxic To Your Site

We all want a good link profile.  A profile consisting of those great inbound links that bring traffic...

12
Jul2016

Long Tail Keywords for SEO

When a person has a website, it is essential that they find a way to get traffic...

05
Jul2016

How To Create Epic Online Content That Drives Traffic

Having content on your website is one thing.  Having great content on your site is quite another. If...

05
Jul2016

Why Nobody Is Reading Your Emails

Whilst we may not have the literal attention span of a goldfish, it does take people seconds,...

15
Jun2016

Why You Do, What You Do, On Social Media

Have you ever wondered why you behave the way you do on social media? You know. That innate...

10
Jun2015

SEO - Trends from 2014 that we’re still seeing in 2015

Search Engine Optimisation (SEO) is continuously evolving. Search engines are striving relentlessly to improve search...

10
Jun2015

5 Black Hat SEO Tactics You Need To Be Avoiding

The challenges that come with Search Engine Optimization (SEO) can often feel daunting. SEO is a marketing channel...

05
May2015

Website Development Guide

When contemplating a new website, it&rsquo;s understandable that you may want to jump ahead to the fun...

05
May2015

7 Tips for Creating a Distinctive and User-friendly User Interface

A user interface is what the user can see, hear, touch or even talk to when communicating...

08
Apr2015

What You Need To Know About Managing PPC Ad Campaigns

Pay Per Click (or Cost Per Click) is a form of internet advertising which falls under the...

16
Mar2015

8 Innovative Ways That Turn Your FB Page Visitors Into Undying Fans (Part 2)

1.)Optimize your Fanpage. &ldquo;Good enough&rdquo; is no longer enough! If you think having a picture that looks good...

15
Mar2015

8 Innovative Ways That Turn Your FB Page Visitors Into Undying Fans (Part 1)

1.) Be very creative. Think outside of what&rsquo;s outside of the box In today&rsquo;s world where everyone...

23
Feb2015

Basic Mobile Layout

Mobile web development is an expansive field of engineering and design, and can require extensive expertise and...

16
Feb2015

AmazonSmile Donates 0.5% of Purchases to Your Favorite Charity

I do a lot of my holiday shopping at Amazon, mostly because it&rsquo;s easy to use, helps...

09
Feb2015

A Broadcaster's POV: How Outbound and Inbound Can Work Together

&ldquo;I have an admission to make,&rdquo; HubSpot's Dan Sally says coyly as he kicks off the INBOUND...

02
Feb2015

10 Lessons in Building a Million-Dollar Business

I recently attended a fireside chat with Ramit Sethi, personal finance advisor and author of New York...

26
Jan2015

How to geotarget your website for Yandex local SERPs

Russia is a huge country and your website will need a certain geotargeting if you want to...

19
Jan2015

How to promote a blog: socialization and communication

SEO-optimization is just the first step in a blog promotion. Optimization plus communication bring in another...

12
Jan2015

Small Biz Social Friday: 6 Types of Pinterest Promotions

Pinterest does two things really well: Drive traffic and inspire sales. To do both, and to keep...

05
Jan2015

Search Engines are Fundamentally Changing the rules of Business

Can companies remain competitive in the years to come without adapting to internet search engine...

29
Dec2014

5 new Apple iOS features digital marketers will love

Apple watchers make a sport out of predicting what the Cupertino giant will do next, but they&rsquo;re...

22
Dec2014

All the major changes Facebook has made in 2013

Hello everybody, we came accross a very interesting article by Adam Vincenzini about the changes Facebook has...

15
Dec2014

Do you want to attract more Russian potential clients to your website?

This is what you need to know. Russia is a very lucrative online market: With more than 65 million...

08
Dec2014

Confused about Landing Pages? We can help!

What is Landing Page? A landing page is any web page that a visitor can arrive at or...

01
Dec2014

What Is a Call-to-Action?

&ldquo;What do you want your subscribers to do, and why should they do it?&rdquo; A call-to-action (usually abbreviated...

24
Nov2014

9 Important things you should consider when building a website

Websites are one of the most important assets of a business. Having a credible, professional and engaging...

24
Nov2014

What is Inbound Marketing?

Inbound marketing is based on the concept of earning the attention of prospects and making your company...

14
Aug2014

What is Directory SEO and why should we all do it?

What are Web Directories? Before search engines, internet users used to search relevant information on web directories. Directories...

«
»