Figure 10 – Google's Mobile Friendly Report

We live in both exciting and tumultuous times. There are many new and exciting technologies that have created great opportunities. However, these same technologies create numerous challenges. How can you possibly stay current with all of these changes? How do you train yourself for enduring technologies and not things that are just “fads”? One thing you can do as a professional is not memorize everything, but know where to find help and solutions.

There are hundreds of thousands of online resources that you can access. In this post, we’ve listed a number of resources you may want to consider looking into or to bookmark for future reference. We’ll divide the tools, products and services into the following categories:

  • Management
  • Online Services
  • Frameworks
  • Tools
  • Web References

Management

Effectively managing a project is very important. Poor management can lead to project failure or at worst bankruptcy. This is why Project Management is one of the key topics to master as a professional developer. There are a number of available tools to help you.

1. Flowchart/Diagrams: Gliffy

URL: http://www.gliffy.com
This is a handy online tool for creating flowcharts, diagrams or organization charts. You can setup a free account and save five projects. If you have a paid subscription, you can save many more. It is like having the tool Viso except this tool is free.

2. 50 Different Charts including Mind Maps: Creately

URL: http://creately.com/
This is another site that provides you with the ability to create a wide variety of flowcharts, diagrams and mind maps. They promote over 50 different types of diagrams. Making a professional diagram or chart results in professional looking reports.

Figure 1 – Variety of Charts

Figure 1 – Variety of Charts

3. Free Charts: Lucid Chart

URL: https://www.lucidchart.com/
This is a final chart program to review. Similar to Gliffy and Creately, Lucid Chart allows you to quickly create a wide variety of charts. What is unique about Lucid Chart is that you can export your projects to other applications such as Viso and other Google Apps. In other words, this is a “flowchart maker that plays nice with others”.

4. Gantt Chart: Tom’s Planner

URL: http://www.tomsplanner.com/
One of the most effective tools for managing projects, including software development, is a Gantt chart. If you use a tool like Microsoft Project Management, you can develop a variety of charts and reports including the Gantt chart. However, it costs over $1,000. If you’re comfortable with Gantt charts, it would be worthwhile investigating Tom’s Planner.

Figure 2 – Tom's Planner used to Create Gantt Charts

Figure 2 – Tom’s Planner used to Create Gantt Charts

Online Services

5. Prototyping/Collaborating: Canvas Flip

URL: http://www.canvasflip.com/
This tool allows you to quickly create a prototype of your mobile app. You can then send a link to users to test out your app from a design and navigation perspective. An excellent feature of this service is the analytical tool after the users have tested the app. It shows a video on how the app was used and provides a “heat” map on where users touched and swiped.

6. Prototyping/Collaborating: InVision

URL: https://www.invisionapp.com/
This is a powerful online tool that allows you to quickly upload your static images to simulate your app. Once the images are uploaded, you can add animations, transitions and gestures that can be shared. This will allow you to get a sense of what your app will look like. You can share this app with others and collect feedback on your app before starting the production.

7. Creating a Wireframe for Prototyping: Pidoco

URL: https://pidoco.com
This online tool helps you to create a wireframe of your app by sketching the layout of the app on the screen. You can insert the interactive objects that you’d like to have in your app. Once that is done, it can be sent out for previews. Another excellent feature of Pidoco is the use of templates. You can save your layout as a custom template which allows you to reuse your design.

Figure 3 - Pidoco's Wireframe Interface

Figure 3 – Pidoco’s Wireframe Interface

8. Using PowerPoint for Mockups: Power Mockup

URL: https://www.powermockup.com
Power Mockup believes that creating mockups should be quick and easy. That’s exactly what they do. You can download a plugin that works with PowerPoint. Using Microsoft’s PowerPoint, you can access a diverse set of Power Mockup shapes that you drag and drop inside of a PowerPoint slide.

9. User Experience: Loop 11

URL: http://www.loop11.com/
If your project requires quantifiable data on the user experience, then Loop 11 is a great tool to use. The site allows you to use live HTML files and survey users on your site. The wizard makes its setup fairly easy. You can setup a free trial for a project and go from there. If you “pay as you go”, you’ll be paying $350 per project. Considering the data you get from the project, that’s a very reasonable price.

10. Collaborative Design: Patternry

URL: http://patternry.com/
When working on larger projects, there may be more than one person working on the design aspect of a mobile website. Using an online service will allow multiple people to collaborate on the design and to share assets. You can also comment on parts of the project. The end result is that, as a team, you can quickly develop a new web interface that is clean and consistent throughout the project.

Figure 4 – Patterny's Service

Figure 4 – Patterny’s Service

Frameworks

It’s very common to find “plugins” that are better known as frameworks for many of the common languages. These frameworks allow you to create complex interactions much faster and easier as compared to coding it yourself by hand. This section will focus on a few common frameworks – specific to building web applications.

11. Adding OS Interface: JQuery

URL: https://jquery.com/
JQuery allows you to easily assemble dialog boxes, accordion layouts, image banner sliders and a diverse set of other functionalities. It is also very well supported and help can be found from all over the world. It is OS and browser independent. This framework is well-established and is a very solid platform to work with. It’s also included inside of Adobe Dreamweaver’s interface making building sites which makes accessing JQuery even quicker.

12. Making Websites Look/Perform like Mobile App: JQueryMobile

URL: https://jquerymobile.com/
Do you need to make your website look like a mobile application? JQuery Mobile is a great framework that you can use. On the JQueryMobile website, there is excellent documentation and samples that allow you to create stunning websites that look like mobile apps. It also comes with a feature that allows you to customize the framework you download to include only the components that you use. This will create a customized framework that is optimized for your specific needs.

Figure 5 – Jquery Mobile's Site

Figure 5 – Jquery Mobile’s Site

13. Responsive Websites: Bootstrap

URL: http://getbootstrap.com/
One of the most popular frameworks for developing responsive websites is Bootstrap. It’s a light work framework that can make building a site that collapses from desktop to a mobile phone go very smoothly. It is a free framework that also comes with great documentation. Several tutorials are also available.

Tools

In order to create any application, you need to have some tools. The tools listed below are suggestions for developing native and web applications. Some are free, while others have a cost. Each tool has its pros and cons.

14. Creating Native iOS Applications: Xcode

URL: https://developer.apple.com/resources/
Apple highly recommends using the free application called Xcode to create native iOS (IPA) applications. All of the components from other iOS applications are built in and the interface is very easy to learn. Apps for iOS are written in either Objective C or the newer Swift language. There will not be any new performance enhancements or updates to Objective C, so it’s highly recommended that you develop using the Swift language. The biggest downside to Xcode is that it only runs on Macs.

15. Creating Native Android Applications: Android Studio

URL: https://developer.android.com/studio/index.html
Google offers a free Android application editor called Android Studio. It is a mature product that will render a native APK (Android Package) file. It has built in components and offers many of the same services as Xcode does for the iOS devices. Android Studio is free and can be downloaded for either Mac or PC.

16. Creating Native Android/iOS: PhoneGap

URL: http://phonegap.com/
There are several available services that will convert HTML to native APK (Android) or IPA (iOS) applications. However, PhoneGap seems to be one of the best-known and most used services. Adobe recently purchased the right to use Phonegap and the packaging services are now used in both Dreamweaver and Captivate to make native applications. You can use Phonegap without any Adobe products, since it is free to use. One drawback to apps made with HTML files is that they do tend to run a little clunky compared to apps created with Android Studio or Xcode.

Figure 6 – Phonegap Site

Figure 6 – Phonegap Site

17. Web Animation Native App Development: Adobe Animate

URL: http://www.adobe.com/ca/products/animate.html
Probably one of the most misunderstood tools that has had considerable negative and incorrect press is Adobe’s Animate CC, formally known as Flash. It is a very powerful tool that can generate HTML5 animations as well as 4K video. It also has the ability to render native APK (Android), IPA (iOS), Mac programs (APP) and Windows Executable (EXE) files from the same project. When developed properly, the performance of these apps is consistent with apps created with Xcode or Android Studio.

18. Web Editor: Adobe Dreamweaver

URL: http://www.adobe.com/ca/products/dreamweaver.html
Dreamweaver is a professional web development tool that has been around for a very long time. You can quickly switch between design, code, split and live views. It also has a number of frameworks integrated into the application like JQuery, JQuery Mobile and Bootstrap. The built-in FTP is also very useful since it allows you to pull or post files while editing them within Dreamweaver. The more recent versions of Dreamweaver have the Emmet framework that can auto complete coding for you. Dreamweaver will allow you to preview your site on multiple devices while working in Dreamweaver. You can also package your HTML site into a native application using the built in Phonegap.

19. Free Web Editor: Brackets

URL: http://brackets.io
The Brackets editor is a free code editor that allows you to preview the web page in a browser. You can make changes to the web page in Brackets and see it automatically update in the browser.

Figure 7 – Brackets Editor

Figure 7 – Brackets Editor

20. Graphic Editor: Gimp

URL: http://www.gimp.org/
For over 20 years, the Gimp photo editor has been available for use by developers and designers. The nice part of this feature rich app is that it’s free to download and use. It allows you to quickly make your JPG or PNG images for your apps.

21. Selection of Free Media/Development Tools: Serif Software

URL: http://www.freeserifsoftware.com/
If you are new to development or need to save money, take a look at the Serif Software website. It offers a number of tools that you can download. Figure 8 shows a listing of some of the available tools.

Figure 8 – Serif Software

Figure 8 – Serif Software

22: Media – Audio: Audacity

URL: http://www.audacityteam.org/
One of the audio editing applications that has been around for a long time is Audacity. This is a very mature and stable product. It works very well for the recording and editing of audio files. It also allows you to convert audio to a number of popular formats. This free audio editor works on Windows, Macs and Linux.

23: Media – RIP CDs: Freerip

URL: http://www.freerip.com/
If your audio sources are on CD, this free software tool will allow you to quickly rip CDs into WAV or MP3 files. This lightweight editor will also let you quickly convert the audio to different audio formats for your project needs.

24: Media – Capture YouTube Audio: Convert to MP3

URL: http://convert2mp3.net/en/index.php
If there is a YouTube video with a great song or speech that you want to get a copy of, you should check out the Convert to MP3 web services. Plugin the YouTube URL and you’ll be able to quickly grab and download the audio file.

25: Convert LESS to CSS: LESS to CSS

URL: http://less2css.org/
A technology that’s starting to make significant inroads in web development is the use of SASS or LESS style sheets. These formats allow you to create simple calculations and write functions within the file. Normally you have a compiler running on your workstation to generate the appropriate CSS. However, if you’re just learning LESS (or SASS), you can use the LESS 2 CSS site to convert LESS code to efficient CSS code. As a professional, this is an area that is worth learning.

Figure 9 – LESS 2 CSS

Figure 9 – LESS 2 CSS

26: Fonts: Google

URL: https://www.google.com/fonts
There are less than a dozen safe fonts which are available on all operating systems and mobile devices. If you want to make your web app look more exciting, you either create images with fancy fonts or include an online web font service such as Google fonts. This will allow the web site that you’ve created to display fonts that can brand your site.

Web References

27: Validator from W3 ORG

URL: https://validator.w3.org/
How clean is your website? How well-designed is the site that your competition created? If you run the site through the W3 validator, it will identify both large and small issues with a site.

28: Mobile Friendly: Google

URL: https://www.google.ca/webmasters/tools/mobile-friendly/
If your website or web application is not mobile friendly, it will be pushed down in Google’s search engine results. Therefore, every site that is made needs to be mobile friendly. In order to determine if your site is mobile friendly, you can use Google’s mobile friendly service to see if your site passes. Figure 10 shows a site that didn’t pass.

Figure 10 – Google's Mobile Friendly Report

Figure 10 – Google’s Mobile Friendly Report

29: HTML Reference: W3 Schools

URL: http://www.w3schools.com/
One of the best sites that has a list of new and deprecated web tags is W3 Schools. They also cover topics like CSS, JavaScript, server-side languages and provide tutorials on many frameworks. Each tag covered also has examples to see the tag in action. This is a great site to visit if you find yourself boxed in a corner.

30: What HTML5 Tags to Use: HTML5 Please

URL: http://html5please.com/
Support for the newest HTML5 tags and CSS rules vary between browsers. Not all tags and rules are fully supported. Some tags also render a little differently from browser to browser. Use HTML5 Please to determine which tags are good, which ones you should be cautious about and which ones to avoid all together.

31: Test Your Brower: HTML 5 Test

URL: http://html5test.com/
If you want to see how compatible a browser is with HTML, run it through the HTML5Test site. It provides the details on where the browser falls down. Figure 11 shows the score of the Google Chrome version 50.

Figure 11 – HTML5 Test Score

Figure 11 – HTML5 Test Score

32: Creating HTML5 Templates Quickly: Initializr

URL: http://www.initializr.com/
It can be intimidating when you are starting to create mobile friendly websites and you are looking at a blank screen. Use the Initalizr wizard to help create a basic template that you can start building your site with. Once this is created, download a ZIP file with all of the assets and code in place to get started.

33: Learning HTML5: HTML5 Rocks

URL: http://www.html5rocks.com/en/tutorials/
If you are new to HTML5 or you want to refresh your web skills, take a look at the tutorials found at the HTML5 Rocks website. They have free, well-written tutorials for all skill levels.

Conclusion

This blog post is fairly long – but contains very useful information. This list could easily be extended to include the top 100 products and services. While not everything here will apply to everyone, there are some great tools and services that many of you will find helpful. We hope that you enjoy reading about the buffet of mobile development products and services.

Leave a Reply

Your email address will not be published. Required fields are marked *