Category: Web Design & Development

How the Tables Have Turned

Written by

It was the mid-1990’s when I first caught the web development bug. Home computers were just becoming affordable, dial-up was about as good as it got and Geocities was all the rage. (For the uninitiated, Geocities was akin to the great-great-great-great-grandfather of Wix.) The very first website I built was a fan page dedicated to the old TV show “The Wonder Years”, and it had it all! We’re talking about colorful backgrounds, marquee headlines, a view counter and most importantly for any website of the time, a working Guestbook in which viewers could leave feedback.

In those days, the technology stack was fairly simple, relying on mainly just HTML (HyperText Markup Language) with inline styles and built-in tags. Given the lack of options, the table-based layout was king if you needed anything spanning more than one column on the page. Think of an excel spreadsheet; it’s the same concepts where you have rows and columns and can span elements across multiple or single rows to achieve different layouts.

In 1994 everything changed for web developers. 

The first iterations of CSS (Cascading Style Sheets) and PHP were first introduced, with JavaScript following shortly after in 1995. CSS gave developers a way to separate the markup (AKA HTML) from the styles (CSS) so you could have cleaner files by applying styles to multiple elements on the page using classes and IDs. Similarly, PHP allowed the user to create reusable templates and cut down significantly on copying and pasting the same code over and over. It also gave us a convenient way to interact with the web server, allowing us to create forms to pass data from the web browser to the server and back again (think of a basic contact form).

Arguably one of the most important changes to the web happened in 1996, with the advent of Javascript. 

As a front-end language, it allowed developers to take advantage of some functionality previously only afforded by a backend language. Meaning, we could now leverage the power of the browser to capture and change elements on the page without reloading the page. How exciting!

Since then, the web has changed quite significantly. We’ve seen the rise and fall of Flash which offered a great solution for not only animations but also allowed for video on the web. We’ve watched Google go from a little-known web search engine that helped you find your favorite websites, to a global conglomerate and behind every technological solutions is a team of web developers.

Instead of trying to learn ALL of the things, focus on a particular framework that meets your needs, has a good community following (this one’s huge on the path to success)…

Modern web developers now rely on a wide-range of tools beyond just the basics.

We still have the basics: HTML, CSS, Javascript, PHP etc. but now we have sub-choices to make. Deciding WHAT backend and frontend frameworks you want to use is just as important as a designer choosing a color scheme… and what a number of choices we have! There’s a running joke in the web development community that a new Javascript framework is written every day and the names become more and more ridiculous with each iteration. Take for instance handlebars.js which is an extension of the moustache.js templating system. (No. I’m not joking. Look it up. I’ll wait.) 

As the name suggests, it was named mustache because the parentheses look like a Mustache. E.g. {{placeholder}}

With so many choices, how does one decide?

The answer is actually quite simple. Instead of trying to learn ALL of the things, focus on a particular framework that meets your needs, has a good community following (this one’s huge on the path to success) and never stop learning! The reality is that what used to be a single person’s job, now requires a team to be successful. That’s not saying that a lone developer can’t be successful, but behind a single developer is a network of colleagues that help redefine the web landscape through open-source contributions and are available to share expertise on matters that require a unique perspective. As an example, a typical day on the job for me involves the following technologies: HTML, CSS/SASS, Foundation/Bootstrap, Javascript, NPM, PHP, NodeJS, ReactJS, Webpack, SASS, MySQL, WordPress, Adobe XD/Sketch, Photoshop, Illustrator, I could go on but you get the picture!

Whether you’re a Front-end, Back-end, or Full-stack developer, there are so many jobs to be done in order to ensure a successful website. It’s not only about possessing the knowledge and experience of HOW to build a website, BUT also having a good support system from designers, marketers, project managers, and colleagues.

Overall, the community of developers have accomplished so much in just 15 short years, and personally I’m excited to see how far we can push the limits of technology together.

Posture Interactive – Portfolio Reel 2019

Written by

We’re pleased as pie to present to you our 2019 Portfolio Reel –  Thanks and much love 🧡🧡 to all of our clients, friends and family for the continued support you show us. Turn the volume up and enjoy! 🥳

React Training

Written by

Training 4 Development giving Posture’s development team the “low down”

This past week we put the development in professional development! Our dev team completed an intense week-long training that sharpened their coding skills in React, Redux, and Typescript. Web design and development are constantly changing so it’s important to stay on top of the trade’s trends. We’re constantly trying to find new ways to improve our brand’s strategies and help them improve, so we’re glad we got to learn some new tricks from Training 4 Development.

SEO: The Internet’s Dewey Decimal System

Written by

SEO: The Internet’s Dewey Decimal System

 

Posture Interactive SEO library
In the Google-plex universe of the internet terms like SEO, API, and algorithm are thrown around, but what does it all mean and why is that important to you as a customer?

Internet jargon is all the rage nowadays, but it’s shrouded in mysterious overtones. In the Google-plex universe of the internet terms like SEO, API, and algorithm are thrown around, but what does it all mean and why is that important to you as a customer? First, it should be noted what SEO stands for: Search Engine Optimization.Put simply: SEO is  the underlying system that helps search engines create relevant results on websites like Google.com. Even that sounds vague and very intangible, though. It becomes a lot easier to understand when you think about it in terms of physical objects.

So let’s imagine the whole internet is in a library, and all the books within the library are the websites that inhabit them. These books have images, text, and tons of info within them that are managed by the Dewey Decimal System. When you look for a book at a library, the librarian can look up the book on their computer or uses the Dewey Decimal System, which is a system created to organize books by their subject. When it comes to the internet,  you have Search Engines like Google or Bing instead of a librarian. Rather than using numbers to find your website, like the Dewey Decimal System, these search engines use metadata. Metadata is the information that defines what kind of topics are within websites. Meta is a Greek derived term meaning “beside” or “alongside.” So its all the data that naturally appears alongside a website as its developed that gives it content

All of this content has to be logged and indexed in search engines like a book would if it were to show up in the dewey decimal system.

…its all the data that naturally appears alongside a website as its developed that gives it content

Best practices these days consist of someone combing through and editing the metadata to correctly inform the Search Engines what all the content is, or the search engine will define it however it sees fit (or sometimes not a all). So it’s important to have someone go through and make sure the content throughout the website is correctly formatted to communicate with the Search Engine effectively to show relevant results for the customer.

You might be thinking: why do I need someone else to do that for me? First, you might need to edit direct HTML in the websites code. It’s not impossible, but can sometimes be risky, frustrating, and time consuming. Someone who is intimately involved with websites can do this more quickly and efficiently. Secondly, there are ethical guidelines for the internet’s metadata. Back when Google started out, you could simply trick the search engine into  bringing your results up first by jamming a bunch of keywords into your metadata (known now as black hat SEO and VERY much frowned upon). This meant your end user might get unrelated results because someone packed their website with poor quality metadata.

Google is a little bit more complicated now, and uses an algorithm that actually tries to get around these SEO tricks that manipulate the search engines. Google actually encourages people to report improper use of SEO, so its important to keep your metadata ethical and full of truthful and quality information.

Have any questions or need help with your SEO, drop us a line: Contact Posture

Life, Liberty and the Pursuit of the Internet

Written by

Well, Google, net neutrality affects everyone.

As we celebrate our independence, we couldn’t help but think a bit on this summer’s changes in rules regarding a “free” internet. On June 11, when net neutrality officially expired, and we were trying to find the latest updates , Google suggested: “How does that affect you?” Well, Google, net neutrality affects everyone. it’s just that the internet is so populated with news sources reporting different aspects, that the “how” gets drowned out. It seems no one knows what to make of it.

Here at Posture, we are most interested in what it means for us as a team and the clients we serve. Will it slow traffic to the web applications we create? How will we know? Will it limit people’s access? How will clients need to evolve in order to stay current with any trends or consequences that result from the Net Neutrality expiration? For the most part we don’t have definitive answers. We do however, have a hell of a lot of ideas.

The internet was created as a government program during the Cold War to bypass wired communication, in the event of an attack. Essentially, the government set up what we would call servers in order to send and receive very limited amounts of information. These bits of information would later be used to transmit scientific data, and later the servers would expand and grow to become the “World Wide Web.”

Essentially, the government set up what we would call servers in order to send and receive very limited amounts of information.

At the time of its creation, the World Wide Web was the epitome of human communication, and obviously in many ways it still is. The expiration of net neutrality marks an end of the World Wide Era in the context of information freely flowing without limit.

Now,companies and profits can be prioritized for certain levels or access to services instead of the users being free to experience any service they wish. Many companies made statements assuring customers of their loyalty to customers. It’s a hard place to be, the crux of two impasses: customer loyalty and making money.

At Posture, we want our clients to be happy, which means we provide the best possible products and services in order to fulfill their goals. We expect no less of our internet providers. We’ll keep our information on this topic free flowing as we learn more.

At Posture, we want our clients to be happy, which means we provide the best possible products and services in order to fulfill their goals.

Seed to Farmacy Branding & Experience

Written by

Planting the seeds for a successful fundraiser experience

We were first presented the opportunity to work on this project by designing the invitation and donation collateral well before the virtual garden concept had been born. This was an exciting design challenge in itself, as the client wanted to carry over the farm-to-table theme into the actual design and production of the invitations. We sourced sustainable parsley seed paper as the branded piece that held the invite, reply card, and inserts together, which could then be planted in the recipient’s’ own garden at home.

To carry the sustainable planting concept through to the Virtual Garden experience, we then designed and produced seed “tickets” on more parsley seed paper that each donor at the event would take to our physical garden. They would then rip and plant the “seed” design of the ticket and keep the stub for planting at home. At the end of the night, the garden was filled with planted parsley seeds – the virtual garden reflected this in all the plants that appeared on the screen. This garden was then taken to the Fresh Food Farmacy in Shamokin, PA to produce parsley that could be used by FFF patients in healthy meals.


 

The physical garden design was a collaborative process involving custom vector art, branded signage, an adventure at Home Depot, and a garage-based construction session. Building the physical box along with the electronic components was a great opportunity for the Posture team to showcase their maker skills. The box itself was prototyped first, and built using ¾ inch plywood. Measuring in at six feet long and two feet wide, the planter was designed to accommodate a large amount of plants.

 

The electronics side of the planter ran on a MakeyMakey. We drilled holes throughout the planter with an exposed copper lead coming out of each. Donors used a small metal shovel, which was wired to the MakeyMakey, to plant their seed paper tickets into the planter. The soil was measured out to cover the exposed wires and was kept damp to maintain a consistent level of moisture. With that, donors could complete the circuit with the grounded shovel and the leads inside the soil.

 

Figuring out how to handle such an interactive experience was an interesting challenge to overcome. We’ve previously used Processing for Generative Art installations, but we knew we needed to find a tool that could handle concurrent processes and animations better. We landed on Phaser, an open source “Desktop and Mobile HTML5 game framework”. We were able to use a fast and modern Javascript framework to handle the animations, reading from an API and listening for user input. The entire front end was designed to be modular and completely customizable by using Javascript ES6 classes and the Phaser 3 syntax.

 

We knew from the start we would need some sort of database and admin area in order to capture and seed the game (pun intended) with donation information. Once we became more familiar with Phaser and its capabilities, we decided the best approach would be to create a PHP wrapper to encapsulate the game and use a standard JSON file to pass data back and forth between the game side and the admin side. This project required a custom built MySQL database architecture to tie all the data together, and so we chose CakePHP as our framework to rapidly build the foundation of the admin area and to easily interface with the database. We then built a locked down website to prohibit outside users from potentially accessing any parts of the game, since it would be publicly displayed on a large screen at the event. The admin area included a section for inputting donor information, as well a customized troubleshooting section, to provide added redundancy in the event of a connection, software, or hardware issue.
 

We were also on hand the day of the event to set up, run final testing, and execute the experience for users as they arrived. Setup included fully filling the garden with the soil, interfacing our computers with a large display, and feeding our video feed out to one of 4 main wall projectors in the event space. During the event, we guided users through the garden, helped the client keep track of donations and amounts, and ensured that our build ran as smoothly as it did during testing. Ultimately our station was one of the highest trafficked tables at the event, and generated a high amount of donations for the Fresh Food Farmacy.
 

Validation is Nice. Recognition is Humbling. Let’s Push Further. Posture Interactive at the Addys.

Written by

TL;DR : Posture won some awards at the Addys, enlightenment ensues.

This past weekend our agency had a stunning experience at this year’s American Advertising Awards, the annual ceremony where creativity’s effectiveness, judged by folks we respect & recognize, is acknowledged and ultimately rewarded for excellence at the Addys 2018.

Posture Interactive - American Advertising Awards - AAF Scranton Addys 2018
(L to R) Mat Giordano, Robert Jones, Kathryn Bondi, Tony Bartocci, Jean Carlos Cedré, Joey Zarcone, Charles Ferran. Not pictured: Kevin O’Boyle, Doug Griffiths

 

Now that it’s been a few days, I’ve had a bit of time to try and understand what that night signifies for our team, processing how we got here, and looking forward to where we’re headed. I apologize in advance for the windy road below and appreciate the time your eyeballs are on loan to these words….

This year’s Addy awards yielded us the type of acknowledgement that gravity sort of pushes down onto you like humid air…a blissful, nervous, overwhelming, ultimately self-conscious state of being where you aren’t sure what to do or say, how to feel or what to make of it.

Posture Interactive - American Advertising Awards - AAF Scranton

We ultimately won eight awards (listed below in order of category – client – award):

  • Sales Kit – Marzio – Silver Addy Award
  • Collateral Materials – Metz Culinary “Our Recipe” Employee Guide – Silver Addy Award
  • Packaging Campaign – Electric City Roasting Co. Cold Label Packaging – Gold Addy Award
  • Branded Content Entertainment Campaign – Breaking Benjamin Social Teaser Video Campaign – Gold Addy Award
  • Digital Self Promotion – Posture Interactive Company Website – Gold Addy Award
  • Judge’s Choice – Electric City Roasting Co. Cold Label Packaging
  • People’s Choice – Electric City Roasting Co. Cold Label Packaging
  • Best in Show – Breaking Benjamin Social Teaser Video Campaign

Addys 2018 Takeaway #1 – Validation is Nice. 

To a certain extent, falling into the category of recognition for anything that we put out the door makes me do a double take. Years and years ago when we formed this little strange-brew human triad of a designer, a programmer + and a business director, we had no idea how we were going to *do* anything.

We didn’t have much, but we had what we needed.

We had a strong, rapidly evolving knowledge base of core design and development beliefs and best “practices” with the chops to back it up. We had a deep, neural understanding of the need to execute the client’s vision in their best interest no matter what, and ultimately how to build the foundation of long-term, healthy business relationships.

Posture was built culture-first. I don’t care how freakishly talented some rock star developer is. If they are an asshole, I don’t want to be around them a bazillion hours a day (and I certainly don’t want to make cool shit with them). If we can we have a conversation that produces something meaningful, and the skillset is chasing close behind, we’ll gladly cultivate that mindset and grow *with* you. The rest is cake: Just don’t be a dick.

This many years later, I never dreamed I would be so fortunate to have had the opportunity to hire and surround myself with such talented people that are just…*better* than me in every sense of the word: I’m made aware & encouraged every day to be a better artist & builder & thinker, to develop more tasteful business acumen, and to strive to actually become the person I’m prone to convince myself I think I am.

I get to work and grow with these incredibly talented people every day to produce some of the most creative, challenging, and engaging solutions our clients have come to know and depend on us for.

It was only after I ran this dialogue back in my head (quite a few times) that I was able to get a grip on why people put so much weight on being validated and why it matters.

When I wrap a project, if I’m cool with it and it has met or exceeded the client’s business objectives, that’s as far as I can let myself define a “success” for our team. Taking some time the past few days to dig into how I reflect on work we complete, more often than not at some uncomfortably blistering pace, makes me think I need to be open to understanding and accepting validation more in general.

Posture Interactive - American Advertising Awards - AAF Scranton

We work in an incredibly competitive, feverishly paced industry. These awards represent projects that span the breadth of our core competencies and were in some way or another touched by every single team member doing the best that they possibly could to help make our clients successful.

I realize now that these awards signify that *in addition* to meeting our client’s goals and helping write their success story, our work is being appreciated by other creative talent in our industry as well…peers that understand the hustle and what good hard work is when you see it.

If this is what feeling validated is like, sign me up all day. 

Recognition is Humbling.

This speaks for itself, but we are truly humbled to have been recognized to this degree by the American Advertising Federation. A jury of fellow creatives singling out our work out of the battering ram of submissions is incredibly rewarding and we couldn’t be more grateful.

None of it really comes easy for any of us, and I’ll spare you the cliché agency nonsense masquerading as team-building or business growth …such gems as “Excellence is a habit”, or “you can’t choose which projects you go all in on or which you push through the pipe – go all in every time and be inspired!”……it’s all bullshit.

We’re a team and a family. We fight, bicker, bitch and moan. We burn ourselves out on the grandest of scales. We’re all incredibly guilty of not seeing beyond the closest Deadline o’Clock coming full throttle, but also staring it right down to not only our own mental nerve-endings but of those around us as well. It’s intense, it’s challenging, it’s relentless, and I wonder on occasion how we didn’t implode or collapse on ourselves completely by now…

Posture Interactive - American Advertising Awards - AAF Scranton

Why is calling ourselves out like this so important? Humility. It’s all rooted in Posture’s commitment to getting the absolute best solution for the visions and goals that we are fortunate enough to be trusted with by our clients.

My mind loses sight of that, and we just need to remind ourselves every now and again that we are never pushing for the *wrong* solution, or the *easy* way out when it gets tough. We are pushing for the new, the best, the most abstract, the brightest…we’re pushing further.

We were recognized and rewarded for our take on the creative spirit of excellence in the art of advertising.

I can’t tell you how proud that makes me to say, and with just a smidge less self-consciousness this time around the bend.

Let’s Push Further.

We look forward to what this year may bring, having the opportunity to be pushing new boundaries, exploring new tech, creating new types of content and solutions for our clients…virtual reality, 360° video, Blockchain development…the sky is the limit, and I’m looking for 2018 to be a pretty rad year.

About the American Advertising Awards/ADDYs

Conducted annually by the American Advertising Federation (AAF), the local chapter is the first of a three-tier, national competition. Concurrently, all across the country, local entrants vie to win ADDY Awards – recognition as the very best in their markets.

All local Golds get automatically forwarded to the second tier where they compete against winners from other local clubs in one of 15 district competitions. District ADDY winners are then forwarded to the third tier, the national stage of the American Advertising Awards.

The ADDYs 2018 is the advertising industry’s largest and most representative competition, annually attracting more than 40,000 entries.

In It for the Long Haul – v3

Written by

Think it. Build it. Ship it. Tweak it.

So here we are, late 2017, and the first iteration of our new web presence is officially out there. To me, Posture v3 really wasn’t just another redesign. This was a vehicle to show how we’ve grown, how our team works together, how the scale and process of the work we’ve done has increased and improved, and most importantly as a vessel to convey how we help & work with our clients throughout a project cycle and the journey that follows.

 

 

We have obstacles, failures and successes throughout our projects, and feel we demonstrate admirable problem-solving skills quickly when under the gun.

We have become partners in crime with our clients. We use collaborative tools to manage our workflow alongside their internal teams. We are a resource to offer perspective and ultimately solutions when a new project arises.

We are trusted to take on complex projects and manage their digital presence, no matter the scale or requirements.

This evolution of Posture Interactive is the beginning of a much larger story we are telling. Iterative, organic…a pulsing piece of our culture you can feel if you dive in.

Our goal now is to treat this new home on the web much like a software product – we have our MVP (minimum viable product) now, the bare bones basics to be built and iterated upon.

As we release v3.1, 3.2 and so on our goals will align, we will identify improvement points with the site, how to better design for our users when we are trying to get them to complete an action, and what steps need to be taken to fix and maintain both.

Think it. Build it. Ship it. Tweak it.

I’m proud of where we are today, and we are only getting started…

_mat

Hello!

  • FYI... If this is regarding a new project - please go back and simply use the "Start a Project" button so we can better help you out!