Planning is well underway to create a new look Progressive Web App (PWA) for WordCamp WordCamp WordCamps are casual, locally-organized conferences covering everything related to WordPress. They're one of the places where the WordPress community comes together to teach one another what they’ve learned throughout the year and share the joy. Learn more . events. The PWA will make accessing and providing content on mobile devices much easier for attendees and organisers.

This builds on the work to create a PWA for previous WordCamp Europe ( WCEU WCEU WordCamp Europe. The European flagship WordCamp event. ) events.

However, rather than developing a standalone PWA at a separate URL URL A specific web address of a website or web page on the Internet, such as a website’s URL www.wordpress.org to the WordCamp site, as has been the case in the previous years, the plan is to create a layer of contextual information for Camp attendees that is served from and integrated with the WordCamp website, and which can be stored locally on the user’s devices for offline access.

WCEU Blog post on the PWA development

The PWA will present a better mobile experience, taking advantage of touch screen gestures, and will put the most relevant information “at the fingertips” of Camp attendees. The PWA will enhance a WordCamp website, and will allow users to bookmark the website to their device’s home screen for offline access.

This PWA functionality will initially be created as a plugin Plugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party , displaying an additional visual ‘layer’ of content aimed specifically at attendees, in an ‘App like’ way over the main WordCamp website content. However, both online and offline users will have access to this same layer of content.

The plugin should be simple to set up and configure, so that – in the longer term – any WordCamp event can take advantage of its features.

This initiative is being led by the WordCamp Europe 2019 Organiser teams, with design prototyping by the WCEU Design team and development by the Attendee Services team. The Communications team is also actively guiding the design and development of the PWA.

The plan

• The WordCamp PWA plugin will present an additional ‘layer’ of mobile friendly content over the main WordCamp website – inheriting the basic colours and fonts of the website. However, individual WordCamps should be able to customise the look of the PWA further using CSS CSS CSS is an acronym for cascading style sheets. This is what controls the design or look and feel of a site. overrides.
• This PWA layer can be switched on/off from plugin settings within WordPress admin, so that it is only available for the duration of the Camp. When viewing the site on touch screen devices during the Camp, users will see the PWA layer appearing over the top of the WordCamp site.
• The PWA controls will look very like a native smartphone App, and will be optimised for touch screen devices, employing swipe gestures.
• On loading the website on touch screen devices, the user would be presented with a range of PWA control, docked to the foot of the screen, offering PWA menu options as icons around a large, central, ‘always visible’ circular button that will be used to open/close the PWA layer.
• Using the power of PWA, the content of the App will be downloaded and stored offline on the user’s local device, and can be bookmarked on the user’s home screen to be accessed at any time, with or without an internet connection.

Content

The PWA plugin will display a range of key content sections relevant to conference attenders. Each content section will animate open as a panel from the icon at the bottom of the screen. This will initially include the following screens (which relate from left to right to the icons in the image above):

• Attendees: a full list of attenders with Gravatars, sorted alphabetically, with search field to look up attendees by name. For GDPR reasons, attendees should not be downloaded and stored offline on the local device – although this may be reviewed in the future in line with GDPR and privacy regulations and with any permissions requested during attendee sign-up.
• Speakers: a full list of speakers with Gravatar Gravatar Is an acronym for Globally Recognized Avatar. It is the avatar system managed by WordPress.com, and used within the WordPress software. https://gravatar.com/ . , biog and links to relevant sessions, sorted alphabetically, with options to filter Filter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks . They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. by schedule date/topic group and search field to look up speakers by name.
• Schedule: a full schedule for the WordCamp, with a single column per schedule date, and option to filter by Track. Users will have the ability to ‘favourite’ sessions, and these preferences will be stored on the local device. Columns can be swiped left/right to view previous/next day, and the sessions should be filterable to show just the sessions which the user has marked as their ‘favourite’. Depending on when the schedule is viewed, the schedule list should visibly scroll/animate down to the current time/session, so users can see ‘at a glance’ what is ‘on now’.
• Venue Map: one or more graphical floor plans of the venue, with the ability to swipe/pinch to resize and re-position the maps within the viewable area of the screen.
• Announcements: a chronological listing of announcements for attendees during the WordCamp, filterable by type (that is, catering, sessions, social, and so on) and can be determined by the WordCamp organisers.

These five sections will be arranged as icons around a large central ‘Start’ button, docked to the bottom of the screen, to allow users to turn the PWA layer on/off. This circular arrangement would allow us to add additional buttons/sections at a later date, and have these icons ‘revolve’ around the main circular ‘Start’ button with swipe gestures.

The content for all the above sections is already present with the WordPress database for WordCamp sites, apart from ‘Announcements’, which will need a new Custom Post Type Custom Post Type WordPress can hold and display many different types of content. A single item of such a content is generally called a post, although post is also a specific post type. Custom Post Types gives your site the ability to have templated posts, to simplify the concept. to be added, potentially with its own custom taxonomy Taxonomy A taxonomy is a way to group things together. In WordPress, some common taxonomies are category, link, tag, or post format. https://codex.wordpress.org/Taxonomies#Default_Taxonomies . (to allow users to filter different types of announcements). Venue Map images may also require the use of one or more custom fields for storage and display.

Tablet view proposals

Timeframe

The ambition is to pilot a version of the WordCamp PWA plugin at WordCamp London in April 2019, followed by a full launch at WordCamp Europe 2019 in Berlin in June 2019.

Questions

• Would you use this PWA plugin for your WordCamp event?
• Is the content detailed above the most useful for WordCamp attendees – is anything missing or unnecessary?
• Is the design/ UI UI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. proposed intuitive and accessible?
• Any other feedback or observations?

UPDATE: 17 April 2019

After posting these original plans to enhance WordCamp websites with Progressive elements, we received a lot of feedback and suggestions to enhance this development work. Thank you!

Based on this feedback, we now intend to take a more integrated approach to the project.

In practical terms, this will build on the great work of Weston Ruter and his Progressive Web App feature plugin Feature Plugin A plugin that was created with the intention of eventually being proposed for inclusion in WordPress Core. See Features as Plugins . , which brings PWA capabilities – including service workers and the web app manifest – to WordPress. This will mean that, rather than create a new and separate “layer” of context based information “over” the WordCamp website, we will instead allow key pages of an existing WordCamp site to be stored locally on a user’s device for offline access.

In addition, we would intend to create a new homepage for the website for the duration of the WordCamp to display context based content on the Sessions that are “on now” and “up next”, alongside the latest Posts from the Camp website, to put this key information at the fingertips of attendees.

We intend to complete this work in time for WCEU2019. Beyond that, we hope that this enhancement to WordCamp websites would be available to WordCamps around the globe.

# apps , # improving-wordcamp-org , # progressive-web-app , # pwa , # regional-wordcamps , # wordcamp , # wordcamp-sites , # wordcamps