Trend of Web Technology Design and Development

Ferry Astika Saputra

Trend of Web Design

• Adaptive and Responsive Layout• Mobile-ready Layout• Typography and Content Over Heavy Design

Adaptive and Responsive Layout

• A fully responsive web layout allows – web designers and developers to keep one content set

for every type of device, – while at the same time adapting the layout to give an

optimal viewing experience for different resolutions• Typically, there have been four general screen sizes

that responsive design has been aimed at: the widescreen desktop monitor, the smaller desktop (or laptop), the tablet, and the mobile phone.

Example

Example

Mobile-ready layout

• Smartphones and tablets can use swiping and other touch-centric navigation elements, and it would be unwise to let these intuitive app-centric features go to a complete waste on the web. Swipe it, tap it, and click it!

Typography and Content Over Heavy Design

• The art and technique of arranging type in order to make language visible.

• Typography in web = the art and technique of arranging type in order to make content easy to read and ……

Typography and Content Over Heavy Design

• Web is shifting towards typographic compositions where the content is king and the user interface is minimal but relevant.

Trend of Web Design

• HTML5 and CSS3 Techniques• The Power of Ajax

HTML5 and CSS3 Techniques• Thanks to HTML5, web developers from all over the world can

now enjoy semantics, standards for movies, and more dynamic web support.

• And with CSS3, they can now use awesome animations and other aesthetic elements that look stunning and cost next to nothing in terms of file size, which is great for page speed. It’s the new flash element that’s high in reusability and low on bulk.

• Gradients, box shadows, and border radius are just the tip of the iceberg. Even 3D is now a possible and viable option, and techniques like filters (think Photoshop and 3D effects) are just around the corner!

http://www.dazeddigital.com/projects/fuelband/

The Power of Ajax

• Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:– standards-based presentation using XHTML and CSS;– dynamic display and interaction using the

Document Object Model;– data interchange and manipulation using XML and XSLT;– asynchronous data retrieval using XMLHttpRequest;– and JavaScript binding everything together.

Model : Classic Web Apps VS

Ajax Web Apps

Synchronous VS Asynchronous

Communication