High volume, cross platform push notification delivery.
High volume, cross platform push notification delivery.
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
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.
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.
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,
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.
Control and manage real Smartphone devices from your browser
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.
I’m going to guess that you’re approaching this problem from one of two ways
Regardless of the position you are in you can still follow the same next steps.
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.
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
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.
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.
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.
The first step you need the following:
The aim of this phase is to get an overview of the key requirements for you app.
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.
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…..
The simplest way to build amazing mobile apps, better than phonegap!
It’s easy, fast & beautiful. Let us show you why and how.
Framer can help you to quickly build interactions and animations. Built for designers and integrates with Photoshop. Great alternative to Quartz Composer, Flash or Keynote.
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.
If you haven’t booked your place in tomorrows HTML5 and CSS3 Workshop with John Allsopp you still have time (albeit not much time).
[button link=”http://html5darwinworkshop.eventbrite.com.au” type=”big” color=”green”] Book Now[/button]
Mobify.js is a framework for client-side adaptation of any site to any device. It consists of four key parts:
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.
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 high quality pocket notebooks(including a Solar System Notebook, Space Notebook, and a Guitar Notebook), write about the Universe and run a responsive web design knowledge hub and a RWD Weekly Newsletter.