5 Web Technologies You Can't Afford To Ignore
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
In the early days of the internet, a primer in HTML markup and an eye for layout was enough to get you started putting together web pages. However, the Web has evolved (and continues to do so) at a breathtaking pace, constantly introducing new technologies and techniques.
These days, web development encompasses many different skills and challenges. These can include graphic design, interface design, content authoring, front- and back-end coding, user experience design, SEO and more. It's tough for an individual developer to have all of these skills, and for this reason developers will often work in teams, each member covering a different aspect of the design process according to his or her skillset.
There are, however, some technologies that are so important that it pays every web developer to have a basic knowledge of them. In this article I list five critical web technologies for 2014, the basics of which every web developer should grasp. These techniques all work together to some extent, so the lines that divide them can be a little blurred; together, though, they form a suite of techniques to help you build slick, efficient, modern and robust sites for your users.
1. HTML5
Of course, HTML (HyperText Markup Language) has been the main markup language for pages on the Web since the beginning. Each subsequent version of the HTML specification has introduced a greater range of abilities to the language, but the recently introduced HTML5 specification is arguably the biggest leap forward that HTML has ever made.
The importance of HTML5 starts with its aim to end the nightmare of browser plugins. The inclusion of a whole range of new media tags like <audio> and <video> means that many of the abilities formerly provided via plugins such as Flash are now handled natively.
Under HTML5, for instance, embedding a video element can be as simple as this:
<video src="myMovie.mp4" poster="myMovie.jpg" controls> This is some content to display if the browser does not support the video element. </video>
In addition, HTML5 adds new semantic markup tags (such as <article>, <figure> and <section>, among others), the <canvas> element, which gives HTML a surface on which to draw graphics, support for local data storage, and many other new or updated features.
HTML5 has gained the support of all the major browser vendors including Apple, Google, Firefox, Opera, and Microsoft. Because all major platforms are supported, including mobile devices, we can look forward to a uniform experience across most devices. Although individual features of HTML5 might vary from platform to platform, there should always be sufficient common features to build useful web apps with a consistent look and feel. As HTML5 continues to evolve, the differences among implementations are expected to lessen even more.
But perhaps the biggest draw of HTML5 is that it offers a chance to code something once and have it work across a wide range of browsers, without getting bogged down in device- and plugin-specific tools and APIs.
2. CSS3
CSS3 is the latest incarnation of Cascading Style Sheets and brings with it a lot of long-awaited abilities, including shadows, gradients, rounded corners, and transitions, plus new layout abilities like multi-column pages and flexible box and grid layouts. Previously, these would all have to be coded (usually in JavaScript) with all the associated problems of increased development times, potential bugs, and platform or browser incompatibilities.
Here’s how simple it can be to add a drop-shadow effect using CSS3:
#shadowbox
{
box-shadow: 10px 10px 5px #888888;
padding: 10px;
border: 1px solid;
width: 200px;
}
The result is shown in Figure 1.
)
Figure 1 A CSS3 Drop Shadow
Although some facets of CSS3 are still experimental and carry vendor-specific prefixes, development is continuing rapidly.
Use of CSS3 also promises speedier page response due to the reduction of images needed for visual effects, and reduces our dependency on JavaScript for visual presentation tasks such as animation. This not only results in less code (so there are fewer potential bugs) but also even better web page performance.
3. Responsive Web Design
Responsive design is a hot topic in the web design universe. To see it in action, open a responsive web page such as http://www.thebestofeastlondon.com in a desktop browser, then slowly change the width and height of the browser window. See what happens? The layout adjusts itself automatically for the best fit to the new browser dimensions, as shown in Figure 2. Even if you're viewing it on a phone or other mobile device, the website is easy to view. Responsive website design moves us away from the fixed width pages we’re used to, toward pages that intelligently alter their layouts and reflow content to suit the dimensions and resolution of the browser display.
)
Figure 1 A Responsive Web Page Layout
Responsive Web Design is not a single piece of technology, but rather a set of techniques and ideas working together.
The first big idea is the fluid grid. Fixed width layouts have until recently been the more popular choice for web page layout. However, considering the broad range of screen resolutions in today’s market, more liquid layouts start to make sense.
Instead of designing a layout based on fixed pixel counts or percentage values, a fluid grid works more carefully with proportions. This way, whether a layout is compressed to fit a mobile device or expanded across a large monitor, all of the page elements in the layout will be resized in relation to one another.
Great as fluid grids are, where the browser window is too narrow, the layout can start to fail. For example, a multi-column page may not work well on a mobile phone screen. Responsive design addresses this issue by using so-called media queries.
The following is a brief example of a media query. Here, if the device passes the test by using a screen with minimum width of 300 pixels, any page elements with class content will have their location and width amended, and items with class page_icons will disappear from view.
@media screen and (min-width: 300px) {
.content {
float: left;
width: 75.2342537354%;
}
.page_icons {
display: none;
}
}
It is common that the mobile experience for a web application or site is developed only after the PC version has been completed. But with the explosion in mobile computing added to the challenges imposed by limited screen estate and variable connectivity, many new designs are being developed with a mobile-first approach.
4. Frameworks
A framework is designed to aid the development of scalable, robust and efficient dynamic websites and web applications. The framework aims to reduce the effort expended and promote code reuse on common activities such as database access, templating frameworks and session management, among others.
The MVC (model-view-controller) architecture is perhaps the most popular for web applications, as typified by the Google-supported AngularJS. HTML is great for declaring static documents, but not quite so able when we try to use it for declaring dynamic data in pages. MVC divides your application into three interconnected parts, separating internal representations of data from the way that information is presented to the user.
- The model contains application data, business logic and functions.
- The view can be any output representation of information, such as a web-based table or graphic.
- The controller acts as go-between for the model and view.
AngularJS lets you extend HTML vocabulary for your application. The resulting environment is very expressive and quick to develop, while still producing very readable code. It employs directives, which are all prefaced with ng-, to add new actions into the HTML attributes on a page. For example, making an HTML page into an AngularJS application is as simple as adding one extra term to the <html> tag:
<html ng-app>
Then, through some very simple and elegant directives, AngularJS can handle much of your data binding and display tasks. Here’s a simple loop to display the description property of items from a collection things as an HTML list:
<ul>
<li ng-repeat="thing in things">
{{thing.description}}
</li>
</ul>
How simple is that?
5. SVG
Apple markets its much-vaunted “Retina” displays across its whole range of iOS products (iPhone, iPad, iPod Touch, etc.) and it seems almost certain that the other major manufacturers will seek ways to follow suit using their own display technologies.
For web developers, this can be a problem. We must cater not only for a plethora different screen sizes, but also for variations in pixel density.
One of the most interesting technologies that may help with this is SVG, or Scalable Vector Graphics. SVG essentially allows us to embed vector-based, rather than raster-based images right into web pages. Because the graphics are stored as patterns of vectors, they’re infinitely scalable without any loss of quality, whatever the platform, screen size or resolution.
SVG is far from new - the first W3C draft was in 1999 - but following the inclusion by Microsoft of native support in Internet Explorer 9, we now see SVG as a feature of HTML5 with full native browser support from all the major manufacturers.
You can use SVG anywhere you use a raster graphic such as a GIF, JPG, or PNG. With SVG, though, what you’re providing are drawing instructions rather than a bitmap:
<img src="ferrari.svg" height="64" alt="Vector image of Ferrari" />
Conclusion
Creating state-of-the-art web applications that work well regardless of the user's platform and browser has always been a challenge.
The current explosion in mobile devices for web consumption has led to new techniques for efficient and robust web development across the whole range of devices. In this article we’ve discussed five techniques that work well, alone or in combination, to produce capable, flexible and robust web applications while helping to minimize development time and code complexity.