No products in cart
Back to overview

Our Take On Mobile Websites Sun Jan 31 2016

Last updated: Sun Jan 31 2016

Discover what we believe is important when implementing a mobile website to your business

If you visit this website with a mobile smartphone you'll notice one thing, the site looks slightly different from the desktop one.

As this is nothing new we do like to share our opinion on mobile websites and what they should do and what not. What you see very often is a mobile website that has so much going on that when the page loads it constantly shifts over your screen back and forth until everything is loaded on the page. I've seen numerous pages that try to load a video and end up shifting the site multiple times while things pop-up on my screen. I personally hate that and it proofs the technician behind it clearly failed to deliver a professional steady clean website. I don't blame Wordpress for this but I do. It's so big that people assume it is the standard of the web.

It is not.

A mobile website should do two things:

  1. Be visible appealing to the eye and
  2. Leave no information out that is shown on the desktop version

More often than not these two simple rules are broken. For instance, for some reason people think that on mobile everything on the site should be huge.

Because you clearly can't read this: But you can read this?!?

What is going on here? Are we all becoming retarded? Have we lost our eyesight the past couple of years? Why should everything be so incredibly big when you use a mobile phone? Aren't people used to look at small fonts on their home screen, in their contact list, their text messages, their emails, games, basically everywhere? Why is it then that on the web we break this rule by assuming everybody is blind?

Incredible, beats me.

In addition to that people also believe it's a great idea to leave out information that can only  be found on the desktop site. Why would that help me as mobile phone user? I only feel like I'm missing out on important stuff. I just want to get the full experience on my mobile screen, we're not living in the 90's anymore!

As you visit our site on your phone you will also see we implemented a menu on the left that is accessible from everywhere by simply dragging your finger to the right.  We believe it couldn't be easier than this and it is a much better solution than opening the menu at the top and pushing down the whole website. More often than not would somebody access the menu from the bottom of the page, why force them to scroll all the way up?

So our mindset is basically this: treat the mobile version of your website as a smaller version of your desktop site. Increase font sizes slightly but don't overdo it. People still want to have a sense of overview, nothing is more annoying than massive buttons and font sizes that waste the also so limited real estate of your page.

Small things are fine on a mobile site, just make sure buttons are easily clickable and give feedback when pressed. You can leave things out as long as it doesn't ruin the user experience, for example, leave out a slideshow, but replace it with regular text. Make sure to keep 98% of your information the same, don't sacrifice your site for the mobile user.

 

Hilco van der Meer
Hilco has been an entrepreneur and web developer since 2004. His focus is always you should be able to build whatever you want in a browser. He primarily focuses on the core principles of web development in the languages HTML, CSS, JavaScript, PHP and MySQL. You too can become a Web Development Master by taking our courses!

Feel free to leave a comment

Message in BBCode (Click On "Code Example" for extra options)
« Code Example
You are editing this content using BBCode. Below are your options.
Text Formatting
[b]{text}[/b] Bold
[i]{text}[/i] Italic
[u]{text}[/u] Underlined
[s]{text}[/s] Strike through
[size={nummer}]{text}[/size] Make {text} a certain size {number}
[title]{text}[/title] Create a big title
[subtitle]{text}[/subtitle] Create a smaller title
[color={kleur}]{text}[/color] Color the text with a name (red,blue, etc.) or color code (#527a32)
[center]{text}[/center] Center text
[align={left|center|right}]{text}[/align] Align text, choose from left, center, right
[url]{url}[/url]]
[url={url}]{text}[/url]
Create clickable url
Create clickable text
[mail]{email}[/mail]
[mail={email}]{text}[/mail]
Create clickable email address
Link text to email address
[bull /] Gives a bullet •
[copyright /] Gives ©
[registered /] Gives ®
[tm /] Gives ™
[quote]{text}[/quote]
[quote={naam}]{text}[/quote]
Create a quote are with an optional name/td>
[code]{text}[/code]
[php]{text}[/php]
[javascript]{text}[/javascript]
Place your code inside the corresponding tag
[list={style}] or [list]
[*] Item one
[*] Item two
[/list]
Create a list with items. {style} can be: none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha
[tasks]
[*] Step one
[*] Step two
[/tasks]
Create a set of tasks that can be checked off on the page. Checked status will only remain visible as long as the page is not reloaded
[sub]{text}[/sub] Create subscript
[sup]{text}[/sup] Create superscript
[b][color=blue]{text}[/color][/b] You can combine tags: create blue and bold text
Media
[img]{url}[/img] Include external
[img={breedte}x{hoogte}]{url}[/img] Include image in certain format
[img width=XX height=XX title="{title} ...]{url}[/img] You can use the default attributes of an image tag (width,height,alt,align,title,etc)
[youtube]{id}[/youtube] Create a youtube video on the page. The ID can be found at the end of the YouTube URL.
[youtube controls=1;autoplay=1;notime=1;width=200;height=150]{id}[/youtube] Create a youtube video with {id} and extra options
Copy word: strawberry (spam prevention)