Blog

Code That’s Trending: What You Should Be Learning In 2017

Only a little over two decades ago, the biggest technological innovation was IBM’s one-gigabyte hard drive (retailing at a mere $3,000) and the introduction of Windows 95.

To say that tech has changed in the last 20 years is an understatement.

But what will technology look like 20 years from now? Will the war between iOS and Android be redundant? Will fully functioning robots finally be a thing?

It’s hard to say for sure, but the reality for those who work in technology – in this case, programming and coding – things will most certainly change. In fact, things have already started to shift in 2017.

For coders looking to take advantage of some of the new tech, languages, frameworks, and programming strategies out there, here are a few key places to start.

FREE Download: 12 Resources for Learning New Code Trends

Preprocessors

CSS preprocessors – like LESS and SASS – have been around for awhile now, but devs have finally been catching on to their real potential in the last few years, and their popularity will most likely continue to grow over the coming year.

In the past, full language stacks were all the rage, and coders would spend hours building everything from scratch. But then someone figured out that you could build on the work of others by using CSS to extend basic functionality, and preprocessors were born.

Preprocessors can take a chosen language and use it as the foundation for larger projects. Some of the other advantages include:

  1. Modularization for your styles
  2. Reduced redundancy with variables and mixins
  3. Code reuse across multiple projects
  4. Nested, Smart styles

Of course, if you’ve never worked with preprocessors before, know that there is a bit of a learning curve. Because they have their own syntax, you’ll most likely need to choose a single preprocessor to learn first and then move on to the others from there. If you have a good foundation in JavaScript and CSS, you’ll have a solid head start.

JavaScript MV* frameworks

JavaScript frameworks are another underutilized area of development that may see more playing time in the coming year.

Consider these frameworks – called MV* frameworks (model-view-wildcard) as a sort of “next step” to working with vanilla JavaScript files (plain .js libraries sans jQuery).

Popular frameworks include Kendo, Sencha, jQuery Mobile, AngularJS, Ember, Backbone, and Meteor JS, though there are more. Part of their job is to handle some of the more complicated processes of HTML5 Web Apps and to help developers work across different platforms, like desktop to mobile.

Since Web Apps using HTML5 and cross-platform development are both on the rise in the tech world, it makes sense for developers to point their ears in that direction as well.

Single-Page Web Apps

As long as you’re learning how to work with JavaScript frameworks, you may as well learn more about the intricacies of Single-Page Web Apps (SPAs) too.

While SPAs still lag behind traditional web pages in terms of popularity, their use has been growing over the past several years.

An SLA is essentially a single, responsive landing page that works just like an app. The front end of the page pulls from a much larger database filled with content without the developer needing to add markups to every piece of data, so the page stays regularly updated with minimal effort.

They’re also much faster than traditional pages, as the HTML, CSS, and scripts only load once throughout the lifespan of the application. Only data is transmitted back and forth, so bandwidth is reduced and page speed is increased.

Considering how much time and energy is spent by developers creating, updating, and maintaining web pages, you can probably see why SLAs are catching on.

SVG + JavaScript on Canvas

Many tech prophets have been proclaiming the Death of Flash for a while now, so it’s no surprise that it’s on the outs. But Flash has been an integral part of web development for a long time now, and many devs love the look and function of it.

The answer is HTML5 Canvas, which uses SVG (Scalable Vector Graphics) and JavaScript as building blocks to create a better animation.

Developers can essentially “draw” elements using JavaScript code instead of going through the rigorous process of creating animations using Flash.

This process is significantly better for mobile animations, as many devices require scalable graphics to function properly on small screens (and SVG is known for scalability).

With mobile animation on the up-and-up, developers will need to find better ways to create animation that works on a variety of different devices both large and small. So far, SVG and JavaScript on canvas is the best solution.

Machine Learning

When we say “machine learning” we don’t necessarily mean robots taking over the world like The Matrix. Machine learning in web development refers to Artificial Intelligence (AI) algorithms that give programs the ability to learn without being programmed.

Machine learning is incorporated in flashy, headline-grabbing technology like Google’s self-driving car, but it can also handle tasks like tracking activity in one application and relaying that to a different one (say, what you watched on Netflix to what you buy on Amazon).

As of right now, machine learning is still relatively in its infancy. Tools using machine learning run the gamut from performing simple computing tasks all the way up to problem solving tech like Amazon’s Echo or even Apple’s Siri.

As the demand for this sort of “smart technology” continues to grow, so will the demand for developers who understand how to use it properly.

Basically, if you want to make sure your job is relevant in the next 20 years, familiarize yourself with machine learning and you’ll most likely never be out of a job.

Learn The Trends Listed Here By Using These 12 Resources

Final Thoughts

Of course, not all the trends listed here are for the faint of heart, and a modicum of knowledge in any will require some effort and dedication to learning. But that doesn’t mean that these trends are outside the reach of the beginner coder.

The key to successfully following the latest tech trends is to start with the basics: learn JavaScript, learn HTML, learn how to build a website.

Once you’ve mastered the “vanilla” levels of coding, you can move on to something with a little more flavor. And who knows, maybe someday you’ll be the one inventing the latest and greatest technology trend on the market.

 

Should Developers Learn to Design? How to Code for Looks

The relationship between designers and developers often gets a bad rap, but the two roles frequently run parallel.

Designers are often encouraged to learn code to better understand what happens behind the scenes, and some developers actually start as designers and work their way into becoming a hybrid of both roles.

But what about developers who have no love for art? Should they learn to design too?

There are certainly enough jobs available for a pure developer who wants to stick with coding, but there’s a good case to be made for developers – even those that lack an artistic flare – to learn how to design, too.

Check Out These Tips for How to Design Even If You’re Not “Artsy”

desk-office-pen-ruler

Learning Empathy

Developers should learn how to design for the same reason designers are encouraged to learn code – empathy.

According to Stephen Caver from Happy Cog:

“The primary reason any developer should learn design is to gain empathy for the designers with whom they work. Nothing is more toxic to a project than developers and designers seeing each other as rivals.”

Developers and designers often approach projects from completely different perspectives, and both are necessary for a great user experience.

But for a developer who doesn’t understand the creative process, it can be difficult to problem solve for designers who want to implement creative strategies. You might think, “Why are we doing this?” instead of, “How can we do this?”

Learning to think like a designer will help you overcome obstacles and create solutions faster. In fact, according to ex-designer Mark Kawano, tech giant Apple encourages developers to “think like a designer.”

“I think the biggest misconception is this belief that the reason Apple products turn out to be designed better, and have a better user experience, or are sexier, or whatever … is that they have the best design team in the world, or the best process in the world,” he says.

Thinking like a designer can also help developers communicate more efficiently and collaborate on projects with less interference.

14804632142_38c5c63424_b

How to Think Like a Designer

UX/UI designer Drew Lepp argues that there are actually two definitions of a designer:

  • Someone who designs
  • Someone who is creative with a purpose

Even if a developer doesn’t fall into the first category, they should strive to fall into the latter. According to Drew, there are six ways to be creative with a purpose:

  1. Strive to do better
  2. Be relentlessly optimistic
  3. Dream big
  4. Have empathy
  5. Be comfortable with the uncomfortable
  6. Bring clarity to complex ideas

Thinking like a designer is essentially about looking at a project with broader scope so that you’re not just following directions, you’re innovating. It’s about understanding the needs, desires, problems and aspirations of a business so that you can experiment with forward-thinking solutions.

But thinking like a designer is also about understanding how aesthetics play a role in the final product.

It’s about focusing on things like the look and feel of a website, how color psychology affects the end user, how to unclutter a website for easier navigation, and how to organize elements to net the highest conversions.

Learning the principles of design can help developers become better coders, and coding for visual appeal and user experience will improve your chances of building a high converting site or application the first time around.

You may also have the opportunity to help clients who don’t know what they want. You will be able to clarify confusing elements of a project to them as well as understand their wants and needs better than code along can communicate.

Basically, thinking like a designer will help you become more well-rounded in your profession, helping you work better in teams and one-on-one with clients.

web-design-1419696_1280

Where to Learn Design

So how does a developer learn to code for looks?

One of the quickest ways to learn something is to ask someone who has done it. This means picking the brains of other designers or hybrids and taking note of what matters.

Another way to is to find a course or program that specifically teaches design. David Kadavy at Design for Hackers has a program geared toward developers, and places like Lynda.com specialize in design programs. Or you can find design tutorials on EnvatoTuts+.

But what sort of things should you focus on?

Even if you don’t want to learn how to design a whole website from scratch, you should understand design principles from areas including:

  • Font – how to choose the right fonts for headers, subheaders, body copy, and accents
  • Sizing – how to size elements like fonts and images to stand out on a page
  • Color – how color psychology affects conversions and how to choose an appropriate color palette
  • White space – how to space distances between elements and how to get rid of unnecessary clutter
  • User experience – where to place design elements like pop-ups and navigation to improve UX
  • Copy – how to use copy to inform and move users through the site effectively

Having a general understanding of these principles will help you communicate with designers (and clients) who make design requests to you that seem unreasonable or confusing.

Again, you will understand the “why” behind the choices so you know how to respond if something simply won’t work from a development perspective, too.

Every “non-artsy” developer should know these design tips

Final Thoughts

Just because you learn the principles of design doesn’t mean you have to become a designer. In fact, there are some out there who believe that it’s better not to hire or work with a designer/developer hybrid (though others will argue the opposite).

But you don’t have to work as a designer to think like one. Understanding the basic principles of design, how to communicate like a designer, and how to implement creative solutions to improve user experience is a boon for any developer.

You don’t have to be artsy to think like a designer either. Creativity comes in all shapes and sizes, and more often than not, clients will be looking for developers who understand creative concepts and solve their problem in an equally creative fashion.

3 Things You Can Do With CSS That Will Blow Your Mind

CSS is one of the first languages many coders learn, and it’s an integral part of building any website. But it can do a lot more than handle simple style elements.

While traditionalists may relegate it to the basics – fonts, styling, colors, etc. – it can actually handle a variety of design complexities, like animation.

In fact, many modern developers are taking CSS to new heights with a variety of cool and surprising projects. Some of them may be advanced for beginner designers, but each project proves that there are limitless possibilities for working with CSS.

Here are a few inspirational ways you can use CSS for your next project.

Don’t miss: 9 Practical Things You Can Do with CSS

Animations

The use of animation in web design has certainly gained momentum over the last decade or so. The methods and techniques for adding motion to an interface have become more advanced as well.

Old school designers and developers may have once relied on JavaScript to create eye-catching animations and videos, but CSS has taken on some of the heavy lifting in recent years, as shown by some of the world’s best developers.

Julian Garnier created a 3D model of the planets in orbit, for example.

Julian Garnier

Source: Codepen

Roman Cortes has been known to make complex animations purely out of CSS. His spinning effect on the image of a can of Coke shows what’s possible with a few simple styling sheets. When you scroll back and forth on his image, it looks as though the can is spinning.

coke_bottle_css

Source: Roman Cortes

But animated elements don’t always have to be so obvious. In fact, many of the most popular animations using CSS for the web today are subtle, like an animated menu button effect.

Developer Marius Balaj created a simple button animation that materializes when you scroll down.

mariusbalaj

Source: Codepen

And Sascha Michael Trinkaus created a hover animation for a check mark button that changes the surrounding gradient color.

animated_checkmark_button

Source: Codepen

CSS can also be used with motion curves for even more realistic animations. (Smashing Magazine has an explanation and a few examples of that here), but whether it stands alone or is used in combination with JavaScript, CSS can do a lot for the world of animation.

Text Effects

CSS can also be used to create stunning visual effects for text. In some cases, additional languages like SVG or JavaScript may be used to enhance the effect, but some incredible effects can be added solely with CSS.

Developer Hugo Darby-Brown recreated the Shop Talk logo from scratch using only CSS.

shoptalk

Source: Codepen

Patrick Brosset animated this logo (“Cosmos”) using simple CSS.

cosmo

Source: Codepen

Developer Yoksel takes this idea a step further by turning his text into a simple animation. This text effect is made with a combination of CSS and SVG.

elasticstroke

Source: Codepen

And Yoann Helin created a simple ticker effect that alternates text between three different words.

helloworld

Source: Codepen

While CSS is most often used to add color to fonts and background elements, it can also be used to create images, text, and animated text effects. When used in combination with JavaScript and SVG, there’s very little you can’t do with it.

Fluid Menus

CSS is often used for creating animated menus, and that’s nothing new. But the level of creativity isn’t limited to your average horizontal menu with a few drop downs or a hamburger menu. You can create dynamic and engaging menus that are mobile responsive with CSS.

This menu, for instance, uses transparent icons and an animated slider to create a unique transition effect between items on the navigation bar.

cssdeck

Source: CSSDeck

One developer named Travis created a single-page navigation menu for Mic.com (though they currently use the hamburger menu for their main site).

micnav

Source: Codepen

If you’re in love with the idea of using a hamburger menu, you could take a page out of developer Sergio’s book and create a morphing circular menu along with your hamburger menu.

hamburger

Source: Codepen

But you can also skip the hamburger in favor of a slider. Humaan’s site, for example, has an animated scrolling menu that slides right and stays fixed until reaching the very top of the page.

humaan

Source: Humaan

Navigation is often one of the trickier areas of web design and development, but with CSS, you can rethink traditional design elements to create something more attention grabbing or out-of-the-box for clients that want something a little extra.

Here are 9 very practical CSS tricks you might not know about

Final Thoughts

There are plenty of other mind-bending things that you can do with CSS (like this Submarine with CSS by Alberto Jerez), as well as a slew of really practical stuff (like image filters and forms).

Overall, CSS is an excellent option for creating subtle text and logo animations as well as more robust animated images. It’s also very efficient and relatively easy to learn compared to other languages like SVG.

It’s especially great for transitions that require animation, like fluid menus, clickable icons, or buttons. It’s also an excellent way to create 3D animations, as most browsers have an easier time reading 3D animations made with CSS.

Because you can see exactly what you’re getting throughout the design process, you may have an easier time animating these effects with CSS rather than JavaScript (and the end results are equally stunning).

It opens a multitude of new doors for web designers and developers alike, making it possible to create animations and interactivity entirely with a relatively simple language.

Of course, you can combine JavaScript with CSS for advanced animations and really wow your clients, too.

How to Increase Your Daily Productivity and Code Faster

Developers always want to know one thing: How can I get this done faster?

Coding can be fairly time consuming depending on the project you’re working on, and it can eat away at your day if your workload is heavy, your deadlines are tight, or your processes are slow.

But just because devs want to get things done quickly doesn’t mean they want to do a rush job. Rushing through projects can lead to buggy or hard-to-maintain software that needs to be updated down the line (at a greater time expenditure).

Thankfully, you don’t have to sacrifice quality to get the job done faster. Here are a few tips for speeding up your performance without dumbing down your work.

Get this FREE Productivity Checklist for Developers

characteristics-of-the-best-web-development-company

Gain More Experience

It may seem counterproductive to spend more time working on projects if you’re looking to save time, but the reality is that the more experience you have, the faster you’ll be able to churn out code that doesn’t require extensive debugging later on.

In the early stages of your dev career, you can gain experience and improve your speed and productivity simply by working on your current projects.

You can also:

  • Work on side projects
  • Work on open source projects
  • Work with other, more experienced developers
  • Test out productivity tools and techniques
  • Do programming exercises

You can (and should) monitor your improvement based on both objective metrics like defect rate and velocity, and subjective metrics like code quality and fitness.

If you’re worried about quality, don’t assume that slower work will give you better quality code. The more you practice, the more refined your system becomes and the more productive and effective you’ll be.

Jeff Atwood over at Coding Horror learned a valuable lesson on this from the book Art and Fear by David Bayles.

The book tells the story of a ceramics teacher who asks half of his class to create a large quantity of pots, and then pitted them against the other half of the class who were instructed to produce a single, “perfect” pot.

The teacher found that the students that created a large quantity of pots were producing better quality pots than the students who only had to do one high quality pot.

The takeaway according to Atwood: “When you repeatedly learn from your mistakes, (when you have more experience with a system or method), you will produce better work.”

Automate Testing

Aside from sheer experience, you can also greatly improve your speed and productivity by either catching errors as you go through or automating the testing process.

If you can catch an error while you’re typing it, you will save ten times the effort than having to go back and redo it. But catching every single error with the human eye isn’t always possible, and that’s where automation comes in.

loading-speed-2-01

The purpose of automation is to provide fast feedback, both of successes and failures. The longer you go without feedback, the more time you will have to spend fixing mistakes later on.

This is also important if you have to spend time fixing someone else’s code, or they have to spend time fixing your code. The person who made the mistake understands the error best, so the sooner feedback can come through, the easier the fix will be.

So, how should you go about creating automation?

Ultimately, the best person to build a test stack is you. While this is another example of “taking more time now to make time later,” developing your own automation stack is important to improve productivity.

But think of it like this: If you were using someone else’s automation stack, you would have to learn the tools and tricks to use it, which would take more time.

You already know most of the processes you need to automate, so spend a little time on the front end of the process to build automation and you’ll save heaps of time later on when it comes time to actually produce.

The same principles apply to things like reusable libraries and templates. If you can find something (or build something) that works for you, you will improve productivity automatically.

You will also get some much needed coding experience, too.

Reassess Expectations

Another area that might be slowing down your process – and one which is often overlooked by developers – is actually something that has nothing to do with you: it could be your managers or team.

If you work for an agency or in the corporate world, the slowness of your project may not be your fault, at least not entirely.

The management team plays an important role in setting expectations, helping developers manage workloads (sometimes devs don’t know how to say no), and measuring productivity.

It could be that you are producing code at a reasonable rate, but it’s only considered slow because you’re not meeting an arbitrary deadline.

support

Productivity like this can be difficult for management to measure objectively. They don’t always understand how much work goes into the coding process, so they assume you should be working faster.

A few questions you can ask to assess the situation to see if it’s you (or if it’s them) include:

  • Am I truly inexperienced or do I feel competent in my tasks?
  • How much time am I spending doing things that weren’t requested or required?
  • Do I understand when a fix is finished?
  • Is my code noticeably lower quality than other developers around me?
  • Does management have an objective measure for productivity? If so, what metrics are they going by?
  • Can they give me specific examples of slow coding or idleness or is it just a general perception?
  • Have they taken into account time spent fixing other’s mistakes?

It may be that the problem is on you, and that you’re simply lacking experience or are being slowed down by your own processes. BUT, it could be that there are other factors at play that are slowing you down without you realizing it.

If so, take some time to talk with management or team members about your concerns and ask for feedback on how you can improve your processes to speed things up.

Here is the Productivity Checklist every developer should have

Final Thoughts

At the end of the day, a coding-heavy project will probably take you quite a bit of time and there’s not much you can do about that. It’s better to take the time you need to work through the process fully, catching bugs as you go, in order to produce something of quality the first time around.

But if you are under a tight deadline or you’re feeling pressure to speed up your work, remember that practice makes perfect and that automation is your best friend.

You should also take some time to make sure that the setbacks aren’t coming from things outside of your control, like management or team members that are costing you time fixing their errors. Take some time to gauge your situation to determine if it’s really you, or if it’s them.

Why You Should Be Charging More for Your Dev Skills

Are you selling yourself short when it comes to your rates?

Many new developers – or, let’s be honest, long-time developers – have trouble setting rates for themselves that can actually meet their needs. And if you’re reading this, you’re most likely one of them.

Most developers (and designers, and freelancers in general) tend to bill conservatively at first. Often they feel like they lack experience or skills to charge more, or they’re just not sure what the “going rate” is for their job description.

But playing it safe can keep you from having the career of your dreams.

That’s why it’s important to start charging more for your services, and here are 3 of the biggest reasons why…

Download this chart: What You Should Be Charging Based On Where You Live

featured10

Reason 1: You Have In-Demand Skills

One of the biggest reasons freelancers in general tend to undersell is self-doubt. They’re just not sure they have a skill that someone is willing to pay for. But that’s simply not true of developers.

The growth rate of the industry is astronomical. According to the U.S. Bureau of Labor Statistics, employment for developers is projected to increase 20% within the next 10 years, nearly doubling the growth of all other occupations.

This is also why you should be charging more for your services. Over time, demand for web and mobile developers will continue to rise, and the more experience you gain, the more your skills will be worth to the public. But even at the get-go, your skills are still valuable.

So how should this affect your pricing strategy?

Conventional wisdom would tell you to start low and then raise your rates, but the demand of your job means that you can actually start higher and work with more lucrative clients from the start.

Freelancer Jake Jorgovan writes, “When I started pricing myself hourly I started with an hourly rate of $30hr. Over time, I kept raising my rate from $30 to $50, $60 and higher. Yet somewhere around that $60 per hour range I noticed a major shift in my mindset. At $60 per hour, I was beginning to start working with higher quality clients who had decent budgets.”

After a while, Jorgovan was able to switch to more lucrative project-based pricing, which freed him from the “hourly rate debate” all together.

But the lesson here is that people will hire you because they absolutely can’t do what you do. No matter how you set your prices, remember that you have something valuable to offer, even if you’re brand new to the gig.

If you want high paying clients, then set your prices accordingly.

Reason 2: Market Value is Negotiable

If you’re not sure what a “high paying client” will actually pay, consider the fact that people will pay almost anything for something they consider valuable.

Think about it: What is the value of a cup of coffee?

If you go to a gas station, it’s probably 99 cents. But if you pour that same coffee into a Starbucks cup, you can charge $3. That’s the market value of a brand.

process02

Your market value is the same. You’re not underselling because you’re a new developer or because you don’t have skills or qualifications, you’re underselling because you’re not marketing yourself as someone with in-demand skills.

Part of marketing yourself well is setting prices that reflect the value your skills bring to your clients. Some of that will be determined by general market value, but that doesn’t mean you always have to charge what everyone else is charging; market value is just a starting point.

Your best bet for setting rates is to start by assessing the average value a developer has in the marketplace today. Consider things like:

  • Average salary for someone with your job description
  • Average skillset for someone in your position
  • Average demand for someone in your position (hiring rates, etc.)

Try to gain as clear a picture as possible about what the market looks like, and then compare where you stand.

Do you have more skills than necessary? Less skills overall, but more experience in certain skills? Do you specialize? Do you have a niche client focus? Are you faster than most?

Make a list of the things that you do well and that set you apart from the average developer. Those unique qualities become your brand, and you can (and should) set your rates according to what your brand can offer clients.

You don’t have to have all the skills or experience in the world; you just have to have something special to offer.

Reasons 3: Your Cost of Living

Another important and often overlooked factor when it comes to price setting is the cost of doing business and the cost of living. Many developers start by charging what the market says they’re worth, but fail to increase their rates enough to make a livable income.

When you’re thinking about setting your prices, ask yourself: How much money do I need to make to live the life I want?

how-much-to-charge-for-an-app

If you want a luxurious, jet-set lifestyle but only charge $25 an hour for your services, you might wind up disappointed. If you want to simply pay your bills and live comfortably, but you live in a city or state with a higher cost of living, you might need to charge more simply to stay afloat.

Even if the “market rate” says you should charge $50 an hour, that doesn’t mean you can actually live off of $50 an hour. You should also keep in mind that charging by the hour limits you to a certain amount of hours per year that you can actually work.

You may consider either raising your hourly rate or, like Jorgovan, abandoning it in favor of project-based rates.

As we said before, the market value is the starting point – a minimum price. Once you have your basic rate, increase the price based on the unique value your skills bring to your clients (your brand), as well as any additional costs of doing business (new equipment, training, conferences, subscriptions, etc.) and the cost of living (rent, food, travel, etc.).

Your pricing should be able to meet your needs. And if you’re worried about whether or not your clients will pay your new rates, consider going after different clients. Anyone who understands your true value will be willing to pay whatever you charge.

Here’s What You Should Be Charging Based On Where You Live

Final Thoughts

At the end of the day, there’s no set formula for how to set your pricing. But this can actually work in your favor. Instead of setting rates based on what every other developer does, you can set rates based on the value your skills actually provide to your clients.

Remember that even at the most basic level, being a developer means that you’re in-demand, so don’t be shy about charging more for your services. Keep in mind that market value is just a starting point, and if you want to go after higher paying clients, then brand yourself for higher paying clients.

And don’t forget to calculate costs based on how much you want to work and how much it will cost you to do business (and live). After all, you didn’t become a web developer to starve, so don’t set prices that will leave you out in the cold.

Should You Launch Your Own Mobile App? Here’s What to Know

If you stick around the web development business long enough, there will probably come a day when someone asks you to build a mobile app for their company or project.

Or maybe you’ve been toying with the idea of launching the next best moneymaking mobile app all on your own.

Either way, there’s a significant difference between developing a website and launching a mobile app.

The good news is that as a web developer, most of your skills will be somewhat transferable. For example, if you already know Java, you won’t have far to go to build an Android app. But there’s still a significant learning curve involved.

Here’s what you need to know if you’re looking to make the leap from web to mobile.

Download these 7 Tips for Transitioning to Mobile App Development

mobile-app-development-myths

The Difference Between Web and Mobile Apps

One of the biggest and most noticeable differences between web and mobile app development is the level of flexibility.

Web development gives you a variety of programming languages, devices, and tools to work with, while mobile apps are more limited.

Generally speaking, mobile apps are designed for individual devices and platforms. The languages you need to know for an iPhone 7 (Swift or Object-C) will be different than the ones you need for a Samsung Galaxy S7 (Java).

You also have to think about user experience in a different way. Mobile apps are more object-oriented while websites tend to be more action-oriented.

Mobile apps also need a level of functionality that will keep users engaged for longer periods. The average user will spend around 15-30 seconds browsing a website compared to the 2+ hours they will spend using mobile apps daily.

A few other factors that set mobile app development apart include:

  • Rankings/Ratings – Mobile apps are primarily ranked by their cumulative ratings instead of their searchability
  • Crashes – Mobile app crashes are more critical than a 404 error as oftentimes the required solution is to upgrade the whole app
  • Integration with other apps – Mobile apps will also need to include features of other apps, like how Uber uses GPS to locate riders or Evernote uses the camera feature to import notes
  • App size – Mobile apps have a larger focus on size of the application, memory footprint, and load/startup times compared to traditional websites
  • Browser compatibility – Mobile apps require more development time and testing due to device compatibility and OS versions
  • Multiple versions – Mobile apps generally run multiple versions depending on when the user downloads the app, compared to a website that typically runs one “live” version

While these things may feel overwhelming for a web developer, there are plenty of good reasons why you may want to switch to mobile app development.

Why You Should Learn Mobile Apps

Mobile development can be intimidating, but you may still want to invest the time in it. Here’s why…

1. More earning potential

Mobile app developers typically make more money than web developers, partially due to demand. Web developers tend to lose business to DIY solutions like Wix and Squarespace, but so far there’s no widely-accepted DIY solution for building a great mobile app.

This means that mobile developers can also charge more for their services without being questioned. Payscale.com lists the average salary for a mobile application developer as $71,072 per year versus $53,036 for a web developer.

And if you launch your own app or co-develop one, you can make residual profits from things like in-app purchases – money which is hard for web developers to replicate.

2. Transferable skills

As we mentioned earlier, many of your web development skills will transfer over to the mobile world, making it easier to get started. This is especially good news for newer developers who are learning HTML5, as its predicted to overtake native apps in the future.

3. More flexibility and creative power

Non-game app downloads will exceed $182 billion in 2020, accounting for a quarter of all app store downloads. The best part for developers is that there are a variety of ways that people can use mobile apps to improve their lives, meaning the sky’s the limit in terms of innovation. Chances are if you have a creative idea for an app, you can probably find a market for it, which puts more control into your hands.

If these reasons entice you, then you should consider switching to mobile app development.

How to Transition Into Mobile App Development

The easiest way to get started is to choose a mobile platform based on a programming language with which you’re already familiar. If you’re already keen on Java, consider starting with Android apps, for example.

Currently, there are three roads you can take depending on your language of choice:

  • Native iOS development with Objective-C or Swift
  • Native Android development with Java
  • Cross-platform HTML5 mobile development with PhoneGap

spin_mobileappnumbers_071014-011

Once you’ve chosen a platform, you will also want to consider the type of app you want to make. Ask:

  • Will it be a non-game or gaming app?
  • How many potential app users are there?
  • What app will have the greatest reach?
  • What app will generate the most revenue?

After you’ve settled on a specific app type, you will want to consider strategy before you start building. Research some of the apps already on the market that may be competing with yours to see whether or not you have a unique enough offering.

You should also consider whether your app should be free or paid (the most successful apps tend to be free with in-app purchases).

After that, it comes down to the technical details of programming and designing the right user interface. If you need help at this stage, check out CodeConquest’s list of resources for learning how to build mobile apps.

Here are 7 more tips for becoming a bankable mobile app developer

Final Thoughts

Mobile is the wave of the future, and there are a lot of great reasons to make the leap to mobile development. For one, it’s incredibly profitable.

Whether or not you decide to develop mobile apps for others or you launch your own, mobile apps are in much higher demand than traditional websites. Even if you want to stick with web development, consider adding mobile to your toolbelt for added marketability.

If you’re curious about getting started with mobile app development, start brainstorming some app ideas and doing some research into which apps are the most marketable. Then it’s as simple as choosing a mobile platform and brushing up on the right language.

Why Having a Poor Work-Life Balance May Ruin Your Career

Web development is one of the most employable careers today.

The U.S. Department of Labor predicts job growth rates around 27% in the next decade, which is much higher than average.

The good news is that whether you’re freelancing or working for an agency, you stand a good chance of being employed in a fast-paced and growing field for a long time.

The bad news is that because of its popularity and necessity, web development is an extremely high-demand field. Late hours, overtime, and project extensions are the norm.

What this means is that if you’re not taking the time to take care of yourself, it’s very, very easy to burn out, lose passion, and quit all together.

This self-assessment will help determine your level of burnout

Why Burnout Happens to Developers

Burnout is one of the most common mental health conditions that can lead to impaired work efficiency, and younger workers with fewer experiences are noted to be at higher risk for burnout.

mtb_stressstatistics_large

Unfortunately, web developers tend to fall to the bottom of the workflow barrel – you’re the last people to get information for a project after it’s gone through numerous cycle of approval from management, copy editors, and a PR team.

You’re also the last stop in the process before it’s time to launch, which means you have the most work to do in the shortest amount of time.

To add insult to injury, since no one else knows how to make updates and changes to the website, tedious maintenance tasks fall to you, too.

But those aren’t the only reasons burnout happens.

Physical Burnout

First, there are the physical demands. You may not think that sitting at your computer all day counts as a high-stress job, but it does.

Developers and programmers tend to stay glued to their screens for longer periods of time, often slouching to compensate for the height difference between your natural eye line and the monitor. This poor posture can lead to joint pain as well as back and neck injuries.

Sitting for prolonged periods can also increase blood pressure and lead to various heart conditions. Basically, it’s not just the tasks you do that can stress you out, it’s the way you do them that can amplify the problem.

Mental Burnout

Second, development is one of those career fields that require an abnormal amount of cognitive and intensive thinking. You’re constantly doing deductions and calculations in your head that can quickly tire you out.

The signs of mental burnout can include things like:

  • Chronic fatigue
  • Insomnia
  • Forgetfulness
  • Impaired concentration
  • Problems paying attention
  • Increased illness
  • Loss of appetite
  • Anxiety
  • Depression

Given enough time, those symptoms can wreak havoc on your work life. In a Hacker News article’s comments section, one developer described it like this:

“Burnout is caused when you repeatedly make large amounts of sacrifice and or effort into high-risk problems that fail. It’s the result of a negative prediction error in the nucleus accumbens. You effectively condition your brain to associate work with failure.”

Company Burnout

Finally, burnout can happen because your company doesn’t support your career goals. Or maybe you’re freelancing and your personality just isn’t designed to handle the stress of it.

In an agency or corporate setting, burnout can happen because the workflow itself is dysfunctional or the company is underemployed, leaving you with a heavier workload than you can handle.

You may also feel exploited or that you’re not being properly rewarded for your efforts, or that you have little control in the day-to-day duties and operations of the company. Or perhaps the company’s values aren’t in line with your own personal values.

In a freelance setting, you may find the lack of community frustrating, having no one to turn too when you’re overloaded. You may also struggle with managing your own deadlines in addition to other necessary tasks like marketing.

All of these frustrations, if not properly managed, can lead to burnout.

raf750x1000075tfafafa-ca443f4786-u2

How to Avoid Burnout

Too much stress can often result in the loss of employment, either due to chronic illness, or simply being unable to perform the required task in a timely manner. That’s why it’s essential to create a healthy work-life balance.

Take Time to Assess Your Needs

It’s important to pinpoint the source of your burnout as early as possible and to make adjustments as needed.

Do you need a better workstation to accommodate for sitting all day? Best practices for self care if you’re stuck at a desk include setting your monitor at eye level (even if you’re using a laptop) while your keyboard (remote keyboard for laptops) remains at arms level.

Does overthinking tire you out? Take some time to get up and walk around, watch a funny YouTube video, or find a quick distraction during work hours to help you relax.

You may even need to reassess your diet and sleep needs while you’re not at work. Late nights up watching TV or finishing other projects can make your regular 9-to-5 all the more exhausting.

Take Time to Assess Your Career Goals

It may be that you are burned out because the work you are doing is soul-sucking (and that’s okay). Maybe you’re working in a company that doesn’t value personal space, or they have a dysfunctional workflow, or they don’t give you enough respect.

It’s okay to look for employment elsewhere.

Maybe you like your company but you’ve accidentally bit off more than you can chew. It’s more than okay to admit this. Talk to your boss or co-workers about lightening the load in some way. Chances are if you’re burned out, someone else is too. Don’t be afraid to find support in others.

Or if you simply aren’t sure you’re cut out for development, take time to do some soul-searching and decide what you really value and whether or not your current job is moving you toward your ultimate dream career.

Take a Vacation

Finally, take a vacation. Or two.

U.S. workers in particular are overworked and under-vacationing in record numbers. 42% of workers take no vacation time away from their jobs, and a staggering 61% of those who do vacation still work during their time off.

But genuine, uninterrupted time off can actually reverse the symptoms of burnout, relieve stress and fatigue, and improve cognitive functions.

It’s not that vacations are just a nice bonus, they’re a necessity to your survival as a web developer.

Take our self-assessment quiz: “Am I Suffering from Burnout?”

Final Thoughts

Burnout happens more often than you think, and if you’re someone who recognizes some of the symptoms in your own life, chances are you’re already on the path.

The good news is that you can fight burnout by being vigilant about your needs. Take time to assess what you can and can’t handle, and take note of your work environment – the people, the workload, the morale – to see if there are adjustments you can make.

Be sure to take time off when you can get it (or make time for it) and don’t be afraid to adjust your home life to help improve your ability to handle stress when you’re slogging through the busy season.

How to Develop for Gesture-Driven User Interfaces

Only a few years ago, “responsive” was the buzzword when it came to web development – every site needed to be viewable on multiple screen sizes to make way for an increase in mobile usage.

Today, it’s becoming increasingly difficult to find a site that’s not responsive to some degree, and new developers learn how to create flexible interfaces from the get-go.

So the buzzword of the moment has become “gestures” – developing websites to be used with touchscreen technology. Screens have exploded in the last three years. In 2016, shipment of touchscreen gadgets was around 2.8 billion, up from 1.8 billion in 2013.

But before you think, “Well, I’m not a mobile UI developer, so what does it matter?” consider that touch screen technology isn’t limited to mobile. While more than 64% of Americans use touchscreen mobile devices, nearly 39% of touchscreens users have computer monitors with gesture-driven technology, and 42% use tablets to browse your site.

Even home appliances like refrigerators and washing machines can be equipped with touchscreens.

This means that web development is no longer about making sure all your words and images fit onto varying screen sizes, but rather about whether or not your site can be triggered by the swipe of a finger instead of the click of a mouse.

Modern web developers will need to be able to build gestures into their websites, no matter the device it’s being viewed on.

So how do you build a website with gestures in mind?

Don’t miss these 7 Tips for Developing Gesture-Driven Websites

invision_compr

Use Gestures for Functionality

The main reason that gesture controls work well is that they feel natural and intuitive to users, like interacting with a real life object.

For example, when you pick out a shirt to wear from your closet you don’t select a button to see whether or not the shirt is dirty, you just grab it.

With gesture technology, if you were browsing for a new shirt to buy on a retail website, you wouldn’t have to click a button to get a better look at the shirt’s details; you would “grab” the screen (or pinch, in this case) to get a closer view.

The goal is to design your gestures around natural human interaction – pinches, swipes, taps, and pulls. So anywhere there’s a button on your site or an action that someone would have to “click” on a normal screen, consider it an opportunity to use gestures.

Even including something like Pull-To-Refresh can be an easy way to include gestures in your site without disrupting the design.

Just remember to use visual cues to indicate where there’s additional gesture-driven action on your site, especially for PC users. Without visual cues, users could get confused about how to interact.

Include Proper Sizing of Gesture Targets

Most people will use their fingers or thumbs in place of a mouse, but unfortunately fingers and thumbs aren’t quite as accurate, and can select too much (or too little) depending on the size and spacing of your site.

For mobile users, a thumb can manage to sweep the entire screen of an oversized phone, but only about a third of the screen is in truly “effortless” for them to use. They may need to zoom in to select a smaller button at the top of the screen, for instance.

mobile-app-gesture-touch-gesture-reference-guide

With PCs or tablets there’s some leeway, as screen sizes will also be larger, but there are different spots on a tablet that are still more user-friendly for gestures (like the upper corners instead of the bottom corners).  Not to mention when you’re tapping or swiping in a hurry, you can still run into trouble.

That’s why Apple, Google, and Microsoft all provide guidelines for the proper sizing of tap targets.

Think Action + Animation

When designing for gestures, there are two essential questions you need to ask:

  • What action is triggered when the user performs a gesture?
  • How will I visualize that action as it’s happening?

You will first need to decide which action will be triggered when a user performs a certain action. Will a double tap open or close a page? Will they need two fingers scroll up and down or can they use one finger and a swipe?

lukew-coretouchgestures

Source: Luke W – Touch Gesture Reference Guide

Once you’ve decided what action will be created by what gesture, you’ll need to decide how you want to let users know that the gesture has succeeded. Users won’t be able to fully see, understand and feel what will happen when they touch, hold, drag and swipe items before it happens.

If there’s an immediate response (if you drag to scroll and it scrolls, you know you’re successful), there’s not an issue. But if there’s a delayed response (you tap, but the new image or page hasn’t loaded yet), consider including an additional animation (like a change in color or size) to alert users that their gesture worked.

Use Prototyping Tools to Test and Debug

Of course, gesture-driven interfaces have the same amount of bugs as any interface, so it’s important that you’re testing your site in order to pinpoint where and when users might get stuck before you launch.

Certain prototyping tools, including Pop and Invision, can help you develop wireframes and debug any problem areas as needed.

Framer JS is another prototyping tool that can help you build more interactivity on your site, and also allows you to test on a number of different devices.

Other tools you might want to consider:

Your goal should be to test on as many touchscreen devices as possible to make sure that you’re not running into issues with gestures on any particular device.

Here are 7 more tips for developing websites for touchscreen devices

Final Thoughts

Gestures are the wave of the future for both mobile and PC web development, so it’s important for new developers to keep up-to-date on the latest gesture-driven technology trends.

If you’re designing a site for touchscreen, remember that gestures should be natural and intuitive; it should makes sense for someone to tap a button or swipe a photo. You also want to make sure that your gesture targets are large enough to accommodate the “clumsiness” of thumbs and fingers.

If necessary, include any animations or visual cues to alert users to areas of your site where they can use gestures, and be sure to test out your site on touchscreen devices and using prototyping tools before you launch.

Should You Consider Freelancing? Maybe, If…

For some developers, freelancing is an ideal job. You typically set your own hours and can dictate where you work. But while freelancing can be a great lifestyle fit for many, some may find themselves enjoying agency work instead.

So which type of developer are you?

You may already have a sense of the work environment you want, so the choice may be a no-brainer. Or maybe you’ve been freelancing and contemplating making the switch into an agency role.

Whatever the case may be, here are a few things you should consider before making the jump into freelancing (or remaining a freelancer)…

Take our quiz to see if you’re ready to be a freelancer

Pros and Cons of Freelancing

freelancer-liability-featured

There are many reasons freelancing could make more sense for you than a traditional employer-employee job. A few of the main benefits that freelancing can bring include higher levels of compensation, a better work-life balance, and a higher level of optimism and control over your career.

Pros

  • Greater level of flexibility in schedule and location
  • Better work life balance (set your own schedule)
  • No ceiling on how much money you can make
  • More control over which clients you choose
  • Less risk of being laid off (some call it “recession-proof”)

If those reasons alone make you say, “Sign me up!” you may want to consider being a freelancer. However, freelancing does come with its downsides if you’re not fully prepared.

 

Many freelancers say their biggest concerns are finding clients, going through “feast or famine” months where money is good (or bad) depending on a changing workflow, and struggling with their work-life balance when there’s no one else setting the schedule.

Cons

  • Constantly finding and maintaining your own client list
  • Working alone with very few other support systems
  • High levels of competition from other freelancers
  • Lack of clear direction and path for job growth
  • Financial concerns (“When will I get paid?”)
  • Setting your own boundaries with clients and deadlines

Some developers may find that they want the freedom to do things “their way” but struggle to maintain a healthy schedule when given total freedom. Others may find that the constant pressure of finding work is a deterrent to truly feeling successful as a freelancer.

But should any of the above stop you from becoming (or continuing as) a freelancer? Not necessarily. There are a few skills you may want to consider developing if you’re looking to go down that path.

Necessary Skills for Freelancing

surviving-life-as-a-freelancer

Some may say that being a freelancer means that you don’t have a “real” job, but for those who have been a freelancer for any period of time, you know that’s not the case. In fact, freelancing requires skills more in line with those of an entrepreneur.

Freelance Folder lists 16 essential skills freelancers need to be successful, and some may surprise you:

  • Accounting
  • Communication
  • Estimating
  • Marketing
  • Management skills
  • Negotiating skills
  • Networking skills
  • Problem-solving skills
  • Project management
  • Proofreading
  • Public relations
  • Research
  • Sales
  • Scheduling
  • Stress management

If all of those seem overwhelming, don’t worry. While many of those are helpful for success, there are resources available specifically designed to help freelancers in the areas they may fall short.

So while you don’t need to be an expert at accounting or the best networker in the room, those who make a life-long career from freelancing often find that developing those skills makes them better at their jobs.

But what if you’re reading this and you realize you just don’t want the pressure that comes along with working as a freelancer, but you don’t want to go back to working for a company in-house?

The good news is that you have options, with one being working for a creative or digital marketing agency.

Alternative: Agencies

There are many benefits of working in a team environment like an agency, though there are different skills involved with being successful in an agency setting, too. Depending on the size of the agency itself, you could experience everything from an intimate and collaborative environment to working on some big name brands with a large team.

Benefits of Agencies

  • Variety of clients (both large and small brands depending on the size)
  • Help dealing with clients (some developers won’t deal with clients directly)
  • Working with a team of other experts in their field
  • Steady paycheck (with opportunities for bonuses in some cases)
  • No overhead (for yourself)

If you’re the type of person who feels like they need support but don’t want to be stuck working for one client (like an in-house position), you may love working with a creative or marketing agency. With that being said, it’s still not for everyone.

What It Takes for Agency Work

While most agencies have a more collaborative environment than an in-house position, the skills needed are somewhat similar between the two. You will still typically work a 9-to-5 in a specific location, but you don’t have to manage your own clients and you have support if you need it.

Some other aspects that could benefit you in an agency environment include:

  • Working under pressure
  • Loving fast-paced environments
  • Enjoying being rewarded for your efforts in tangible ways
  • Wanting to work on a variety of projects at once
  • Being able to meet strict deadlines
  • Needing people around you to bounce ideas

While working for an agency isn’t for everyone, if you don’t want the uncertainty that comes with being a freelancer and you like environments that will keep you on your toes, you may thrive in an agency environment.

Which Should You Choose?

freelancer-insurance-guide-featured

Of course, there are a variety of factors that go into making the decision to freelance or not. You will need to consider:

  • Your current economic situation – Can you afford “feast and famine” months? Or do you need a steady paycheck?
  • Your work ethic – Can you put in the hours it takes to find clients and manage their expectations on your own?
  • Your marketability – Can you stand out from the competition and market yourself enough to find work?
  • Your desired lifestyle – Do you want to be able to set your own schedule? Or do you work better in a structured environment?
  • Your level of ownership – Do you want to be in control? Or do you like passing off work to other team members if necessary?

The choice is up to you. To make the best decision, it’s best to decide which areas of your life you can handle more (or you need less) stress.

Freelancers often find that they have much less stress in setting their schedule, choosing their clients, and working from wherever they want. But they also have more stress in maintaining that workflow, keeping up with client demands, and getting paid on a regular basis.

Agency developers may find that they have less stress in managing clients, but may be overwhelmed by the 9-to-5 or by working in teams.

Need help deciding? This quiz will help you make the best choice

Final Thoughts

Freelancing can be a great opportunity if you’re able to keep up with the skills necessary for success.

To get the most out of freelancing, you may want to focus your efforts on developing a wide range of entrepreneurial skills that will help you manage your business and your time more efficiently. Remember that there are always resources out there for freelancers who fall short in different areas.

If you’re just not sure that freelancing will be the best fit for your needs but you’re tired of working in-house, you may consider joining a creative or marketing agency to give yourself a boost – that is, as long as you’re okay in a fast-paced environment.

Ultimately the choice is yours. Just remember that you’re never stuck. You can always try freelancing to see whether or not it’s the best fit for you.