Web Developing & Designing in Changing Times

The pace of adoption of tablets and smartphones may be a little alarming to those working in the field of web development and design. For so long, we’ve focused on the desktop, adjusting to the increasing size of monitors and seeing the browser wars lose some of their old sizzle. Then, just as things seemed to be settling a bit, mobile devices became web-capable and tablets hit the market – and nothing has been the same since. Change is definitely needed to meet these new challenges, but by staying focused on the following six specific areas of design and development, you’ll be able to figure out ways to integrate new approaches with established techniques.

1) Changes in Screen Size / Resolution

resolutionIt wasn’t long ago that the recommended resolution for website development was 1024×768. While widescreen monitors brought a sudden horizontal expansion of screen real estate, the more significant effect was a switch in display ratio from 4:3 (almost a square screen) to 16:9 (wide narrow screen). The concurrent explosion in the smartphone and tablet market really drove this change home.

Retina display was another game-changer. Essentially, retina allows a pixel to be mapped to 4 pixels on a device instead of the usual one pixel to one pixel. This allows higher-definition images to be used and SVG (scalable vector graphics) helps mitigate file size, supplemented by the JavaScript library retina.js with on-the-fly serving of high-res images to double-density screens. However, until everyone has retina capability, and the majority of a site’s visitors are using it, it may cause more problems than solutions.

A user’s choice of browsers isn’t as much of an issue for developers as it used to be. The Big 3 in the Windows environment (Internet Explorer, Firefox, and Chrome) all are similarly reliable, quick, and stable. Individuals choose more based on habit and preference for a particularly add-on or toolbar than functionality these days. The battle has switched from the browser to the screen.

One tool that can help you make sure that your design looks good in any configuration is BrowserStack, which offers a free trial. It will show your page in up to 200 configurations across different browsers and resolutions, including a virtual testing area with every imaginable device. Google Analytics also displays pages under different resolutions to help assess placement of CTAs and other items.

Responsive web design will become hugely important as a way to create frameworks that seamlessly move from widescreen to tablet to smartphone. A good place to start for information on this is Brad Frost’s site, ThisIsResponsive, which has a huge resources section on fluid design and layout; content strategies for responsive design; frameworks, tools and development techniques; and working with navigation, advertising and video.

2. Change in Internet Speed/Page Load

speedAverage connection speed globally is now 2.9 Mbps. Even with the US at 7.4 Mbps, few countries worldwide have numbers below 1Mbps, a sure sign of improved broadband connectivity. Keep in mind, however, that publicized broadband speeds may appear on the high end while the reality of server speed and other factors can certainly play a role in how fast a site can load.

More significantly, users are even less patient than they used to be. They want faster load times, but also want resource-heavy high-definition images and video that instantly stream. Some recent surveys show that nearly half of all web users expect a site to load within three seconds or less. A one-second delay in page response time decreases user satisfaction by 16%. And don’t forget that Google considers page load time as part of its algorithm ranking websites in search results.

One tool that can help you assess page load time is Pingdom, which also provides an analysis of each request, their size and individual time to load. With this, you can identify slow-loading processes to fix, such as optimizing a huge image that takes way too long to load. Google has a similar tool with its PageSpeed Insights.

3. High Speed Coding

zencodingWith time, more and more developers have reached the point where they believe that WYSIWYG editors are more trouble than help. The difficulty is that the alternative – coding by hand – is tedious and time-consuming, not to mention the increased probability of mistakes creeping in.

But coders also know that chunks of code can be reused and repurposed via code libraries. So it wasn’t much of a leap to figure out a way to apply a CSS-like abbreviation/selector syntax to HTML code to speed up the code writing process – Zen Coding. The initial project has been enhanced into a follow-up called Emmet, where developers bypass much of the tedium of hand coding by automatically generating chunks of HTML code via defined abbreviations. Integration of projects like this will be particularly useful in the application of responsive web design, where complex coding of web pages will be necessary to have formats generated seamlessly.

The Zen Coding project is now in the Google code community at http://code.google.com/p/zen-coding/.

4. Typography

typoOne of the first lessons in my web design classes back near the turn of the century was to memorize the short list of “web-safe fonts.” We might look longingly at the hundreds of available fonts, but we did not partake of their forbidden fruit. These days are long-gone (thank goodness) and thanks to new font libraries and the CSS3 @font-face tag, virtually any font type can be used on the web. Check out the previous article on Hotscripts — 6 Ways to Use Any Fonts on Your Site — for tips and help in doing so.

The move to mobile and tablet environments affects typography as well, and responsive design advocates are concerned about typographic factors in retina display, contrast ratios, backlighting, and other items. With so much emphasis on the visual, developers and designers can’t lose sight of the importance and influence of type on consumption of web material.

5. Infinite Scrolling

infiniteInfinite scrolling presents a lot of material in a visually interesting set up that encourages user engagement by suggesting that there is always more waiting to be discovered. Instead of cutting content up into pages, the layout keeps it all on one long page that keeps being extended.

Because the content is continuously loading into the page from the bottom, the user doesn’t have to wait long – if at all – for more content to appear. One excellent adaptation of infinite scrolling is by Twitter, where new content is always being added in real time. Twitter uses subtle signals (the torn page marker, the “load more tweets”) to add a mental break to the feed – a vital functionality to maintain a feeling of control for the user and to nip boredom in the bud.

As powerful as this can be, developers and designers need to be careful to not overuse or force infinite scrolling in sites that do not suit it. Highly visual sites are perfectly aligned for this, but technique is key to success. JScroll is one plugin to investigate if you think this might benefit your site.

6. Device Interactions

touch Although at times it may seem as if everyone is on a smartphone or tablet, or focused on apps and social media, statistics show that on average we still spend over an hour a day on the web itself. But even the way we interact with the web environment increasingly owes something to mobile – the use of touch. Touch is an integral part of mobile – for scrolling, zooming, pulling content into view, navigation, etc.

Going forward, web browsers themselves will likely be free of toolbars and tabs and one will use touch and gestures to move and navigate through content, blurring the distinction and transition between desktop and tablet and smartphone even more. Accessing information and navigating from a home page deep into a site’s product catalog looking for the perfect pair of golf shoes will be smoothly accomplished without a thought as to which platform one is on.

Since it’s inevitable that touch screen will come to the desktop, developers and web designers need to add the capability to existing web applications and sites. A number of JavaScript libraries of plugins already exist to help – 11 are listed in an article at Queness.

Conclusion

The times are indeed changing, but they are exciting times and exciting changes. Lots of opportunities exist for web developers and designers in creating new sites and outfitting existing sites to better compete in new environments. It’s the perfect time to investigate some of the areas of concern and plan for ways to move forward and adapt your techniques and your existing websites so that the transition is a smooth and positive one.