blogger templatesblogger widgets
Showing posts with label Responsive Web Design. Show all posts
Showing posts with label Responsive Web Design. Show all posts

Web Design: A History, Past, Present and Future [Infographics]

Past, Present & Future Of Web Design

Web design has been critical in the forging of internet content. From basic HTML production to cascading style sheets and the more recent emphasis on user experience, web design has shaped how we consume view information.

Please include attribution to SEO Information Technology with this graphic.

Web Design: A History, Past, Present and Future

Share this Image On Your Site



PAST

// HISTORY OF WEB DESIGN

Tim Berners-Lee published the first website in August 1991 – A simple, text based page with plain left-aligned black text and bright blue links on a white background.
Web design as we know it was born in 1993. When early browsers began to display images with text (as opposed to in a separate window)

Developing Web Design

The World Wide Web Consortium, formed in 1994, established Hyper Text Markup Language (HTML) as the standard.

By 1996, more websites focused on the following elements:

TABLE BASED LAYOUTS
  • Table Based layouts created additional design options by ind providing structure and multi-column layouts more complicated than HTML could produce at the time.
  • Table layouts allowed for navigational columns (or rows) to be incorporated with content.
  • Visually, images and text could be juxtaposed.
  • Adjusting column widths and quantity gave designers the chance to use principles of design, like the rule of thirds.
CASCADING STYLE SHEETS (CSS)
  • Cascading style sheets (CSS) created better web page structure.
  • CSS provides markup that determines the structure of multiple pages instead of creating new markup for each page.
  • CSS gave designers more creative control, allowing them to – design around the purpose of the site and finetune details.
FLASH BASED DESIGNS
  • Flash Based designs came to fruition in the late 1990s. It was designs more practical than Shockwave and presented more layout – and design options beyond HTML.
INSUFFICIENT BROWSER SUPPORT
  • Rudimentary CSS based animations were possible for years Insufficient but it wasn’t until the late 2000s, when sufficient browser browser support was available, that they were really used.
Design Details and Influences
  • The dot-com boom at the turn of the century demanded better web design among competitors: usability, accessibility, layout, color choice, typography etc. became important considerations when designing websites.
CSS-based design gained popularity due to its advantages, such as:
  • Reduced markup clutter and cleaner layouts with visual consistency
  • Separated design elements from content
  • Improved page response time
These influences caused a maturation of design principles:
  • Simple designs rely on good use of color palettes, typography, and contrast.
  • Contrast is kept minimal conveying information concisely.
  • Apple.com started a clean web design trend as early as 1999 and has inspired countless websites.
PRESENT

// RECENT TRENDS IN WEB DESIGN

Mobile Devices

With the growing number of mobile devices and the growing use of mobile access to the web, web design is no longer limited to desktop or browser compatibility.

The iPhone’s popularity, sleek design, lack of flash support, and focus on thumb navigation has impacted web design trends. Websites can be seen with overall layouts that look like an app as well as changing the way they use flash, utilizing large buttons instead of text links, using crisp quality images and video, and consistent branding, colors, layout, and typography between the website and official app.
In addition to designing with mobile in mind, designers also have to contend with multiple devices (tablets, e-readers, smartphones) and with more than one OS version for each type of device.
Responsive Web Design

A fluid grid is an adaptive grid layout in which every element is re-sized i proportional to the container within the CSS without further structure or back-end coding needed for each size.
Responsive web design takes fluid grids further by utilizing embedded media queries in the CSS that respond based on the media device the user is accessing the website with.
The iPad’s touchscreen, advanced retina display, and ability to flip between landscape and portrait pushed design to accommodate the users preferences, switching between devices, and natural hand movements in a way that had never been done before with traditional desktop layouts.

Full Screen Apps

Needed to either update, keep multiple sizes of, or only use externally hi res raster based images.
Use vector based images which can accommodate any resolution
FUTURE

  // HOW NEW TECHNOLOGY WILL ALTER WEB DESIGN

Biometric Fingerprints

The iPhone has a Touch lD system that scans your fingerprint to act as a security measure, instead of a password, to prevent your phone from being unlocked should it be lost or stolen.

While there is some concern as to the overall safety of using an individual’s fingerprints as a mainstream security measure, many wonder if similar technology may soon change how users access secure websites.

Online Banking

The top 10 UK. banks offer their own app designed with features like bill pay, person to-person payments, and check deposits through mobile phone.

More banking sites are using responsive web design to accommodate mobile users who access the main site.

Siri, Google Glass and Leap Motion

Users have traditionally accessed the internet through a graphical-user interface (GUI).

Applications and devices like Siri (voice), Google Glass (voicevision, and Leap Motion (gesture) are changing the way we can access the web.

As a result, web design will need to accommodate:
  • Requests and searches for information outside of a traditional search engine:
  • Gathering specific information rather than visiting an entire website
  • Navigation using more natural language and movement rather than clicking a mouse
Advertising

Some sites are using fewer ads, leaving them out in key places to focus on consumer needs, and requiring ads to blend with the web design.

Traditionally web ads are sold in set sizes and exact positions, but recently ad sizes, placement, and how they are sold is changing with the adoption of responsive web design.

The complications created with responsive web design and advertising may be the catalyst that initiates an overhaul in the way web content generates revenue altogether.

Social Media

Social media’s popularity now requires designers to integrate social media into web design.

Beyond branding and marketing, social networking sites are excellent sources of successful design and layout that turn potential users into frequent, regular users.

“Conclusion”

With more than 20 years of history, web design has come a long way from the days of plain white pages and lists of bright blue links. Its already clear developing technology and changing web culture is altering the way web design is approached so only time will tell how future OF- technology will continue to shake up the design world.

› › Web Design: A History, Past, Present and Future




+

How To Tell Google About Mobile Versions Of Your Websites


Matt Cutts, Google’s head of search spam, answers a question about mobile sites in his latest Webmaster Help video where a user writes in to ask:

Is there a way to tell Google there is a mobile version of a page, so it can show the alternate page in mobile search results? Or similarly, that a page is responsive and the same URL works on mobile.
Matt prefaces his answer by saying when talking about mobile versions of sites he’s speaking exclusively in regards to smartphones.

As a site owner you want smartphone users to end up on the mobile version of your page, and desktop users to end up on the desktop version. There are a couple of ways to do that, as Matt goes on to explain.

Cutts qualifies his response and states that he is referring to smartphones when talking about mobile versions. Obviously, webmasters want users to go to the mobile or desktop versions of their sites as required.

According to Cutts, there are a couple of ways of achieving this. One is to use a responsive design which serves up the same site to mobile or PC users. The second way is to have two separate versions of the site which points users to either one.

As the video explains, if taking the second option, then it’s important to have a rel=”alternate” tag on the desktop which points to the mobile. This allows the Googlebots to understand that the two sites are connected. Conversely, he also advises to include a rel=”canonical” on the mobile site.

The first way is to use a responsive design, which serves the same site to mobile users and desktop users. Javascript and CSS scales the site to comfortably fit the resolution of the screen it’s being viewed on. It’s important not to block Javascript and CSS, because if Google can fetch the Javascript and CSS code they are able to determine whether or not the site is responsive.

The other way to go would be to have separate versions of the site for mobile and desktop users, with each having their own URL. If you go this route you’re going to want to put a rel=”alternate” on the desktop site that points to the mobile version. This lets Google know these two versions are related to each other.

In this case you’ll also want to put a rel=”canonical” on the mobile version pointing to the desktop version. This tells Googlebot even though the mobile version is on a separate URL the content is the same, and as such it should be lumped together with the desktop version.

As long as you have these bidirectional links, Google will be able to tell the difference between the sites and return the correct version to the user.

Yet another way to go would be to redirect any smartphone agents from the desktop version of the site to the mobile version. Googlebot can read and interpret this as well, so Matt reminds us it’s important not to block Googlebot mobile just as you shouldn’t block Javascript or CSS.

Here are three basic ways to handle mobile traffic.

  • Responsive web design - Webpages 'respond' to the user agents, and re-size and readjust automatically to best suit the user agent that requested a page.
  • Dynamic content serving - Less used, but useful technique similar to RWD. The type of user-agent is recognized, i.e. whether it is a mobile or a desktop agent, and then content is programatically.
  • Separate mobile site - Same content, but hosted on a separate domain or sub-domain. Usually m.website.com.
Following these best practices is the best way to let Google know about mobile and desktop versions of the same page. For more information Google has put together a comprehensive resource about smartphone-optimized websites in their Google Developers section.

Searches related to google mobile friendly


Comments System WIDGET PACK