Responsive Web DevelopmentHave no fear of "Mobilegeddon"

Google changes its search algorithms in favor of responsive websites - at least when using it on a mobile device. Instantly, prophecies of a doom called "mobilegeddon" circulated through the social media - out of fear, it seems, that one's sites might drop in ranking. Since April 21st, after all, the fact whether a website is optimized for mobile displays plays a role in how prominently it is listed within a search. Websites developed by aiticon don't have anything to fear here: They are developed fully responsive, meaning they adapt to the device on which they are to be displayed. How does "Responsive Web Development" work? aiticon developer Juri Zukovskij explains.

As an example, take this site, www.aiticon.com. Starting point of Zukovskij's development process was the desktop display - another method would be the so called "mobile first", where development starts from the mobile view. Which option is chosen, depends on factors like our customers' wishes, the practical use case, the website itself or its target audience.

aiticon.com's home page as displayed on a desktop.
aiticon.com's home page as displayed on a desktop.

Here, you can see large pictures, the navigation is located in the top right corner, the content carousel can be moved back and forth by mouse click. Further down, our three main areas of expertise, Web Development, Software Development and IT Operations, are shown in three columns next to each other, with one drawing each. If you move your mouse over one of those three fields, the whole field appears highlighted with colour, a mouse click will take you to the respective sub-site.

"Click" becomes "tap"

Now if you open aiticon.com on an iPad, for example, the site at first doesn't look much different, the carousel, however, can't be operated by mouse click, but by touching it. With the areas of expertise, the "mouseover" function ceases to exist. If you turn the iPad upright, the differences become a little more distinct. The large pictures have disappeared from the carousel, the topics are shown, one after the other, as text only. The navigation is hidden behind the icon "Menu" in the top right corner. 

aiticon.com on an iPad in portrait format.
aiticon.com on an iPad in portrait format.

And finally, on a smart phone, our three areas of expertise are arranged one below the other, underneath what has now become a pretty small, but still quite well legible content carousel.

How does that work? "If the designer thought of everything, the technical realization is not that much of a big deal", sais colleague Zukovskij. That is overly humble - but there are indeed layouts less apt for mobile display. From the designer's side, it is not only required to choose the right fonts, things like margins have to be taken into close consideration, too. A layout of content elements strongly based on grid patterns and tables is very well suited, for example.

HTML5, CSS3 and Javascript

For the technical realization, Zukovskij and our other colleagues in web development work with HTML5, CSS3 and Javascript - each representing the most recent state of the respective programming language. The greatest significance when it comes to mobile friendliness, meaning the automatic adaption of content to its display medium, lies with the so called Media Queries, a concept within the style sheet language CSS. This is where properties like colors, fonts, margins and other design patterns are specified.

#content {
    width: 700px;
}
@media screen and (max-width: 900px)    {
    #content {
        width: 500px;
    }
    #rightcolumn {
        display: none;
    }   
}
 
@media screen and (min-width: 321px) and (max-width: 480px) {
    // ...
}

Thanks to these Media Queries, an HTML element's properties can be determined according to the desired end device's state (height and width of the browser window or the device respectively, landscape or portrait format, screen resolution etc.). You can control things like starting from which screen width images are shown differently or not at all, when a three column view becomes a one column one etc.

Relative size

Each object's size within a responsive website is not fixed in absolute terms, but only in percentages - meaning in relation to the surrounding objects. The CSS, then, at certain output sizes, overwrites previously defined properties  - according to the Media Queries. Thus, on demand, the desktop version of a website becomes the iPhone version.

So is your website responsive and thus "mobile-friendly"? You can find out by using Google's "Mobile-Friendly Test". And if the answer is "No", you might want to talk to us.

Are you interested? Please get in touch!