Monday, March 14, 2016

Web Design Weekly #226

Headlines

Maybe we could tone down the JavaScript

Lexy Munroe takes a look into various ways Twitter are using JavaSctipt and suggest they rethink their approach to focus a little more on progressive enhancement. Solid article. (eev.ee)

What’s New in jQuery 3 (developer.telerik.com)

Professional Logo Creation Kit

Whether your own website needs a new logo or your clients are screaming for one, this bundle from Zeppelin Graphics is the perfect solution. (mightydeals.com)

Articles

Design in a Sea of Engineering

Ted Goas shares how he gets by as the sole designer working with nine engineers. For those of you that are in the same boat this is a great article that offers some handy tips and tricks to manage the workload and communication. (tedgoas.com)

Code for edge cases

A nice simple digestible post by Hugo Giraudel that reminds us that we shouldn’t assume anything in the code we write. (dev.edenspiekermann.com)

Building Bixa Color, a color font for the web

Color font formats have been added to OpenType and are slowly getting supported in browsers. This article explains how these fonts are made and looks at how usable they are on the web today. (pixelambacht.nl)

Using D3.js with animations in React

If you ever need to use D3.js with animations in React this post by David Krawaller might point you in the right direction. He recently struggled but explains his solution in this post. (blog.krawaller.se)

Microcopy — Tiny Words with a Huge UX Impact

When we think about designing a great user experience, it’s easy to get caught up with all the things. The fonts, the colors, the flows, the content. Everything. But there’s another component to UX that can instantly delight your users that you might be overlooking. Microcopy. (uxplanet.org)

A CSS Multi-column Layout Tutorial for Beginners

A nice and simple introduction by Baljeet Rathi that looks into CSS multi-column layout. Something that can be super handy for responsive layouts. (sitepoint.com)

Facebook’s Product Director Explains One of its Biggest UX Changes (fastcodesign.com)

Getting More from Google Analytics with Philip Walton (css-tricks.com)

Tools / Resources

CSS only Responsive Tables

David Bushell revisited a four year old idea of making tabular data responsive. As time has passed he has been able to clean the code up to suit the modern landscape. (dbushell.com)

Rebass — 56 Configurable React Stateless UI Components

Rebass is a React UI component library that uses inline styles to avoid CSS dependencies and prevent leaky global styles from affecting an application. (jxnblk.com)

PostCSS.parts

A searchable catalog of PostCSS plugins (postcss.parts)

State of the art web development with React.js (github.com)

Inspiration

The Difference Between Excellent, Good and Bad JavaScript Developers (thefullstack.xyz)

Trellisheets — How we spin up CSS for Trello sites with ease (tech.trello.com)

How to become a great UX designer without a degree (blog.invisionapp.com)

Jobs

Web Engineering Manager at Slack

Slack is looking for an engineering manager to help lead the web application engineering team. This team is responsible for developing new features, building infrastructure and maintaining the site. This person will report to the CTO and will work alongside our engineering management team. (slack.com)

Senior Product Designer at Charbeat

Chartbeat believes in a better web — one where quality content, not linkbait, is king. This is a web that values attention, how and where people are engaging with content, not clicks. If these values align with you please get in touch. (chartbeat.com)

Need to find passionate developers? Why not advertise in the next newsletter

Last but not least…

Performance & Usage at Instagram (engineering.instagram.com)

The post Web Design Weekly #226 appeared first on Web Design Weekly.


by Jake Bresnehan via Web Design Weekly

How to Export and Submit Your Meta App

A few weeks ago, we looked into getting started with augmented reality and Meta and put together a pretty augmented reality butterfly. The Meta 2 was then released for pre-order and we explored what the Meta 2 means for augmented reality developers. There is plenty more to be explored around Meta development that hasn't really been covered much — so let's explore a rather important part of the process — exporting your app!

I recently finalized my very own Meta 1 application and thought it would be useful to cover what is involved in the process, along with tips I undercovered along the way. We'll look at the stages after your initial app has been developed — how to get your app into a final executable file that you can give to other Meta Pioneer friends and how to submit it to Meta's Dev Center for even more Pioneers to see.

Exporting Your App In Unity

Those who have exported an app within Unity before will find this process pretty straightforward. There are only a few minor things to keep in mind that deviate from the typical Unity project export. For those who are completely new to Unity — we'll be covering this process in detail, so you should be able to follow along.

To begin, open your Unity scene in the Unity Editor. If you are following along from the Butterfly tutorial, the scene was in Scenes > ButterflyScene. Make sure it is completely ready to be exported and that you've got everything visible in the scene that you're looking to include in the final product. I've found it a good habit to always play the scene one last time within Unity before going to export.

Once we are definitely happy to export our AR app, we go to File > Build Settings...:

Opening up File and Build Settings

The first thing I'm going to stress here is to check the listed scenes under "Scenes for Build". Make sure your current scene is there. If you have no scenes in that list, click "Add Open Scenes" to add your scene to this list:

Adding current scene

If you have multiple scenes — make sure the scene that is there is the one you expect to be there. This sounds obvious, but it caught me out when I was building my own AR app, MetaKitty, and had two versions of a scene in my project. I was incredibly confused for quite a while when none of my changes to the scene would export. Don't make my silly mistake!

Also within the "Build Settings" window:

  • Choose "PC, Mac & Linux Standalone".
  • Make sure the target platform is set to "Windows".
  • Set the architecture to be "x86".

Choosing your platform and x86 architecture

Now, we need to set a few specific settings for our app. To start with, we click "Player Settings..." underneath the "Platform" options. In the "Inspector" panel on the right hand side of our screen, we'll see a bunch of settings for the exported app. We start by adding our own company name and product name. I've got "SitePoint" and "Pretty Butterfly" for the app from our last article.

Going to Player Settings

If you've got your own icon for your app, you can also update it by clicking the "Default Icon" image underneath your "Product Name". Otherwise, it will have the Meta logo by default.

Underneath that first section, there are several expandable sections of settings. We can click on "Splash Image" to adjust how the app looks when it first loads up. You can change the config dialog banner to your own image. This is the banner that appears in the initial window giving the user options for their screen resolution, graphics quality and monitor. If you'd like to customize it, it should be sized at 432 x 163 pixels. Unity does not scale up the image to fit, it only centers and crops it if needed.

If you have Unity Pro, you will also be able to turn off the "Show Unity Splash Screen" option to take away the Unity logo bit that always appears at the start:

Setting banner and Unity Splash Screen settings

Finally, expand the "Other Settings" section and ensure that under "Optimization", the "Api Compatibility Level" is set to ".NET 2.0". For me, there hasn't been a time when this wasn't already the case, but it's worth checking!

Setting API Compatibility Level to .NET 2.0

Then, if we go back to the "Build Settings" window, we can choose either "Build" or "Build Settings" to build our app. If you'd like it to run straight away once it is built, choose "Build and Run". I generally choose that option:

Clicking Build and Run

Continue reading %How to Export and Submit Your Meta App%


by Patrick Catanzariti via SitePoint

Android From Scratch: An Overview of Android Application Development

Introduction

As of early 2016, there are well over a billion people actively using Android, a Unix-like mobile operating system that runs on phones, tablets, smart TVs, smart watches, and a slew of other devices. Although developed and maintained by Google, it's free and open source software that can be used and customized by anybody. As a result, Android devices are manufactured by several major device manufactures, like Samsung, LG, Sony, and HTC.

One of the primary factors that drives Android's success is Google Play, an Android app distribution platform users can use to download and install apps on their devices. With over a million apps and billions of downloads, Google Play is larger and sees more traffic than similar platforms for iOS and Windows 10.

I'm sure you are now beginning to wonder how you can become an app developer and cash in on the popularity of Android. In this article, I'm going to give you a bird's eye view of what Android application development entails today.

Developing Native Android Apps

There are many different approaches to Android application development. In this series, however, we'll be focussing only on the native approach because native apps offer superior performance, run with minimal overhead, and are capable of making the best use of the Android operating system's capabilities.

Native Android apps are developed using the Java programming language, and, on devices running Android 5.0 or higher, make use of a managed runtime called Android Runtime (ART) by default. To create such apps, most developers choose to use Android Studio, the official Android IDE developed by Google. Android Studio is free and runs on Windows, OS X, and most Linux distributions.

Android Studio 1.5.1, the current stable release, has a large number of features to simplify all aspects of Android app development, such as a powerful code editor, visual layout and theme editors, vector and image asset studios, and more. Android Studio 2.0, which is still only available as a preview release, has more advanced features like instant run and a GPU profiler to further improve the app development experience.

Android Studio also comes with a realistic emulator you can use if you do not own an Android device. Because system images for it are freely available, you can download and run any version of Android on it.

Challenges Android App Developers Face

Developing an Android app that runs well on one specific Android phone or tablet is easy. Developing one that runs well on all Android devices, however, can be incredibly hard because of the vast differences in operating system versions, screen sizes, and device capabilities.

Supporting Older Android Versions

Unlike Apple's iOS devices, most Android devices rarely receive software updates, if at all. Marshmallow, the latest version of Android, runs on less than 1.5% of all Android devices today, even though it was released several months ago.

This means, if you decide to develop an app, you must support older versions of Android, like KitKat and Lollipop. Moreover, if your primary user base is from developing countries, supporting older versions all the way back to Android Gingerbread, is recommended. Doing so, however, is usually easy, thanks to not only the Android Support Library, but also a number of third party open source libraries.

Handling Different Screen Sizes and Densities

In the early days of Android, there were only a small number of devices that could run Android and almost all of them were phones. Over the years, however, with more and more device manufacturers adopting the platform, device screen sizes and pixel densities began to vary wildly.

With the release of Android Honeycomb, Android also started supporting large screen devices, such as tablets and smart TVs. Consequently, developers today are expected to use multiple image sizes and layouts to support all those different screens.

While creating the layouts is still a rather time-consuming process, managing different image sizes has become easier thanks to Vector Asset Studio.

Handling Hardware Sensor Availability

Only a few high-end devices have all the hardware sensors the Android SDK supports. Therefore, developers are expected to write apps that can determine the hardware capabilities of a device at runtime, and degrade gracefully if possible.

The Android SDK (Software Development Kit) has a Sensor Framework to simplify this task. Alternatively, developers can prevent users from installing apps on devices missing the required hardware using Google Play filters.

Recent Trends

The Android platform is constantly evolving and app developers must keep up with recent trends to be able to build apps that live up to user expectations.

Material Design

Material design is a collection of well-thought-out design guidelines you can follow to build apps whose look and feel matches the native look and feel of Android Lollipop and Marshmallow. Owing to its simplicity and modern looks, material design enjoys a lot of popularity among both developers and designers.

Android Wear

Android Wear smartwatches are becoming increasingly popular because the latest models are better looking and have features, such as new and improved gestures and watch faces that make them more fun to use. Consequently, more and more developers are using the Wear API in their apps to make sure that their apps can interact with wearable devices.

Publishing Android Apps

Once you've developed an app, you can publish it online so that people all over the world can download and use it. There are lots of Android app marketplaces you can publish your app on, but the one most popular today is Google Play because it comes pre-installed on most Android devices.

To be able to publish your app on Google Play, you must pay a registration fee of $25 and create a developer account on it. Once you have an account, publishing an app involves uploading its APK—a compressed package file that you generate using Android Studio—along with a few screenshots and providing details, such as the app's name and description.

After submitting all the details, you will have to wait for a few hours for the app to go live. In early 2015, Google Play introduced an app approval process to make sure that published apps adhere to Google's content policies.

Monetizing Android Apps

Android app development is fun and nothing beats the rush you get seeing your app live on Google Play. However, if you've put in a lot of effort building the app, why not monetize it? A lot of people today make a living developing Android apps, and if your apps are good enough, you can too.

There are many ways you can monetize an app. Here are three popular ways, all of which use services provided by Google:

  • Sell It on Google Play: In most countries, developers are allowed to publish premium apps on Google Play. Unlike free apps, a premium app can only be downloaded after the user pays for it. This is the easiest way to monetize an app because you don't have to write any code for it.
  • Display Advertisements: By using Google's Mobile Ads SDK, you can display banner or interstitial ads in your app. With this setup, you are usually paid every time a user sees an ad or clicks one.
  • Sell Items Inside the App: By using the In-app Billing API, you can sell digital items to users who are already using your app. For example, you could make your app free and then charge a small fee to unlock a special feature in it. This type of apps are often called freemium apps.

Conclusion

I hope you now have a general understanding of what Android app development means today. Despite all its challenges, Android app development is quite easy because of the extensive documentation available online and the constantly improving development tools.

In the next post of this series, you are going to take your first step towards becoming an Android app developer by learning how to set up Android Studio on your computer.


by Ashraff Hathibelagal via Envato Tuts+ Code

Animo

Animo is a minimal, clean and modern responsive multi-purpose HTML5 Template for anyone who wants to build an amazing & modern portfolio, landing page, agency, corporate or even an app website. Get it on Themeforest: http://bit.ly/218VxcX


by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

V I N C E N T

“VINCENT” IS A SINGLE-MINDED BRAND FOR MAKING ROMANTIC THINGS.


by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

Altero – Do It Your Way

Altero invited three consumers to show how and where they inspire themselves to make their custom jewelry.


by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery

Giovanni Xu – Portfolio 2016

I am Giovanni Xu, a French interaction designer based in Paris, France. I do UI/UX design with a crush on smooth animation.


by csreladm via CSSREEL | CSS Website Awards | World best websites | website design awards | CSS Gallery