• Skip to content
  • Skip to primary sidebar
  • Skip to footer

Foliovision

Making the web work for you

Main navigation

  • Weblog
    • FV Player
    • WordPress
    • Video of the Week
    • Case Studies
    • Business
  • About
    • Testimonials
    • Meet the Team
    • We Support
    • Careers
    • Contact
    • Pricing
  • Products
  • Support
    • FV Player Docs
    • Pro Support
  • Login
  • Basket is empty
Affordable VAST/VPAID for Wordpress has arrived. Serve ads with your videos starting today!

Approaching Responsive Design

10 May 2013 / Alec Kinnear / Leave a Comment

This presentation was originally given at WordCamp Slovakia 2013 in Slovak Technical University on 20 April.

Responsive web design – or “RWD” – is a web design approach focused on creating optimal viewing experience across both desktop and mobile platforms. Responsive design is mostly defined by 3 key components: flexible grids, flexible images and media queries.

responsive design wordpress 01
What is “RWD”?

responsive design wordpress 02
Yes – Rule #1: Rethink your content!

The web design world shouts that the future is “mobile first”. Everybody heard about it, everybody wants it. But do we really know what it means to “response” effectively?

For us, responsive design is above all about the content. Different stories for different devices. Rethink your content based on the situation, in which user is experiencing it. But first of all – of course – know your visitor. The table below shows example statistics take from one of our client’s site – and we face this scenario repeatedly and it seems to be close to new standard.

responsive design wordpress 03
Facts don’t lie, check the statistics of your website:
find out what your readers use to browse your site.
responsive design wordpress 04
Client example: 29% of the visitors come from mobile devices!

The challenge that comes with 29% of visitors coming from mobile device and 58% [as it was in our case study], is to consider the gap between two very different experiences. 1028px being considered as standard is history. Mobile-big screen schizophrenia is like designing comparing luxury fashion magazine and tiny business card [to exaggerate].

responsive design wordpress 05
1028px once considered as standard – not any more!
responsive design wordpress 06
29% percent of visitors reading on mobile,
58% on huge screens.
responsive design wordpress 07
Different device means different environment, situation AND
different user experience.
responsive design wordpress 08
DO you remember? Once we prayed for unification and
struggled for same experience across browsers.
responsive design wordpress 09
Today – we need to both understand and
appreciate the difference.
responsive design wordpress 10
Example #1: Busy magazine. Mobile mindset: “I read the article and
commented. Let’s check what they’ve been saying.” Discussion first.
responsive design wordpress 11
Example #2: Real Estate. Desktop presentation aims to claim
the competence. Once successful, visitor’s mindset once coming
back on mobile is clear: “I want to check latest listings”
responsive design wordpress 12
Example #3: Food Blog. Visitor’s mobile mindset:
“I want to check the recipe while shopping”. Down to the point!
responsive design wordpress 13
4 core aspects to consider when designing responsive template:
interaction, context, use and code.
responsive design wordpress 14
Interaction: Size of mobile elements matter.
responsive design wordpress 15
Context: Filtering the content improves useability.
responsive design wordpress 16
Use: Do not force to optimize for portrait view under all circumstances.
Consider dynamic use.
responsive design wordpress 17
Example: data table, unreadable at small screen, still readable in landscape view.
responsive design wordpress 18
It’s getting real even on the desktops.
Complexity is everywhere.
 
responsive design wordpress 19
Code: How far to go in the optimization for old browsers?
responsive design wordpress 20
Code: Definitely client-specific.
responsive design wordpress 21
Code: New approach means replacing pictures with code-based styling.
responsive design wordpress 22
Code: Opportunities for creative trick…
responsive design wordpress 23
Code: …not only for icons.
responsive design wordpress 24
responsive design wordpress 25
Never try to blindly follow the same model.
Think about useability first.

Download this presentation here.

Alec Kinnear

Alec Kinnear

Alec has been helping businesses succeed online since 2000. Alec is an SEM expert with a background in advertising, as a former Head of Television for Grey Moscow and Senior Television Producer for Bates, Saatchi and Saatchi Russia.

Categories: Design, WordPress

Related Posts

  1. WordPress Responsive Design Calculator: Pixels to REM

  2. New HTML mark-up and design changes

  3. Privacy Policy

    Privacy Policy

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

You can click here to Subscribe without commenting

Primary Sidebar

My Account

  • My Licenses
  • My Profile
  • Invoices
  • Affiliate Area
  • Log Out

Categories

  • Business
  • Camera Reviews
  • Case Studies
  • Design
  • Flowplayer
  • Internet Marketing
  • IT
  • Life
  • SEO
  • Slovak
  • Video of the Week
  • WordPress
Foliovision logo
All materials © 2023 Foliovision s.r.o. | Panská 12 - 81101 Bratislava - Slovakia | info@foliovision.com
  • This Site Uses Cookies
  • Privacy Policy
  • Terms of Service
  • Site Map
  • Contact
  • Tel. ‭+421 2/5292 0086‬

We are using cookies to give you the best experience on our website.

You can find out more about which cookies we are using or switch them off in settings.

Powered by  GDPR Cookie Compliance
Privacy Overview

This website uses cookies so that we can provide you with the best user experience possible. Cookie information is stored in your browser and performs functions such as recognising you when you return to our website and helping our team to understand which sections of the website you find most interesting and useful.

Necessary Cookies

Strictly Necessary Cookie allow you to log in and download your software or post to forums.

We use the WordPress login cookie and the session cookie.

If you disable this cookie, we will not be able to save your preferences. This means that every time you visit this website you will need to enable or disable cookies again.

Support Cookies

Foliovision.com uses self-hosted Rocket.chat and self-hosted Freescout support desk to provide support for FV Player users. These cookies allow our visitors to chat with us and/or submit support tickets.

We are delighted to recommend self-hosted Rocket.chat and especially Freescout to other privacy-conscious independent publishers who would prefer to self-host support.

Please enable Strictly Necessary Cookies first so that we can save your preferences!

3rd Party Cookies

This website uses Google Analytics and Statcounter to collect anonymous information such as the number of visitors to the site, and the most popular pages.

Keeping this cookie enabled helps us to improve our website.

We reluctantly use Google Analytics as it helps us to test FV Player against popular Google Analytics features. Feel free to turn off these cookies if they make you feel uncomfortable.

Statcounter is an independent Irish stats service which we have been using since the beginning of recorded time, sixteen years ago.

Please enable Strictly Necessary Cookies first so that we can save your preferences!