Surf the Dream A discourse of links and articles from Justin Avery

Tag Archive: Mobile

  1. User generated content in a multi platform publishing world

    Leave a Comment

    I’ve just finished reading Snooks article User Generated Content in a Classy World, which is turn was a follow up to Chris Coyiers article Class up Content.

    Recently I’ve been trying to apply AMP templates to the Responsive Design Knowledge Hub and it’s been a learning curve. The thing I can not fix is the embedded content that is contained within the News and Articles I’m applying the AMP template to. The reason is that AMP requires it’s own fancy elements to be declared for Images, Video, Ads, Embeds, Iframes and more. This makes a mockery of the carefully semantic way that I’ve tried to add content and renders some of the pages non-compliant.

    The best implementation I’ve seen from a CMS to separate the concerns from creating content from the way in which it is rendered to the client is WordPress and Responsive Images.

    When adding an image to WordPress I go through a three step process.

    1. Click Add Media
    2. Select or Upload an image
    3. Add the image

    The code that is added to the wysiwyg is shown below…

    
    <img src="https://surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-1024x591.jpg" alt="moon shard" width="1024" height="591" class="alignnone size-large wp-image-1866" />
    

    …. yet the code that is rendered to the browser is:

    
    <img src="//surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-1024x591.jpg" alt="moon shard" width="1024" height="591" class="alignnone size-large wp-image-1866" srcset="//surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-300x173.jpg 300w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-768x443.jpg 768w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-1024x591.jpg 1024w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-500x288.jpg 500w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard-800x462.jpg 800w, //surfthedream.com.au/wp-content/uploads/2015/12/moon-shard.jpg 1600w" sizes="(max-width: 1024px) 100vw, 1024px">
    

    … which produces the following responsively wonderful image.

    moon shard

    I haven’t had time to look into the AMP plugin for WordPress, but I assume they’re going to be doing a similar thing where they scan the content for markup that needs to be updated, images iframe embeds and rewrite them into a suitable accepted format for AMP.

    Below are my comments on Snooks article….

    The other issue I have with embedding content into that single block is when you want to retrieve the content for use in other ares besides a HTML template.

    I’ve had RSS feeds clog up because of the funky elements used within content areas (different apostrophe’s in headings the biggest issue), and while these can usually be sorted by using something like CDATA tags

    <!--CDATA 
    // Content here
    -->

    the same issues end up coming back when you look at implementing something like AMP with your database content. All of a sudden it’s less of a class issue and now you have issues with the semantics of the content requiring updates.

    The best approach from a CMS I’ve seen has been the implementation of responsive images into wordpress. The image is inserted in the same way it always has in the WYSIWYG, but when it is rendered on the front end you get the benefit of the Responsive Images markup being added for you with no additional work.

  2. Designing a Mobile App

    1 Comment

    Mobile apps go through a variety of what I would refer to as “Design” stages. In this article I”m not talking about the visual design of the application, that’s certainly not where my skills lie, but instead I’m talking about the functional design of the application, the user experience and the data required to make it both usable for the customer as well as for the client.

    The approach I went through for this project came from the years of experience I had in engaging with clients to develop thier websites but mainly from the video series from Keynotopia creator Amir Khella.

    Step 1: Interview your stakeholders

    I’m going to guess that you’re approaching this problem from one of two ways

    1. You’ve got a great idea for an App and you want to know what to do next
    2. Someone has come to you to help them with their app and you want to know what to do next.

    Regardless of the position you are in you can still follow the same next steps.

    Talk to the stakeholders

    Book a meeting with the key stakeholders for the app. You want to chat about exactly why they want an app and how the project is going to be judged as a success. What are the main business drivers around the project, are they to increase engagement, make money, lower phone calls or visits to physical stores?

    Even if you are in the first category where it is your own idea it is really important that you ask these questions for yourself so that you are clear about what you need and you can appraoch the next phases in a logical structured approach.

    Talk to the customers

    Once you’ve talked with the stakeholders I find it beneficial to meet and speak with actual people that will be using the applicaiton. Ask them some of the following questions

    • Do they find the overall idea useful?
    • Will they download it?
    • Would they pay for it?
    • How often would they use it?
    • Would they prefer to just do this on a website?
    • Is there anything missing from the app concept?
    • Is there anything that isn’t needed in the concept?

    Talk to IT & Marketing

    This presumes that the inital stakeholder discussions were with the business owners. The Managing Directors, CEO’s, General Maagers, the people who have the vision (and the sign off for budget). The IT and Marketing teams are going to want to be involved, in fact they’ll force their way into the project, so it’s well worth consulting with them ahead of time.

    IT Team

    If the application is going to require data to be hosted then these guys are the ones that will be building or supporting that system. The chances are that the data being captured by the app will also need to be pushed around to other existing business systems or require reporting agaist. If you can spend some time with IT you will be able to find out the limitations of their existing systems, or it might throw up some valuable inforamtion about the way the data will need to be structured because of an existing system or a new system project that you weren’t aware.

    Marketing/Communcations Team

    Although I’m not covering off the visual design as part of this article it is a large element a project like this. The Marketing/Communications (MarComs) team will need to explain the tone of voice the company has and also point you towards any rebranding ideas they’ve got as well as existing material that might help you get an idea of how the visual layer might need to work.

    A great example is the way the company markets to their customers. Are the divided into segments like Business and Personal, perhaps segmented by country, maybe there segmented by services the company provide. This is most likely a detail that escaped the MD’s interview but something that becomes incredibly important at launch.

    Another great reason to talk to the MarComs is that the app could give them another outlet for messaging and reaching their customers.

    Step 2: High Level Overview

    The first step you need the following:

    • Paper
    • Pencil

    The aim of this phase is to get an overview of the key requirements for you app.

    • What functions will it have?
    • Where does the data need to flow?
    • Do the interactions need to be created, read or written?

    Below is an illustration of the application I was preparing for the client. The main screen is the center of the application and is what everyone will see by default when opening the app. From the main screen you need to be able to create items, read items (both ones that you’ve created and other items that have been created by other users) and update settings.

    iPhone Application High Level View
    The high level overview for the application

    For this process you don’t need to get into the tiny details of what you can do on each screen, that step is coming up shortly. You just want to capture the overall purpose of the application, the bigger picture of what it needs to do to function.

    If during the next phase you come across other features that you might have missed, or alternatively the client introduces additional requirements, then you can always come back here and make changes to this diagram.


    This article is a work in progress, check back for step 4 continuing below…..


    Step 4: Wireframing the Screens (creating the dots)

    Iphone Wireframes
    The high level overview for the application

    Step 5: Process flows (joining the dots)


    The high level overview for the application
  3. LungoJS – Mobile Framework… and stuff.

    Leave a Comment

    Meet the first Mobile Framework that uses the actual features of HTML5, CSS3 and JavaScript.

    The Core Features include
    Make Apps for iOS, Android & Blackberry devices.
    Leverages the capabilities of current mobile devices.
    Easy implementation of HTML5 features like WebSQL, Orientation, Connection and more…
    Capture touch events like swipe, tap, doubletap…
    Easy to extend with Sugars to sweeten your apps.
    Fully customizable design.
    Distribute Apps in Mobile Stores or in websites.

    Visit Link

  4. Mobify.js JavaScript for client-side adaptation

    Leave a Comment

    Mobify.js is a framework for client-side adaptation of any site to any device. It consists of four key parts:

    a JavaScript snippet that does device detection and bootstraps the adaptation. This is known as the Mobify.js tag and needs to go right after the head tag.
    the tag loads the Mobify.js payload file that contains a series of operations that adapts the DOM constructed from the original source to an object that can be rendered with client-side templates. This final HTML produces a DOM that you see on your mobile browser.
    mobify-client, which is a cross-platform command line program that runs within the Node.js runtime for creating fresh projects, building for production and deploying Mobify.js projects.
    a set of modules that contain common, reusable design and code elements that serve as a showcase of building for mobile first. These modules have been tested across a wide range of devices and should significantly speed up development.

    http://www.mobify.com/blog/introducing-mobify-js/

Surf the Dream is a blog that has been running since the mid 2000's when it started on BlogSpot. Over the years it's been rebranded as justinavery.me (now my resume) and JaveryDesign.com (which now redirects back to this site).

I offer consultation services through Simple Things, produce a range of educational pocket notebooks, write about the Universe and run a responsive design and a RWD Weekly Newsletter