Web Design Trending Terms

• The following images are a visual representation of Trending Terms, the most frequently mentioned terms throughout this project. These data visualizations allow us to gain an overall vision of the visual and technological web design trends for this year.

• Visual and Design Trending Terms

  

  
  

  Technology Trending Terms

  
  
  

What is the difference between Responsive and Adaptive web design?

The hot topic for web developers and website owners is the way that websites can now automatically respond and adapt to any device with any screen size. This new way of web design optimizes the layout of the site to suit the screen size of the device it is being viewed on. There are two ways in which this can be achieve: with Responsive Web Design (RWD), coined by Ethan Marcotte, and with Adaptive Web Design (AWD), coined by Aaron Gustafson. Visitors to your site will not be concerned about which of the two methods you have used. This can simply come down to your or your designer’s preference. The user will not really notice a visible difference between the two methods but they do differ slightly.

If you’re interested in the technical aspects we explain them below.

Responsive Web Design (RWD)

The key elements that make up a Responsive website are CSS3, media queries, the @media rule, and fluid grids that use percentages to create a flexible foundation. It is also fundamental to use flexible images, flexible videos, fluid type and EM’s instead of pixels. All of these key points allow the responsive website to modify its layout to suit the device.

Responsive design is client-side which means the page is sent to the device browser (the client), and the browser then modifies the appearance of the page in relation to the size of the browser window.

The definition of a responsive website is that it will fluidly alter its composition to improve the accessibility of content depending on the screen size of the browser window.

Adaptive Web Design (AWD)

Adaptive web design uses predefined layouts that have been carefully constructed for a variety of screen sizes. A particular layout is activated when the screen size of the device viewing the website is detected and matched with a style sheet.

Adaptive design is predominantly server side. This means that the web server does all of the work of detecting the various devices and loading the correct style sheet depending on the attributes of the device. As well as the layout changing depending on the size of the screen they can also change depending on conditions like whether the device has a retina display or not. The server can detect this and display high quality images for retina display devices like iPads and lower quality images for standard-definition displays.

The downsides to AWD are that initial construction is very costly as you have a lot of layouts to design. Also to maintain and update all of these layouts can be very time consuming which will therefore cost a lot of money.

The definition of an adaptive website is one that has a set of predefined layouts that are activated when best suited to the device detected by the server.

Similarities and differences

The obvious similarity of both methods is that they improve accessibility of website content on mobile devices and various screen sizes. They also both provide visitors with an enhanced mobile-friendly user experience.

They are different in the way that they deliver the responsive / adaptive design to the user. RWD is dependent on fluid grids and AWD is relying on predefined size layouts. Also the fact that they either use client side or server side is another way in which they differ.

The visible difference is that responsive design will fluidly alter its layout while you resize your browser window whilst adaptive design will load a specific layout for the device you’re viewing the site on. If you resize your window with an adaptive website it will jump to a different breakpoint when you reach a screen size that suits another predefined layout.

Web 3.0: The Third Generation Web is Coming

Overview

The Web is entering a new phase of evolution. There has been much debate recently about what to call this new phase. Some would prefer to not name it all, while others suggest continuing to call it “Web 2.0”. However, this new phase of evolution has quite a different focus from what Web 2.0 has come to mean. 

 

Web 3.0

John Markoff of the New York Times recently suggested naming this third-generation of the Web, “Web 3.0”. This suggestion has led to quite a bit of debate within the industry. Those who are attached to the Web 2.0 moniker have reacted by claiming that such a term is not warranted while others have responded positively to the term, noting that there is indeed a characteristic difference between the coming new stage of the Web and what Web 2.0 has come to represent.

The term Web 2.0 was never clearly defined and even today if one asks ten people what it means one will likely get ten different definitions. However, most people in the Web industry would agree that Web 2.0 focuses on several major themes, including AJAX, social networking, folksonomies, lightweight collaboration, social bookmarking, and media sharing. While the innovations and practices of Web 2.0 will continue to develop, they are not the final step in the evolution of the Web.

In fact, there is a lot more in store for the Web. We are starting to witness the convergence of several growing technology trends that are outside the scope of what Web 2.0 has come to mean. These trends have been gestating for a decade and will soon reach a tipping point. At this juncture the third-generation of the Web will start.

More Intelligent Web

The threshold to the third-generation Web will be crossed in 2007. At this juncture the focus of innovation will start shift back from front-end improvements towards back-end infrastructure level upgrades to the Web. This cycle will continue for five to ten years, and will result in making the Web more connected, more open, and more intelligent. It will transform the Web from a network of separately siloed applications and content repositories to a more seamless and interoperable whole.

Because the focus of the third-generation Web is quite different from that of Web 2.0, this new generation of the Web probably does deserve its own name. In keeping with the naming convention established by labeling the second generation of the Web as Web 2.0, I agree with John Markoff that this third-generation of the Web could be called Web 3.0.

Timeline and Definition

Web 1.0. Web 1.0 was the first generation of the Web. During this phase the focus was primarily on building the Web, making it accessible, and commercializing it for the first time. Key areas of interest centered on protocols such as HTTP, open standard markup languages such as HTML and XML, Internet access through ISPs, the first Web browsers, Web development platforms and tools, Web-centric software languages such as Java and Javascript, the creation of Web sites, the commercialization of the Web and Web business models, and the growth of key portals on the Web.

Web 2.0. According to the Wikipedia, “Web 2.0, a phrase coined by O’Reilly Media in 2004, refers to a supposed second generation of Internet-based services — such as social networking sites, wikis, communication tools, and folksonomies — that emphasize online collaboration and sharing among users.”

I would also add to this definition another trend that has been a major factor in Web 2.0 — the emergence of the mobile Internet and mobile devices (including camera phones) as a major new platform driving the adoption and growth of the Web, particularly outside of the United States.

Web 3.0. Using the same pattern as the above Wikipedia definition, Web 3.0 could be defined as: “Web 3.0, a phrase coined by John Markoff of the New York Times in 2006, refers to a supposed third generation of Internet-based services that collectively comprise what might be called ‘the intelligent Web’ — such as those using semantic web, microformats, natural language search, data-mining, machine learning, recommendation agents, and artificial intelligence technologies — which emphasize machine-facilitated understanding of information in order to provide a more productive and intuitive user experience.”

Web 3.0 Expanded Definition. I propose expanding the above definition of Web 3.0 to be a bit more inclusive. There are actually several major technology trends that are about to reach a new level of maturity at the same time. The simultaneous maturity of these trends is mutually reinforcing, and collectively they will drive the third-generation Web. From this broader perspective, Web 3.0 might be defined as a third-generation of the Web enabled by the convergence of several key emerging technology trends:

Ubiquitous Connectivity

• Broadband adoption
• Mobile Internet access
• Mobile devices

Network Computing

• Software-as-a-service business models
• Web services interoperability
• Distributed computing (P2P, grid computing, hosted “cloud computing” server farms such as Amazon S3)

Open Technologies

• Open APIs and protocols
• Open data formats
• Open-source software platforms
• Open data (Creative Commons, Open Data License, etc.)

Open Identity

• Open identity (OpenID)
• Open reputation
• Portable identity and personal data (for example, the ability to port your user account and search history from one service to another)

The Intelligent Web

• Semantic Web technologies (RDF, OWL, SWRL, SPARQL, Semantic application platforms, and statement-based datastores such as triplestores, tuplestores and associative databases)
• Distributed databases — or what I call “The World Wide Database” (wide-area distributed database interoperability enabled by Semantic Web technologies)
• Intelligent applications (natural language processing, machine learning, machine reasoning, autonomous agents)

Conclusion

Web 3.0 will be more connected, open, and intelligent, with semantic Web technologies, distributed databases, natural language processing, machine learning, machine reasoning, and autonomous agents.