What I enjoy about programming responsive / fluid designs.

First and most important to me is the possibility of making the website designs work for most computer resolutions, most tablets and most mobile devices. Let me elaborate, a few years back before HTML5 made fluid/responsive design a possibility, getting a website’s design working for different resolutions was close to impossible. To start we had to choose a dimension that worked for the most popular resolution. Then we would have to try tweaking it so that it worked with one or two of the most popular resolutions smaller and larger than the default resolution chosen. This always seemed to be a futile effort. At the same time the website could appear way too big on some screens, while on others it was barely readable. The ability to program Fluid/Responsive design has made the life of website design so much easier and feasible. The website can now look great and be very readable on most devices and many different resolutions.


Related to what I mentioned in the previous paragraph, because of the possibility to make designs work for all resolutions and devices, it also looks a lot cleaner when you are browsing the different pages with the different devices. It is both satisfying and a joy to see your website work with all these devices without having to create separate pages for each device, which is how it had to be programmed in the past. As a programmer, not only can you keep the designs clean and precise as they were meant to be, your HTML and CSS is organized and the code stays clean and neat, as well.

 

Recently I discovered the bootstrap framework, there are others out there, but this is the most popular one for developing responsive designs. I am still learning a lot about it, but I can say so far that it makes responsive a lot easier to work with. It includes many CSS classes that can be used functioning as fluid/responsive. One of the biggest responsive aspects of bootstrap is the responsive grids, (rows / cols), the columns are divided in up to 12 cells in a row, and what is cool about it, is that you can specify how many columns you need for the different sizes. For example, you might want large screens to have 4 items in a row, in medium size screen to have 3, in small to have 2 and in extra-small to have 1 per row. Bootstrap makes this a snap to accomplish without having to specify different media queries in your stylesheet. Of course, in some cases you will still need to specify your own media queries depending on what you are trying to accomplish. There are other CSS classes and even JS calls included with Bootstrap that are really interesting and are all customized to work responsively. Some examples of these are navigation, carousels, modals, buttons, tables and so many more.

 

Lately, I have also started using Sass (Syntactically Awesome Stylesheets) more often. As its name suggests I have found it to be awesome in its capability to structure all your CSS classes and tags so it is nicely grouped with its proper parent/child structures. Another fun thing about Sass is that you can create mixins to help call some CSS lines that require different browser syntax, like border-radius, box shadows, gradients.... It is very useful, as well, for specifying global values, like colors or specific widths that are used throughout the site. Updating becomes a breeze, just update it in this one file instead of everywhere.

 

If, like myself, you enjoy front-end programming and have spent time frustrated by trying to make designs appear the way they should on different devices and different browsers, jump in and start using HTML5 and the many tools available for programming Fluid/Responsive designs. I have mentioned only a few of the tools that I have started using to enhance my programming experience and I am looking forward to learning more and sharing with my peers.

Building your first app.

Recently we successfully launched a native iOS app for one of our clients.
Our customer was very satisfied with the performance, user experience and the overall navigation. Getting it to this stage was not an overnight job. 

As is well known, building a well functioning app is something that many times fails the first time, after spending abundantly more time and money than initially expected and agreed upon.

It is important to be aware of the steps involved in making an app come to life, working as expected when launched. Ignoring these steps may sound like a great shortcut but most frequently results in launching an app with missing features, broken functionality and a negative user experience. Though these defects can be corrected in the next phase, this could easily double the budget in both time and expense.


  • Setting goals and knowing your target group
    This step is all about deciding on the app's purpose and who will be using it. 

  • Functionality brainstorm
    Now that you know what your goals are and who you are targeting, it is time to decide what functionality you will include in the app.
    Plan the development in two phases. The initial phase contains the features needed for the MVP (minimum viable product), while the second phase focuses on "bonus" features, elements that will make the app better, more functional etc... but are not really needed for the core flow of the application.

  • Validation
    In order to make sure that your initial planning is correct, you need to validate your current information This means finding out if your target group indeed has need for your goals and if the functionality provided will take care of their need / wants.

  • Cost estimations
    Now knowing what we want to build, before starting we need to make sure that it can be accomplished in a way that fits the budget. Sometimes the budgets are minimal, in which case you are better off having an app that accomplishes the main goal with less features and gives the user an awesome experience. In other cases budgets allow for adding extra features which delivers a more well rounded app. In either case, count on a small buffer for extra cost. There are always items that weren't planned on in the previous steps that will have to be dealt with. The purpose of the these steps is to minimize the risk and allowing yourself a comfortable buffer.

  • Set milestones
    Ready to start building the app? Not yet, first we need to decide what the milestones are. When will each piece be delivered.
    Do you want your app to be built properly? If so, you need to be part of the build process by validating functionality as it is being built. Yes, this requires some imagination because as the first pieces of functionality are presented it often looks nothing like your final app. But worry not, your project manager will explain exactly what functionality is being delivered at each stage, as well as, when to expect the next stage. 

  • Build an initial prototype
    Now we get to start the build. But before we build the actual app, we first build a rough outline of it. Why? Because this way the actual app flow can be validated.

  • Verify your flow
    Now that all your steps are in place it is time to go through all previous steps and verify that everything makes sense, your features fit in the flow and your core goals are met in the prototype.

  • Build the first MVP
    We are now ready to build the actual app. Sounds like a lot of prep work to get started, but in actuality following these steps will make the whole process smoother while exponentially increasing  the likelihood of you reaching your goal.

At Perry Systems, Inc we pride ourselves in not only being able to develop well built websites and applications but also in guiding our clients through the process ensuring they get the right product for their needs.