Responsive Web Design Performance tweaks for e-commerce and applications

Posted by & filed under Apache, Blog, How-to, Responsive, Web Development.

Responsive web design has come a long way in just a few short years since being introduced. It has allowed development shops like ours the ability to help out clients reach their end user regardless of what screen size the device they are using is. Responsive design takes an interesting approach to the problem mobile has caused for many sites in the past. Up until recently it was considered that having a desktop site codebase and a separate mobile site codebase was the way to handle this situation. While it still is the best approach for a few scenarios, the majority of of use cases can benefit from responsive design. However the biggest problem with responsive design is when it is created by the wrong hands. Many web developers have moved into the responsive space after being used to the fixed width sites of the past. However responsive design requires an entirely different mindset when prototyping sites and creating an amazing experience. While many have figured out how to make responsive work while changing the width of their browser window, fewer have understood the impact or performance on a real mobile device. While today’s smartphones are amazing, they still are slower in terms of hardware performance as well as mobile network performance. Things are getting better with each new phone released but we should always consider that performance plays a huge role in our end user’s experience. According to Internet Retailer, a 1-second delay in web site page load time translates into a 7% loss in conversions, according to research firm Aberdeen Group Inc. So if an e-commerce store owner makes $100,000 a day from its mobile site, a 1-second page delay could mean around $2.5 million in lost sales every year. Here are some of the tips and tricks we’ve learned over the last few years to ensure we have a great performing website regardless of which device or the speed of the user’s connection.

Mobile First

Mobile first has drawn a ton of attention over the last few years. It is the best method to take when designing responsive applications because it allows you to focus on the smallest screen and work your way up. Typically working the other way around yields “mobile” experiences that feel clunky and are hard to navigate as well as sometimes impossible to use on a mobile device. Using Foundation we’ll typically create our sites 100% in code first to get an idea of the prototype.

Media & Content Conditional Loading

We use Foundation’s interchange component to help us deal with the appropriate content for a variety of screen sizes. The number one error we see in other responsive sites is that many don’t take into account that users on mobile connections can’t support the same huge media that desktop users have taken for granted. Interchange allows us to easily handle that for a variety of screen sizes from smartphones on up. With just a small change to your HTML markup, you can conditionally load not only images of different sizes but any HTML content including something like Google Maps.

Reduce Bloat

While this may a bit more generic of a tweak, it is something I always like to keep in the back of my mind. A great user experience starts with giving the user exactly what they came for. While this may be obvious, I can’t tell you how many times I use sites that have all types of animated effects, color, and media yet have no clearly defined (of functioning) mobile navigation or it is hard to find given all the other features they’ve spent their time on. From when I start with a prototype up until final testing and even launch, this is a moto I like to kepe in the back of my mind. I’m not trying to avoid using new features and/or well placed animations, but just head over to themeforest and try some of those themes on a mobile phone and I think you’ll understand why reducing bloat is so important. Our goal is to try and keep sites under 500kb regardless of screen size and even smaller for devices that are likely to be using mobile broadband. I personally try to reduce size wherever possible.

Reduce Unnecessary DOM JavaScript – KISS

This is probably the worst type of bloat. While JavaScript is the programming language of the web and most all modern HTML pages are using it, overuse can negatively affect a user’s opinion of your site. I like to use the KISS ( Keep It Simple Stupid ) approach and minimize DOM access. DOM is one of the most complex APIs that slows down the code execution process. We’ve all experienced websites that overly manipulate the DOM. They are jumpy, slow, and feel buggy. Try to reduce it unless it provides a direct and measurable improvement to UX.

Use Grunt

We’ve recently converted all of our boring, annoying redundant tasks over to Grunt tasks. What and why use grunt? Automation. Every project we start begins with setting up a Gruntfile and specifically the compressed obfuscated JS and SASS / CSS components but we’ve found we can automate almost any redundant task at all. We’re even using grunt to run shell commands to do a variety of tasks for us every day. For those of you who have not heard of grunt, stop now and go check it out. Also check out the livereload feature of grunt-contrib-sass. With livereload you can connect multiple devices to your same development site and easily watch every device with each page refresh, scroll and update.

Minimizing HTTP Requests

Whether responsive or not, I think this is one of the most overlooked tweaks that has significantly reduced our total load times. By using Grunt coupled with grunt-contrib-concat you can move all your JavaScript into one file and all your CSS into one file. That single file will take longer to download but as a whole will reduce the overall load time of your page. Combining scripts into as few files as possible cuts down on RTTs and delays in downloading other resources. The same practice can be used for CSS as well as the use of CSS sprites. The overall fewer number of total requests, the better. Start using Google Chrome’s Developer tools and Network tab to begin diagnosing and cutting back. There are always exceptions so having only 1 JS or 1 CSS file may not be feasible but it is a great goal.


By using gzip or deflate you can reduce the number of bytes sent of the network. While the specifics to enabling compression on your site and server are undoubtedly different for each case, compression in general is one of the easiest ways to boost performance.

Use a CDN version of jQuery and other libraries

Definitely make use of Google’s hosted libraries for jQuery and other popular platforms. While this MAY goes against the above rule for minimizing HTTP requests, typically it will only help. When you use the Google hosted version of jQuery you are not only helping users on your site but other webmasters and users. Let’s say it is the first time a user visits your site in a newly installed browser or they just cleared their cache and cookies. If you have the hosted version setup, this means that yes, they will have to download the jQuery version from the Google Hosted library. But from then on, it’ll be cached for not only your site, but any other website using that same version. Chances are (for jQuery at least) a user already has a cache version when they come to your site.

I hope these tips, tweaks and best practices help some of you. Use the tools available to you and make sure you aren’t overlook the performance of your site.   Test your site at today.



Responsive Web Design: The Sharpest Tool in the Box

Posted by & filed under Blog, Responsive, Web, Web Development.

The Internet increasingly keeps people company in their purses and pockets, so it’s imperative that every website perform well on a phone or tablet. In the early days of smartphones, the only way web designers could customize their websites to work on small screens was to design a separate mobile site from the ground up. These mobile-specific sites had their own URLs and played by entirely separate rules. It wasn’t always easy to carry branding and SEO through two different web addresses, but users were generally pleased to have manageable internet access on their phones.

Increasing sophistication brought responsive web design

As technology across devices started to integrate, responsive web design came into being. This represented a leap forward, since responsive design meant that every website only had to be built once, and the magic of coding could take the place of labor-intensive site duplication. Fluid methods of rendering grids and dynamic style sheets have made it possible to develop basic designs that adjust themselves to the visual environment of every type of device. Mashable called 2013 “The Year of Responsive Web Design,” and Forbes chimed in with a compelling article entitled “Why You Need to Prioritize Responsive Design Right Now.”

New devices raise questions about dedicated mobile sites

No technology fades out overnight, so you can still find advocates of dedicated mobile sites. They sometimes point out that building a whole second website for smartphones is a way for businesses to respond to the separate needs of their mobile users. It’s becoming increasingly obvious, however, that Internet access portals exist across an entire spectrum of sizes. If you have separate websites for smartphone users and desktops, then where do the growing number of tablet users belong? Some tablets have screens as large as small notebook computers, with such good resolution that many people use these devices as their primary online access point. The old-fashioned division between “computers” and “phones” is clearly losing applicability — and that’s not even mentioning the fact that your refrigerator can go online and tell you that you’re running out of milk!

SEO superiority of responsive design

Whenever we talk about SEO, our first stop is obviously going to be Google. What does Google say about mobile sites? Google’s recommended configuration  for mobile sites is responsive design, with the same HTML and URL used for every type of device while the styling is governed by a different CSS. There are technical reasons for this recommendation, but one big non-technical reason is that SEO is all about connecting with your social network. If you’re out with your phone and you come across a special online tidbit you want to share, you need to be able to send one reliable link. Otherwise, your friend who’s online from her desktop will just open your link and get the same minimal website version that you’re looking at on your phone. As locations and social media and online communication continue to weave a personal technological web, your business needs to have one single address. Unified URLs make Google happy, and if Google is happy, we’re all happy.

As we look to the future, it’s thrilling to envision the kinds of connectivity we’ll be seeing. New forms of wearable technology and multiplying numbers of smart devices — “the Internet of things” — all point us in the direction of having one single URL that communicates across every digital portal. While we can’t predict the exact course that technological innovation will take, it’s clear that responsive web design is a solid building block for the interconnected future that lies ahead.

responsive e-commerce web design

Three Design Rules for Creating High-Performing Mobile User Experiences

Posted by & filed under Blog, Responsive, Web Development.

Some time ago, companies could get away with showing little personalization and concern for the customer as an individual –but not anymore. Nowadays, brands are required to show integrity, build trust and sustain positive relationships. In keeping with this, the mobile experience is expected to be both of high quality and intuitive.

Performance is a key aspect of user experience. Thus, the onus is on the designer to keep things streamlined and highly functional while striving for excellence in customer experience.

The following are three performance-related design considerations to help designers get the best results from their design decisions

Mobile Performance

Mobile platforms are no longer an option for brands that wish to represent themselves adequately online; they are now a prerequisite. Statistics indicate that a large number of consumers are now spending the bulk of their online time on mobile devices. The natural expectation is that the websites they visit and the businesses they buy from will take the time to develop mobile apps and responsive web platforms.

Designers should know that no matter how pretty a mobile site or app is, if it keeps crashing or loading slowly, they’ll rack up poor reviews and low ratings, ultimately resulting in lost users and poor adoption.

Brand Representation

Every point of contact a consumer has with a brand creates an impression, and as such your brand perception is tied very tightly to the user experience you’re providing on your mobile platforms. The most effective way to stand out in the myriad apps and mobile platforms on the market today is to define your brand in some unique and distinct way, making your brand stand out in the consumer’s mind.

Though designing and building a truly unique feature is a required step, the most important part of the process is effectively integrating it with your existing technology and branding and making certain that the process flows smoothly.

Do this and your mobile design will gain all the loyal users it can handle; fail to differentiate yourself through your design and you’ll find your business lost in a sea of ventures just like yours.

User Needs

One of the most vital elements of web design is focusing every aspect of your platform on meeting your users’ needs and addressing them in the best possible way.

By creating a design priority matrix that focuses on both current and future users, as well as the level of competition, you should be able to easily define the most important needs of your users.

While many designers and developers today fail to realize the importance of the connection between design and a satisfying user experience, it’s a miscalculation that few businesses can afford.


PHP MVC Best Practices: Zend 2

Posted by & filed under Blog, PHP, Web Development.

Zend Framework 2 is used for developing Web applications (especially enterprise application development) using PHP 5.3+. It uses complete object-oriented code and uses most of the newly developed features of PHP 5.3, including namespaces, lambda functions and closures, and late static binding. This framework is the latest stable version of the original Zend Framework, which can be called one of the strongest PHP MVC frameworks available. While the names are similar, this second version of the framework is inherently different than its predecessor since Zend 2 has been completely rewritten.

The structure of the framework is one of a kind since each component is made with little reliance on other components. This structure and object-oriented design allow developers to use whatever components they’d like to, something that’s known as a “use at will” design. This can let developers create complex Web applications easily. It’s been well received by the developer community with well-known companies having embraced the framework for their important applications.

Some Zend 2 Features

Zend 2 can be used in a variety of ways including with Amazon Web Services (AWS). Developers are able to get information from directly through the AWS API. Developers can store product information like images, pricing, and descriptions, and they can also retrieve reviews, offers, and ListMania lists. Zend 2 applications can also be set up with LAMP (Linux, Apache, MySQL, and PHP) and can also support load balancing if necessary. The framework can also work with elastic applications like Amazon’s Elastic Beanstalk.

Using Zend 2

Zend Framework 2 was released in August of 2010, with the first fully stable version coming out a month later. Based on the nature of the framework, there is a rather substantial learning curve, which may prove to be a problem for PHP MVC beginners. This mainly has to do with Zend’s rules, naming conventions, and guidelines. If these issues can be resolved, developers will see how much easier applications are to understand within the framework.

If unsure about Zend 2 and whether or not it’ll be good for a given project, developers can test the framework through the Zend Developer Cloud. Developers can set up a sample app using Zend 2 and start fiddling with it through this system. This can be done through

To sum It up, while there are a number of PHP MVC platforms for developers to work with, Zend framework 2 has a lot to offer in the way of features and general development. The best practices regarding PHP MVC platforms are dependent on an individual developer’s skill set and the individual project’s specifications. But in terms of Zend 2, it seems to be the best fit for important enterprise software.


The Future of Responsive Web Design

Posted by & filed under Blog, Services, Web Development.

Responsive web design has been on the move since 2012 and all trends point towards the website tool being a permanent fixture in web design. As more devices hit the market with Internet capability, the more responsive web design will need to be across multiple channels.

So what are the current trends in responsive design and where will it be headed? Only time will tell, but here are some foreseeable responsive web design trends for the future:

More Availability

With a few years of advancement, responsive web design has made itself more readily available to the general consumer. Not only are leading responsive design agencies attracting big-name clients, but self-publishing sites like WordPress also are adopting responsive design into their own design templates.

This makes it easy for bloggers and companies who use WordPress for their sites to easily integrate responsive design and shows that just about everyone is thinking about ux / ui experience. This is a trend that should continue and be more available to a wide variety of users.

Adapts to Future Technology

Having your frontend web development responsive for a variety of mobile screen sizes will be an upward trend in the future of web design. Televisions that run apps and have web-browsing capabilities are already available, and it will only be a matter of time before those technologies are advance to the point of becoming a fluid online user experience.

Apple has been making an impact in the automobile industry, and should have a full website experience built into the system in a few years. Website will need to adapt to these new formats while remaining vivid on a traditional mobile devices. Responsive design is a big part of that future.

Google Likes It

Responsive web design long ago captured the eyes of the giants of Silicon Valley. Now, the leader of search engines even recommends using responsive design on mobile devices for the greatest SEO performance. Not only does it matter for SEO performance, but also Google keeps making advances in location-based services. Agreeing with them can help your business in page ranks and exactly where to locate a brick-and-mortar store.

These are just a few of the advances that occurring in mobile design. Responsive web design not only helps consumers use their current mobile devices now, it also will reshape the user experience of the future. From browsing the web in a car to a television, responsive design helps make that futuristic product a possibility.


Web Application Developer

Posted by & filed under Blog, Employment.

Otreva is looking for a rockstar web engineer who can work front end and back end in an MVC framework. That means you live and breathe database driven websites. We are looking for someone who understands that creating strong platforms that can connect with multiple social networks and is device agnostic is part of the every day life of a developer now.

Position open only to individuals willing to work in Northeast PA ONLY!

Must Haves

  • 1-3 years of experience working in a popular PHP Web Framework (Zend, CakePHP, CodeIgniter, Symfony, etc.) & Object-Oriented PHP
  • HTML5 and CSS3 (SASS Experience a +)
  • Grunt / Node.js Experience
  • Javascript, jQuery, AJAX
  • Basic Linux command line familiarity
  • Git versioning experience
  • Creating and maintaining technical documentation
  • Comfortable integrating any RESTful API
  • Must be able to competently code front-end (HTML, CSS, Javascript) {Will have mock-ups to code from}
  • Must feel comfortable in a team-based, entrepreneurial, and hard-working culture
  • Must have a self-starting personality who is unafraid to display initiative and innovation

Job Responsibilities:

  • Develop and maintain Public APIs and applications for reliability, security, manageability, scalability, and performance; provide technical expertise in the areas of architecture, design, and implementation.
  • Addition of features to existing products.
  • Assist in the testing and debugging of software.
  • Optimize existing code and database queries.
  • Assist in the project planning, code and database design.
  • Keep abreast of emerging technologies and trends

Nice to have:

  • Experience building emails with cross-client fluidity
  • Experience with Ruby on Rails, Python & Java
  • Experience with Amazon Web Services (AWS)

Please include the following:

  • A link to your online portfolio or attach your portfolio after following the link below.
  • Why you are interested in this position and what makes you unique?

Show us what you’ve got!

  • Have a resume or portfolio you want to upload? (docx, doc, pdf, indd, ai, eps, jpg only)


SQL versus NoSQL Databases

Posted by & filed under Blog, Linux, Web Development.

LAMP is a great software stack to get started with in building a reliable and efficient web application, but there are many instances when a program’s complexity requires a different database technology than MySQL—or RDBMS in general, to handle information storage and retrieval. This is increasingly the case as firms find new ways to leverage the Internet and associated technologies in building novel applications that solve industry and domain-specific problems and challenges. For example, mapping and GIS-related applications require complex information storage, processing, and retrieval for geospacial analysis, using data models that are multi-level and more complicated in nature. Additionally, more sophisticated technologies are required to process the massive data explosion that has occurred within the last 5-10 years due to mobile devices, social media, and the exponential growth of the Internet —all of these contributing to the rise of Big Data, or data sets so massive that traditional RDBMS tools have difficulty processing them.

RDBMS technology is over four decades old, with the first commercial RDBMS released by RSI (later to become Oracle Corporation) back in 1979. The original developers of the RDBMS did not anticipate Big Data, and designed it to store all information into a neatly structured, tabular data model that made for streamlined storage and retrieval. This worked for a time, but in this day and age, the nature of data requires the scaling out of data, as opposed to scaling up. For example, instead of increasing the processing power, memory, and storage capacity of one database server, it makes more sense to purchase several inexpensive servers and distribute the load across them as required. This may sound familiar, as this is one of the main tenets of Cloud Computing. NoSQL fits into the cloud schema perfectly, as these two are both contemporary technologies: designed in the same era and solving the same problems with horizontal scaling.

Comparing RDBMSs and NoSQL Databases

It’s worth noting that NoSQL stands for “Not Only SQL,” not “No SQL.” That is to say, SQL—or Structured Query Language, is not entirely absent from NoSQL databases. SQL’s presence varies from vendor to vendor. Indeed, some NoSQL solutions allow the use of SQL-like query languages to manipulate data, with MongoDB as the prime example of this. Rather, the main differences between the two database technologies are related to how NoSQL solves scaling issues inherent with a RDBMS.

We mentioned before that RDBMSs require a fixed, predetermined, tabular data model to perform optimally. NoSQL databases are the opposite of this—they are schema-less, and thus more flexible. Data can be inserted without conforming to a specific structure; the format can thus be changed without modifying or rewriting the application. NoSQL databases store data as key-value pairs, columnar data, or documents—rather than a relational set of tables (and constituent rows/columns).

Different Database Chemistry: ACID vs. BASE

When comparing a RDBMS and a NoSQL database, one may encounter the terms ACID and BASE, and the relative benefits of each. ACID stands for “atomicity, consistency, isolation and durability,” and refers to the standard attributes of a RDBMS, whereas BASE stands for “basic availability, soft-state, eventual consistency.” The attributes detailed in ACID were initially stated as being imperative to optimal database operations, but as systems become larger and more distributed, this is less of a reality—especially with the immense volumes of data and simultaneous transactions that are typical of today’s large systems (think Amazon or Google search). BASE, therefore, describes the attributes of NoSQL databases: data eventually will be in sync, and this is good enough—it may be approximate and not exactly up-to-date, but at least the system is highly-available, performing and responding to requests.

In short, due to their simpler data models and distributed nature, NoSQL databases are generally faster and more scalable than RDBMSs. That being said—NoSQL is still a developing technology, while RDBMSs are mature, stable, and reliable under most circumstances. Realistically, most organizations and firms will not scale out of the realm of a standard RDBMS’ performance threshold. It is therefore not a question of which database technology is superior to the other, but rather, which is appropriate for the scenario at hand. RDBSs such as MySQL, PostgreSQL, Oracle, and SQL Server are still the most widely supported and understood, and will hold up in the vast majority of use cases. NoSQL databases such as MongoDB, CouchDB, BigTable and Apache Cassandra should be used when highly-available, distributed database systems are necessary to handle massive volumes of requests and data processing.


Popular PHP MVC Frameworks

Posted by & filed under Blog, PHP, Web Development.

As PHP has evolved into the lingua franca of web application development, so has its sophistication in terms of development methodologies and platforms. So it’s not surprising that the preferred approach in implementing software with PHP these days is to follow a model-view-controller (MVC) development framework. While this design pattern has been a popular in architecting desktop software for some time now, the relatively recent coupling of PHP with MVC has given rise to a myriad of frameworks that address the varying needs and preferences within the PHP developer community. Though many different implementation of MVC for PHP exist, they all share the core benefits of MVC: the separation of application logic from presentation, making application code cleaner and better structured. Furthermore, MVC makes software maintenance easierespecially in the case of multi-developer environments.

The following are three popular PHP MVC frameworks and their attributes, strengths, and application scenarios.


Known for its speed, small footprint, and mild learning curve, CodeIgniter is a favorite framework of developers just getting up-to-speed with MVC. It is easy to configure and relatively free of strict requirements and dependenciesfor this reason, developers working in shared hosting environments like using CodeIgniter. Its elegance and simplicity, however, is seen by more advanced PHP developers as its limitation: sparse documentation, lack of libraries/modules, and no ORM support make it too simplistic for business or enterprise-level PHP application development. That being said, it is a godsend for developers learning the ropes of MVC frameworks and object-oriented PHP, and allows one to build a fast, well-structured PHP application in a short amount of time.

Despite its popularity, at the time of this writing CodeIgniter is in the midst of a transition. EllisLabs, the creators of the framework, is in the process of transitioning CodeIgniter out of its domain. Until it finds a new home, the future of this popular framework is uncertain.


Yii stands for “Yes it is,” which describes the framework’s flexibility in terms of features and applications in various use cases. Yii is known for its exceptional performance, speed, and securityindeed, many developers have adopted this framework for building complex business applications and high performance/high availability web sites. It has a large developer community and subsequently a large library of 3rd party extensions and plugins for rapid application development. A particular feature of Yii that is held in high-regard by developers is the extensive use of wizards for automating application development and code creation. These wizards automate tasks such as creating interfaces and building data structures through easy-to-use modules that can be run either through the command line or through a web interface.

The tradeoff for these attributes is a steeper learning curve, especially when compared to more rudimentary frameworks such as CodeIgniter. Yii is considered by many to be one of the harder PHP frameworks to learn, despite great documentation and a large developer community. And despite its robustness, Yii has still some ways to go before large businesses and enterprises adopt it as the PHP MVC platform of choice. That being said, Yii is built to work easily with other frameworks such as Zendallowing for cross-platform integration and code use.

Zend 2

Arguably the most robust PHP MVC framework, Zend was largely responsible for pushing PHP into the enterprise realm as a serious technology for business-level application deployment. Zend 2 developers have at their disposal an amazing array of components and libraries for building feature rich, complex web applications. It is well documented and has a large, devoted developer community contributing to the framework’s livelihood and ecosystem. Indeed, many of the Fortune 500 have embraced Zend 2 for building their mission-critical applicationsit’s safe to say that it stand strong long after many of the other PHP MVC frameworks have fallen to the wayside. Zend 2 is stable, widely-used, and worth learning if one’s desire is to build rock-solid enterprise applications.

Zend 2 can be problematic when deployed in hosted environments, as configuration requirements are numerous. Most Zend 2 developers choose to select a web host that supports the platform natively, thereby mitigating this issue. A steep learning curve is also inherent of Zend 2, and PHP MVC novices may find picking up this framework a daunting experience. Of particular difficulty to beginners is acquiring a grasp of Zend’s strict set of rules, guidelines, and naming conventions. This proves to be a huge development benefit down the road, however because of these constraints, maintenance of a PHP application built with Zend 2 is far easier, as applications are easier to understand within a Zend 2 construct.

In short, a wide variety of PHP MVC platforms exist; these three invariable top the list, though the order depends largely on application use-case and developer skill set. As the saying goes, each tool suits a different task uniquely. Building a simple web site or application with Zend 2 would most likely be overkillsimilarly, using CodeIgniter to build mission-critical enterprise software would also be a mistake.

Foundation 5

Mobile Web Design: Why Mobile-First, Responsive Web Design with Foundation is Key

Posted by & filed under Blog, How-to, Responsive, Web Development.

Mobile First is King

Saying you can’t ignore mobile is like saying you can’t ignore your customers. With 53% of all Americans accessing the internet through mobile, and 31% of them as mobile-only, the better phrasing would be, “You still can’t ignore desktops.”

That being said, the best approach to web design today is a responsive site or app that adapts itself to fit the device it’s viewed on, in a mobile-first development approach. Zurb’s Foundation framework, arguably the most advanced front-end responsive framework out there, serves that up in buckets.

1. Responsive is Best

Responsive web development, simply put, means your site re-sizes to fit whatever device it’s viewed on. Desktop, tablet, phone and what’s next? Maybe smartwatch?

This beats developing a separate website for each platform for a shopping bag of reasons, including:

  • SEO. Search engines favor the single-site approach. Serve up a different site depending on the platform, and your search result position suffers. Google even recommends responsive web design, because a single URL and site regardless of device is easier to crawl, index, share, interact with and link.
  • Cost. It’s easier, faster, and therefore, cheaper to build and maintain a single, responsive site than several. Let’s say you want to change a product description. It’s better to do that once, than once for desktop, once for tablet and again for smartphone, isn’t it?
  • Forward Thinking. We can’t know what new screen shapes and sizes will show up next month. Playing whack-a-mole with new designs for every new configuration makes no sense. Better if your site can change itself to fit whatever container it’s poured into. To quote Bruce Lee, “Be like water.”
  • Reach a Wider Audience. Adaptability means you reach more people, and those people have a bigger chance of coming back to you more often.

2. Mobile-First is the Present and Future of Mobile

A recent Forbes article says e-Commerce is growing at a rate of over 16% per year, while mobile grows at over 68%. That makes mobile a fast-growing slice of an ever-larger pie.Why go mobile-first? Let’s look at how responsive web design was traditionally handled. You made your site for PC, then stripped it down for tablet and then stripped down again for mobile. That was known as “graceful degradation,” a fancy term for showing less and less as screen size shrunk.

The problem was, although you’re showing less, you’re delivering the same. In other words, with PC first, your responsive mobile site still had to download every bit and byte of data on the site, and then select the items to leave out.

Why’s that bad? Because mobile is traditionally slower. So you’re asking your slowest, smallest platform to download more than it needs before displaying it. And that loses customers. Because 75% of web users will abandon a site that takes too long to load. Looked at another way, it’s like going to a slower restaurant, then asking them to cook up one of every item on the menu, and then, when they bring it all out, just eating the burger.

Second, mobile-first forces us to focus on our core content and functionality. That means we zero in on presenting the most important aspects of our business first, and let customers drill down to suit their needs from there. Are they reaching us on a PC? Well great. We’ll show them more detail up front. But why lead off by packing your message with an over-busy Christmas tree of potentially confusing data? If someone walks in looking for the most powerful sports car on the market, you don’t start with a 10-minute comparison of all the different cup holders, floor mats and the like. Mobile-first respects and even forces this direct, get-to-the-point approach.

3. Zurb’s Foundation Masters Mobile-First

Mobile-first was historically difficult and packed with headaches, which made it complicated and expensive, time-consuming and slow to implement and update. Until the Foundation framework came along.

Foundation has been called the most advanced responsive front-end framework in the world. It makes mobile-first both fast and easy, which is why millions of developers are using it worldwide. It simplifies the construction of adaptable sites. It offers better performance and customizability for mobile users. And that means cheaper, faster, higher quality mobile-first responsive sites.

Further, Zend Framework 2 (renowned as a modular, secure, extensible and high-performing framework) dovetails with Foundation nicely to add extra value to the picture.

4. The Bottom Line

With a mobile-first, responsive web design, built on Foundation and Zend Framework 2, the website you want can be created faster, less expensively and to a higher quality, ultimately reaching more customers (and potential customers) more often than at any time in the past. That’s why Otreva uses Foundation and Zend to give our customers the powerful, functional site they want, fast, at lowest cost, and in a way that’s both inexpensive and easy to update, which makes keeping current with the swiftly-changing face of tech a breeze.


2014 Trends in Web Application Development

Posted by & filed under Blog, Web Development.

Web application development is ever-changing. As technology evolves, so do the alternatives we have to enhance a user’s experience. There are a number of trends that you’ll see in the coming months. These five are among the most likely to maintain momentum over the coming year.

1.  Different Types and Sizes of Fonts

In the past, developers were limited to web-safe fonts. With web-safe fonts, anyone looking at an application would see the lettering as the developers intended.

With the increasing popularity and ease of embedding fonts into the application itself, developers are now free to use a variety of fonts. Designers can be more creative and a website can communicate with attitude.

Until fairly recently, developers, probably influenced by non-web graphic designers, seemed to think that using a small font made a website more prestigious than in-your-face. What everyone is now realizing is that if a font is so small that it’s difficult to read, people will simply move on rather than straining their eyes. This is especially true of mobile device users.

2.  Flat Web Design

Maybe it’s because we’re all becoming more comfortable with computer usage, but the look of web applications is changing. It used to be that people wanted text with shadows, 3-D effects and elaborate fonts and design elements.

The move to “flat” design is being led by Gmail, Facebook and Windows 8. The look is cleaner, the lines are bolder and the colors richer. The design is intended to help users scan a page and quickly find what they need without the interruption of design elements getting in the way.

3.  Responsive Design

Responsive web design will eventually stop being a trend and become implied in web design. At some point, we’ll stop talking about it as a separate issue.

With increased use of mobile devices of all types, an application needs to restructure itself automatically to conform to the requirements of any device regardless of size. Responsive means the application won’t just appear smaller — it needs to be able to transform itself to actually make mobile use easy.

4.  Blurred Content

Blurred content is becoming more prevalent because the resources used to create that effect are being reduced as the technology evolves.

Today, applications have more and more capability. The difficulty is making sure that the user can move between functions without becoming overwhelmed.

Blurring some layers of an application to focus attention on a related function is proving to be an effective way of providing a wide range of capability while keeping the hierarchy of functions obvious to the user.

5.  Parallax Scrolling

Parallax scrolling can be useful in design at times when you want to tell a story or add depth and movement to images. It brings a definite “wow” factor to an application. And, it helps keep visitors on a web page longer because they’re curious and it’s a novelty.

One of the pitfalls you can encounter if you build a parallax site is that the interface can get too complicated for the user to comprehend. Page load times can be so long that a good number of visitors get frustrated and leave the page before they know what they’re waiting for. It’s also more of a challenge to use when designing for responsive applications.

For an example of an excellent application of parallax scrolling, visit this Google Doodle that was made to celebrate the 112th anniversary of John Steinbeck’s birth. When you click on each image representing one of Steinbeck’s books, you’ll be taken to quotes from the book. But you won’t lose continuity of the overall story because the next book will pop up when the previous book’s story has been told.