CONTENT MANAGEMENT

CONTENT MANAGEMENT

As an integral part of a lean publishing team, I had to assume multiple responsibilities whenever they were necessary. In the role of content manager I adapted articles designed for a mobile app to the web and built out original content that was both interactive and responsive.

DEVELOPMENT AND BUILD-OUT

The BREAKGROUND website was intended to be an alternative destination for readers to find content that was originally published in the mobile app. We wireframed the basic architecture for a web developer who built the site in WordPress as a short term solution.

VISUAL COMPOSER

The site employed Visual Composer as a page/post builder. The tool had its flaws, but also offered a lot of flexibility and built-in options that could help mimic the plethora of functionality that was built into the magazine app. Everything else required a bit of raw HTML and JS.

PORTRAIT VS. LANDSCAPE AND MOBILE RESPONSIVENESS

Consistently, the main challenge was making assets and layouts intended for a portrait-only orientation look native in a web-friendly landscape (sorry, bad pun) on both desktop and mobile devices. This is where I learned the most about how to be fast and efficient in building web layouts for multiple platforms — to the point where I could help other members of the team perform the same work.

Content management was admittedly frustrating at times, but it was especially gratifying when the analytics came in and showed average read times of 15-30 minutes on feature articles.

BIOP BASE 1
BIOP BASE 2
BIOP BASE 3
BIOP BASE 4
BIOP BASE 5

Many assets and layouts from the app (left), which were constructed for a portrait-only orientation with the InDesign-heavy Adobe Experience Manager, were challenging to bring to the web (right). Some of our solutions: embrace wider negative space margins, find comparable Google fonts, and parallax to show the breadth of a full-width image without elongating the page extensively.

BIOPLASTIC

The final hurdle was then optimizing the desktop web layout (left) for mobile (right). While we could re-insert some of the assets used for the app (far left) with minimal cropping, the vertical stacking layouts that mobile platforms demand made for a much longer page.

BIOPLASTIC-COMPARE-MOBILE

CONTENT MANAGEMENT

As an integral part of a lean publishing team, I had to assume multiple responsibilities whenever they were necessary. In the role of content manager I adapted articles designed for a mobile app to the web and built out original content that was both interactive and responsive.

DEVELOPMENT AND BUILD-OUT

The BREAKGROUND website was intended to be an alternative destination for readers to find content that was originally published in the mobile app. We wireframed the basic architecture for a web developer who built the site in WordPress as a short term solution.

SIMPLE WIREFRAMES

VISUAL COMPOSER

The site employed Visual Composer as a page/post builder. The tool had its flaws, but also offered a lot of flexibility and built-in options that could help mimic the plethora of functionality that was built into the magazine app. Everything else required a bit of raw HTML and JS.

PORTRAIT VS. LANDSCAPE AND
MOBILE RESPONSIVENESS

Consistently, the main challenge was making assets and layouts intended for a portrait-only orientation look native in a web-friendly landscape (sorry, bad pun) on both desktop and mobile devices. This is where I learned the most about how to be fast and efficient in building web layouts for multiple platforms — to the point where I could help other members of the team perform the same work.

Content management was admittedly frustrating at times, but it was especially gratifying when the analytics came in and showed average read times of 15-30 minutes on feature articles.

BIOP BASE 1
BIOP BASE 2
BIOP BASE 3
BIOP BASE 4
BIOP BASE 5

Many assets and layouts from the app (left), which were constructed for a portrait-only orientation with the InDesign-heavy Adobe Experience Manager, were challenging to bring to the web (right). Some of our solutions: embrace wider negative space margins, find comparable Google fonts, and parallax to show the breadth of a full-width image without elongating the page extensively.

BIOPLASTIC

The final hurdle was then optimizing the desktop web layout (left) for mobile (right). While we could re-insert some of the assets used for the app (far left) with minimal cropping, the vertical stacking layouts that mobile platforms demand made for a much longer page.

BIOPLASTIC-COMPARE-MOBILE

As an integral part of a lean publishing team, I had to assume multiple responsibilities whenever they were necessary. In the role of content manager I adapted articles designed for a mobile app to the web and built out original content that was both interactive and responsive.

DEVELOPMENT AND BUILD-OUT

The BREAKGROUND website was intended to be an alternative destination for readers to find content that was originally published in the mobile app. We wireframed the basic architecture for a web developer who built the site in WordPress as a short term solution.

THEME AND PLUGIN

The site employed Visual Composer as a page/post builder. The tool had its flaws, but also offered a lot of flexibility and built-in options that could help mimic the plethora of functionality that was built into the magazine app. Everything else required a bit of raw HTML and JS.

PORTRAIT VS. LANDSCAPE AND MOBILE RESPONSIVENESS

Consistently, the main challenge was making assets and layouts intended for a portrait-only orientation look native in a web-friendly landscape (sorry, bad pun) on both desktop and mobile devices. This is where I learned the most about how to be fast and efficient in building web layouts for multiple platforms — to the point where I could help other members of the team perform the same work.

Content management was admittedly frustrating at times, but it was especially gratifying when the analytics came in and showed average read times of 15-30 minutes on feature articles.

BIOP BASE 1
BIOP BASE 2
BIOP BASE 3
BIOP BASE 4
BIOP BASE 5

Many assets and layouts from the app (above), which were constructed for a portrait-only orientation with the InDesign-heavy Adobe Experience Manager, were challenging to bring to the web (below). Some of our solutions: embrace wider negative space margins, find comparable Google fonts, and parallax to show the breadth of a full-width image without elongating the page extensively.

BIOPLASTIC

The final hurdle was then optimizing the desktop web layout (above) for mobile (below). While we could re-insert some of the assets used for the app (top) with minimal cropping, the vertical stacking layouts that mobile platforms demand made for a much longer page.

BIOPLASTIC-COMPARE-MOBILE