A viewport adventure

When we made up our minds to go for a brand name-logo-style change, i took my part as frontend developer and created our landing page from scratch. By means of that I’ve committed myself to this task, and tried not to copy another’s work. Which led us a serious mistake that im going to mention.

You know viewport meta tags ables your code to render as screen size changes, but it didn’t happen that way in our case. I mistyped the tag while trying to be perfectionist, and when we face the incompatibility between mozilla and chrome, i just ignored that and blamed Mozilla for rendering incorrectly. My Nexus phone was my reference point. And seriously, who uses Mozilla firefox on their smartphones anyway!

The missing parts of a responsive website

Bu resim ironegg.com adresinden alınmıştır.
Image from ironegg.com.

Switch back to desktop website

Backto website

We should always add a “Back to desktop website” option into our website since its impossible to switch back to “Desktop website” when website contains I frames. Eventually user will never be able to experience website’s functionality. In addition to that, most of the updates can’t be tested and bugs may spoil the website. Thus this option should be considered as a backup solution.

Menu animations should reflect their physical characteristics

Most of the people, except the ones who code, think that buttons are <button>’s. For the users buttons mean something different. Buttons should develop an immediate physical reaction when they are clicked and users await them to behave in an expected way – like dropping a list down.

true-mobile-experince

For example, the menu above should animate downwards not leftwards. Thats because humanity used to see things fall as they evolve. Not just that, if possible, button should behave like a button and appear below the menu with animation.

Left menus must be used as shown below (Only if there is a side menu icon).

 

SideMenü
SideMenu

Mobile Friendly <table>

Making tables mobile friendly is pain. Because tables are not designed for mobile views at the first place. The worst part is that there are no alternatives to tables (As far as we know).  Since tables are widely used in many areas -such as business websites, comparisons- we should figure out a way to make them responsive.

What’s mostly used and we consider as a solution is:

  1. One should show only three colons in mobile devices.
  2. Google also offers three colons where the final one is scrollable. Apparently people just can’t get along with swiping and scrolling around. Therefore:
  3. Display only two colons or show the third one as a side menu.

Filament Responsive Table

Filament Responsive Table

LIVE DEMO

 

 

Partnership with Etohum

Starting from January 2016, we’re partners with Etohum, one of the largest incubator and accelerator in Turkey. This is a great opportunity for us to improve and scale our business. We’ll be telling more following weeks, stay tuned.

2016e.etohum.com

CZ-iSI9WkAAbFLh 12650998_737641709669088_8442339191243369096_n

Why is Responsive Web Design getting more important?

The first site to feature a layout that adapts to browser viewport width was Audi.com launched in late 2001, created by a team at Razorfish. Everything actually started with them. We began in a new era for web sites.

That first web site was capable of fitting in every size of screen, in any devices, like a liquid which means we would not zoom in-out to see something clear in site. Everything was so clear and well designed.

What is that Responsive Web Design?

Responsive Web Design is a miracle which allows a site’s feature to format itself to the screen size which is being used to view. It means that you can receive a site design in same quality in every platform. A wide screen like your desktop machines can receive with multiple columns of content more detailed while a small screen like your phones or tablets can have the same content in a single column but designed appropriately sized to be read and be examined easily.

So people have rights to ask that they need to care this new thing and what the advantages are.

  • Time Saver

No more loading a huge web site and having a zoom in and out to find out the content you have been looking for. That is a total time consuming. As the matter fact that a user or customer could scroll down or zoom in and out every second then, s/he could give up easily and leave your site. We do not want this situation.

  • Recommended by Google

We all know that Google is the big boss. They have 67 percent search market share in 2013, still rising like a star and making it the most popular engine in the world. If they say so, we better take that as a hint.

But why does Google prefer Responsive Design? All sites have one URL and same HTML across all devices. When there is main site and mobile site, there would be different URL and different HTML. In this case Google will have to index multiple versions of the same site.

On the other hand, when there is just one version, it becomes much easier to share with others. Google is a fan of that. Why? Consider it like this, if someone shares a mobile content and the other user finds and open it in laptop. User will see less content and it will make him/her unhappy.

  • Cost Less

The advantage of having responsive design is to mean that you have one website. And the other case you would have more than one website. So it is clearly that having one site is cheaper than two.

Other part is two websites make you require to maintain both of them and it becomes complicated and annoying by time.

  • Very Easy to Manage

Having a separate desktop and mobile site require separate SEO campaigns. Managing one site and one SEO is way easier than separated ones. And there is one more benefit that we can use with responsive design. We can optimize our site for keywords which are more searchable. In addition, when someone wants to search restaurants to eat for dinner and s/he puts “nearby” keyword in the search query. However, separated mobile site does not have this quality for a mobile SEO strategy.

WE NEED TO GET ALONG WITH RESPONSIVE DESIGN

Back in late 2001 until now responsive design was a trend. But it is not anymore, IT IS A MUST. Being able to offer consumers a well-designed, appropriate content of their choice of device means you will have extended ways to reach them. Do not miss that chance, you have still time to be better!