Category: Web Design & Development

Making websites feel good

Written by

We’ve all come across websites that just feel good to scroll through. Each element purposely placed, buttons that have impact, and animations that make you go “ooo”. At Posture we like to call this adding polish. 

Placement

Such a simple idea but placement and hierarchy is one of the core aspects that makes a website feel good. Placement of elements helps guide the eye and the sizing of your content could mean the difference between a confused user experience and a seamless flow of information. 

BAD:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nibh id ligula tempor, vel pretium sem placerat. Quisque pellentesque fringilla orci ac venenatis. Phasellus iaculis, arcu nec lacinia consequat, mi massa vestibulum dolor, nec fringilla leo ipsum a felis. Maecenas convallis posuere purus, non finibus justo rutrum id. Pellentesque et aliquam lacus. Pellentesque malesuada leo eu ipsum dignissim pretium. Vestibulum semper velit ex, semper mollis urna pulvinar nec. Nam vitae porta lectus. Duis felis erat, venenatis nec ipsum id, scelerisque iaculis purus. Sed sodales suscipit tincidunt. Donec id placerat tortor.

BETTER:

I’m a title!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nibh id ligula tempor, vel pretium sem placerat. Quisque pellentesque fringilla orci ac venenatis. Phasellus iaculis, arcu nec lacinia consequat, mi massa vestibulum dolor, nec fringilla leo ipsum a felis. Maecenas convallis posuere purus, non finibus justo rutrum id. Pellentesque et aliquam lacus.

Pellentesque malesuada leo eu ipsum dignissim pretium. Vestibulum semper velit ex, semper mollis urna pulvinar nec. Nam vitae porta lectus. Duis felis erat, venenatis nec ipsum id, scelerisque iaculis purus. Sed sodales suscipit tincidunt. Donec id placerat tortor.

BEST:

I’m the main title of this information section!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nibh id ligula tempor, vel pretium sem placerat. Quisque pellentesque fringilla orci ac venenatis. Phasellus iaculis, arcu nec lacinia consequat, mi massa vestibulum dolor, nec fringilla leo ipsum a felis. Maecenas convallis posuere purus, non finibus justo rutrum id. Pellentesque et aliquam lacus.

I’m a sub-idea heading to relay importance but still part of the main content!

Pellentesque malesuada leo eu ipsum dignissim pretium. Vestibulum semper velit ex, semper mollis urna pulvinar nec. Nam vitae porta lectus.

I’m a list of ideas with my own heading and bullet points to guide the reader.
  • Duis felis erat, venenatis nec ipsum id, scelerisque iaculis purus.
  • Sed sodales suscipit tincidunt.
  • Donec id placerat tortor.
*I’m a footer annotation.

Transitions

Transitions are an important part of what gives buttons on a website presence. Without a hover/active state some buttons might not even be perceived as clickable elements! 

BAD:



BETTER:



BEST:


Call to action

Cards are a great way to create actionable content on websites. Just look at facebook and many other social media platforms they are filled with card based layouts. Cards are an easy way to show that this is an atomic piece of content that usually has built in functionality.

BAD:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nibh id ligula tempor, vel pretium sem placerat. Quisque pellentesque fringilla orci ac venenatis. Phasellus iaculis, arcu nec lacinia consequat, mi massa vestibulum dolor, nec fringilla leo ipsum a felis. Maecenas convallis posuere purus, non finibus justo rutrum id. Pellentesque et aliquam lacus. Pellentesque malesuada leo eu ipsum dignissim pretium. Vestibulum semper velit ex, semper mollis urna pulvinar nec. Nam vitae porta lectus. Duis felis erat, venenatis nec ipsum id, scelerisque iaculis purus. Sed sodales suscipit tincidunt. Donec id placerat tortor.


BETTER:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nibh id ligula tempor, vel pretium sem placerat. Quisque pellentesque fringilla orci ac venenatis. Phasellus iaculis, arcu nec lacinia consequat, mi massa vestibulum dolor, nec fringilla leo ipsum a felis. Maecenas convallis posuere purus, non finibus justo rutrum id. Pellentesque et aliquam lacus.

Pellentesque malesuada leo eu ipsum dignissim pretium. Vestibulum semper velit ex, semper mollis urna pulvinar nec. Nam vitae porta lectus. Duis felis erat, venenatis nec ipsum id, scelerisque iaculis purus. Sed sodales suscipit tincidunt. Donec id placerat tortor.


BEST:

I have a clearly defined title!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt nibh id ligula tempor, vel pretium sem placerat. Quisque pellentesque fringilla orci ac venenatis. Phasellus iaculis, arcu nec lacinia consequat, mi massa vestibulum dolor, nec fringilla leo ipsum a felis. Maecenas convallis posuere purus, non finibus justo rutrum id. Pellentesque et aliquam lacus.

Pellentesque malesuada leo eu ipsum dignissim pretium. Vestibulum semper velit ex, semper mollis urna pulvinar nec. Nam vitae porta lectus.

These are just a few examples of what transforms a website from good to great. Adding the polish is like putting a ribbon on a finely wrapped gift box; it’s not entirely necessary but it’s a nice touch that will leave an even greater lasting impression on the recipient.

Virtual Events Reel 2021

Written by

Back in what seems like an eternity ago, March 2020, when the COVID-19 pandemic was just kicking into high gear, one of the (many) side effects of quarantine were loads of in-person events being rescheduled or cancelled altogether.

We saw an opportunity to pivot and help these businesses, foundations, and organizations keep their plans up and running with virtual events.

Through a year of trial and error and swaying back and forth with CDC guidelines, we teamed up with partners who placed their trust in us to keep their “live” events live with an experimental process during an extremely uncertain time.

Ultimately, we found taking events online was a natural fit for us because we love bridging the gap between the physical and digital worlds.

We present to you our 2021 Virtual Events Reel. Check it out below. Everything by Posture Interactive 🙂

We won some ADDYs!

Written by

We are super excited to share that the Posture fam has been honored at this year’s American Advertising Awards! 

The American Advertising Awards, or Addys, is the largest and most representative competition in the advertising industry. The multi-tiered competition starts at a local level, which is where we come in. 

We unfortunately weren’t able to celebrate in-person (and definitely missed seeing everyone’s faces) but we are still humbled to have won FOUR awards. 

Here’s the rundown on the projects that took home awards: 

GET Cities

Gold: Corporate Social Responsibility Online/Interactive

Gender equality is something we’re extremely passionate about, which is why we’re so touched that GET Cities was recognized in the gold category. GET (Gender Equality in Tech) is an initiative working to build a more inclusive future in tech. Our crew designed and developed the GET Cities site and launched in two months on an accelerated timeline to meet their needs. Check out the site to learn more about GET Cities. 

Scranton For You Campaign

Silver: Integrated Media Pro Bono Campaign

Many of us were hit hard by the pandemic this past year, especially our beloved local businesses. The Posture gang was compelled to do something to help the fearless entrepreneurs in Northeast Pennsylvania and so we launched the Scranton For You campaign. 

We found this project extra rewarding, not only because we had the privilege of working with some of our local friends, but that we were able to help unite businesses and consumers to meet a common goal- supporting each other.    

Scranton For You:60 Spot

Silver: Local Television Commercial

The Scranton For You campaign was packed with so much content but we wanted to show some love for one of our favorite pieces. This 60 second video spot was the very first video we created for the campaign. These local businesses really helped us to realize the power of storytelling and inspired the campaign to grow.

CsforCA

Silver: Consumer Website

We were also awarded in the Silver category for our work with the Computer Science for California initiative, or CSforCA. CSforCA aims to provide high-quality computer science education in K-12 public schools throughout California. This project allowed us to partner with our pals over at Rally, with whom we previously worked on the Fighting for Change campaign, to build a new site for CSforCA in just a few weeks. Access to computer science education and resources is something we hold near and dear to our hearts, and we’re so grateful to have our work recognized in such a meaningful way.

Big thanks to the American Advertising Awards and the American Advertising Federation of NEPA for an awesome virtual event. We love being part of such a creative community that encourages and uplifts each other, and we want to congratulate the rest of the incredible work we saw this year. But most of all, we need to thank our community partners and clients for continuing to believe in us and allowing us to work on some really amazing projects with you. Ya’ll are the best! 

A Curated Journey of Interactive Inspiration

Written by

Every week, our team comes together for a run-down of all the creative projects we currently have in motion to make sure we’re giving each one the attention it deserves. During these weekly creative meetings, we also share any inspiration that we find along the way for the rest of the team to catch the creative vibes.

Here are some of our favorite inspirational pieces from the last few weeks – maybe you’ll catch some vibes, too.

6 Ways to Manage Productivity When You Have Bipolar Disorder

Productivity is already hard, but mental health disorders compound that challenge immensely. Our creative team encounters a range of mental health hurdles and found this article super helpful. Read More Here >>

Same Energy – Visual Search Engine

If Google image search and Pinterest had an awesome baby. A great tool for mood boarding your project. Read More Here >>

Philippe Neveu – Independent Motion and Interaction Designer

We dare you to click this link and tell us this portfolio site isn’t fun as hell. Read More Here >>

Typography Principles by Obys

We’ll never know how an agency found time to create this fantastic resource while working on client projects, but we’re here for it. Read More Here >>

A Chaotic Year in Review

They found a really cool way to recap a really crappy year. Read More Here >>

Google Design’s Best of 2020

Google gives themselves a big pat on the back – but honestly, it’s well-deserved. Read More Here >>

When Life Hands you a Pandemic, Make Dog Lemonade

Written by

Stay Home. Practice Social Distancing. We’re all in it together. We stay home so they can save lives.

By now, you’re pretty familiar with the new messaging surrounding the current global situation. And like many others, you probably hadn’t factored a global pandemic into your 2020 business plan. Yeah, neither did we.

We did, however, have plans to meet with new businesses and generate new branding ideas. We had plans to:

  • Travel to new places and go to weddings with friends and family.
  • Keep our current websites in tip-top shape with new code updates.
  • Have a Posture group game night, as we tend to do every few months.
  • Go on video shoots and capture our partners at the moment.

We also had plans to launch a fake dog version of our site for an April Fool’s joke. Obviously, we had to put some of those plans on hold. Other ideas, however, we were able to carry out with a new spin.

In the spirit of being an interactive group full of creative problem solvers, we’ve pushed ourselves harder than ever before to find ways to carry out plans. We kick off new websites and projects via video conference. We have digital competitive challenges daily capped off with a video conference “Happy Hour” every Friday.

We coach our clients through shooting their own video and sending the footage our way to work our Posture Magic™ on it. We find ways to continuously connect with others while uncovering the silver lining one day at a time.

We have been so inspired by those around us that we are continually finding new ways to get their message out and bring in business without physically interacting with people.

This ability to change course when things don’t go as planned has been an integral part of our business over the years. It is what led us to our recent rendition of “Pawsture Interwagtive.” We had planned for this launch since January, gathering assets and footage and carefully curating a social campaign to launch as an April Fool’s joke.

Honestly, we couldn’t see that original plan going over well at this point in time, and we couldn’t be tone-deaf to what was happening around us. So we got to work re-tooling a lot of our messaging for the original social media schedule and pushed up our launch schedule to fill the remainder of March instead of hitting one day in April. We realized that now, more than ever, the world needed to see the smiling puppy faces of Pawsture Interwagtive. We hope you enjoyed them as much as we do every day!

Think about those plans you had before you found out about “shelter in place.” What spin can you put on them now to find a new way to connect with others? We have been so inspired by those around us that we are continually finding new ways to get their message out and bring in business without physically interacting with people. This is what interactive design looks like on a global scale – making a digital connection with those around you to present a clear message. This is one of the things we love most about the work we do.

The world is continuously changing, but all we can do is take it one day at a time. If you need advice on how to do that, we’re here for you. From all of us (and our pups) at Posture, we wish you much love as we all continue to navigate this new normal.

Visit getpawsture.com to see our pups at work.

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.

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!