Business

Tech


<p>Whether it’s frontend architecture,&nbsp; backend infrastructure, devops or developer experience, there is so much you can do to optimize your digital product. At Crafted, our team utilizes all of the following when building from scratch, some of the best practices below will allow your software to achieve long-term, sustainable success.&nbsp;</p>



<h2 class="wp-block-heading"><strong>On the frontend &#8211; Build Progressively</strong></h2>



<figure class="wp-block-image size-large"><img decoding="async" src="https://wordpress.craftedup.com/wp-content/uploads/2019/09/laptop-3173612_1280-1024x576.png" alt="Laptop with a line graph trending upward" class="wp-image-111920"/></figure>



<p>Simply put &#8211; build the next version of your app as a <a href="https://craftedup.com/blog/make-your-website-faster-better-and-more-secure-with-a-pwa/" target="_blank" rel="noreferrer noopener">progressive web app</a> (PWA).&nbsp;</p>



<p>When it comes to the frontend, speed and responsiveness are everything. It’s not just a UX benefit anymore. It’s a proven fact that a faster experience on the web directly contributes to the success of a product. Whether it is the benefit of increased visits due to the SEO bump, or increased conversions for mobile users, teams must build with performance and mobile at the forefront of a product’s strategy.&nbsp;</p>



<p>The truth is, <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://twitter.com/lukew/status/1171437744502951936" target="_blank">we are what we measure</a>, and that has created an ecosystem of bloated, slow experiences on the web. Companies like Reddit are constantly asking us to download their web app. Also, how many times have you been asked to sign up for the newsletter via a popup or had to accept the fact that this website is using cookies? This has led to a degraded experience for customers as all of this adds significant overhead and javascript bloat that is intrusive to customers and allows big tech companies to harvest their data. Don’t be that product! Google doesn’t want you to and they have now built it into their core algorithms to stop this from perpetuating further.</p>



<h2 class="wp-block-heading"><strong>Containerize Your Apps</strong></h2>



<p>Managing servers and infrastructure is tough. Moving your stuff to the cloud doesn&#8217;t automatically make things easier either. Containerizing your apps can help make this easier by virtualizing the entire application within what’s known as a container. A container is a lightweight&nbsp; standalone, executable image of your software that includes everything needed to run your application. This includes the application code all the way down to the metal of the server and operating system it runs on.</p>



<p>Containerizing is not just for your backend infrastructure. We containerize our frontend applications too, which make deployments and versioning much easier. You can even use containers to manage your local development environments. Doing so enhances development experience 10x by making it easier for new dev’s to get their setup processes complete. This is usually a huge headache and involves hours of skull crushing configuration that sometimes has awkward behavior depending on the operating system and configuration of your machine.</p>



<h2 class="wp-block-heading"><strong>Scale better with Serverless &amp; Infrastructure as Code</strong></h2>



<p>When it comes to managing the computing power and network connectivity to your app, nothing is simpler than not having to directly manage a server. Even with containers, your app can be a pain to manage due to the fact that you still have to handle the underlying computing instances. For that, we use <a href="https://docs.aws.amazon.com/AmazonECS/latest/developerguide/ECS_GetStarted_Fargate.html" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">ECS with Fargate on AWS</a>.&nbsp;</p>



<p>With infrastructure as code, you can declaratively describe the type of infrastructure needed and deploy via a CLI. That means you don’t have to remember exactly how to click through that wizard on AWS or Azure. You can do this work once and re-use / tweak it for future projects. There is actually <a rel="noreferrer noopener" aria-label=" (opens in a new tab)" href="https://twitter.com/nathankpeck/status/1171434304334782464" target="_blank">a maturity model</a> that will be discussed on an <a href="https://pages.awscloud.com/AWS-Online-Tech-Talks_2019_0911-CON.html?&amp;trk=ep_card-el_a131L00000583TRQAY&amp;trkCampaign=September_2019_0911-CON&amp;sc_channel=el&amp;sc_campaign=pac_Q3-2019_exlinks_events_OTT_09DGAB&amp;sc_outcome=Product_Adoption_Campaigns&amp;sc_geo=NAMER&amp;sc_country=mult" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">upcoming AWS Webinar</a> hosted by Nathan Peck that we’re excited about. The basics &#8211; start simple, but eventually you should be having all infrastructure containerized, scalable, and portable. Easy as pie, right?</p>



<h2 class="wp-block-heading"><strong>Accessibility Matters &#8211; Make it Happen</strong></h2>



<figure class="wp-block-image is-resized"><img loading="lazy" decoding="async" src="https://wordpress.craftedup.com/wp-content/uploads/2019/09/Artboard-1024x494.png" alt="Diagram showcasing color view with mobile labels using color to distinguish meaning. To the left, someone with no colorblindness disability. To the right, someone with red-green colorblindness, but with additional indicators of differentiated labeling. " class="wp-image-111923" width="1024" height="494"/><figcaption><em>A person with Protanopia will have a hard time distinguishing many shades of color. Consider adding labels with colors and text.</em> (<a href="https://uxplanet.org/designing-ecommerce-for-colourblind-users-1ffd648c9f91">img</a>)</figcaption></figure>



<p>More and more companies are making accessibility a priority. <a href="https://www.fastcompany.com/90385375/dominos-is-locked-in-a-legal-battle-over-the-future-of-web-design" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">Some are not</a>. Accessibility is what makes apps usable for those with impairments that include auditory, visual, cognitive, neurological, speech, and physical disabilities. Without accessibility, companies are limiting themselves to only serving able-bodied individuals, thus missing out on servicing over 55 million people in the USA alone. Not to mention, it’s just the right thing to do.&nbsp;&nbsp;</p>



<p>Contrary to popular belief, accessibility isn’t just beneficial for those with disabilities. It’s helpful for the folks who need to access mobile content with lower speed phones, the businesspeople who need to watch audio and visual content in a noisy space, and even the new parents who need to to hold newborns with one hand while also being productive with the other. It’s important for apps to keep all potential users in mind. That way, your product is able to be enjoyed by all.&nbsp;</p>



<p>In the past, <a href="https://www.usability.gov/what-and-why/accessibility.html" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">accessibility</a> has been an afterthought and only done to appease SEO checklists. For retailers who have implemented this through moral or legal obligation, they have realized the value of developing with accessibility in mind. Accessible apps will enhance your reach and overall bottom-line. Users will thank you later.&nbsp;</p>



<h2 class="wp-block-heading"><strong>Utilize Design Systems</strong></h2>



<figure class="wp-block-image is-resized"><img loading="lazy" decoding="async" src="https://wordpress.craftedup.com/wp-content/uploads/2019/09/SEVEN-1024x576.png" alt="Image showcasing examples of design systems for cards, colors, buttons and grids" class="wp-image-111921" width="1024" height="576"/></figure>



<p>Moving on from the MVP means designing at scale. It does not mean that your developers should be writing custom CSS every time they need to implement a button on a page within your app. Design systems allow apps to scale by creating repeatable patterns that are inline with specific brand and UX guidelines. That’s all great, but the biggest benefit in our mind is code optimization through testing and iteration. Once something is built once, it gets tested. The more it gets tested, the more you fix. If that fix becomes part of a reusable component, your app just matured. The more mature your components, the more mature your software becomes. That means, all those accessibility nightmares, IE fixes, and mobile responsive bugs can finally become a thing of the past, permanently.</p>



<h2 class="wp-block-heading"><strong>Improve Your Digital Product</strong></h2>



<p>With these best practices, your software will be in a good position to achieve long-term, sustainable success. Unsure of where to begin? At Crafted, we work hard to make all of our digital products optimized. For this reason, our clients get what they need, and with great functionality. <a href="https://craftedup.com/contact/">Contact us today</a> and let us help you enhance your product through methods of&nbsp; optimization and more.&nbsp;</p>


Contents

Is your business
ready for structured content?

Is Your App Optimized?

Contents

Is your business ready for structured content?

Is Your App Optimized?

Is your business
ready for structured content?