Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Web Design Trends 2013   

Web Design Trends 2013 - Part 2

HTML5 and CSS3, Flash is Out

Trend 1: Responsive web design (RWD)
Trend 2: Infinite scroll and more vertical scrolling
Trend 3: Sticky navigation/fixed headers/fixed position design elements
Trend 4: Parallax scrolling
Trend 5: HTML5 and CSS3 are here to stay

Trend 6: Flash is out for mobile website design
Trend 7: Leaner, faster, high - performance websites
Trend 8: Modular design using design process building blocks
Trend 9: Scalable web design (SWD)
Trend 10: Designing for the retina web and the mobile web
Trend 11: The beta model release - going strong
Trend 12: Thinking big - Oversized buttons, headers, background photos and text
Trend 13: Simplicity - Minimalism is better
Trend 14: Single color sites
- effectively using monochromatic color palettes
Trend 15: Illustration in web design
Trend 16: Social network badge design
Trend 17: Circles in website design
Trend 18: Blurred backgrounds

Trend 19: Single Page Websites
Trend 20: Skeuomorphic design is on its way out



Trend 5: HTML5 and CSS3 are here to stay

This logo represents HTML5, the cornerstone of the Open Web Platform that the web community and W3C  (WorldWideWeb Consortium) is building for modern Web applications. HTML5 includes the fifth revision of the HTML markup language, CSS3, and a series of JavaScript APIs. These technologies work together to help you create complex applications that were once restricted to desktop platforms. You can now reach a wider audience across multiple platforms and devices using HTML5.

Advantages of HTML5
HMTL5 is a collection of features, technologies, and APIs that brings the power of the desktop and rich multimedia UX to the web—while building on the web's innate strengths of interactivity and connectivity. 

Today, the web browser is becoming the main platform for communication, business or gaming. HTML5 features are supported on modern web browsers. 

HTML5 makes it possible for the web to achieve the functionality, speed, performance, and user experience of desktop applications. With HTML 5 you now can create apps and websites that are fast, secure, responsive, interactive and stunning without the huge investment of time and money traditionally associated with their development or updating.

  • HTML 5 allows users to quickly and easily access core web applications
  • HTML5 is mobile-friendly. Web developers can use the same technologies they know to build rich web applications that work across different device types.
  • Users don't need to download apps or update them across multiple devices.
  • Features like websockets, offline storage and rich user interface enables creation of outstanding web applications

High performance video, audio and graphics
The web is a visual medium and HTML5 offers the integration of video, audio or multimedia within your website's code.  You can present stunning video and photo galleries with faster load times.

Using HTML5 and CSS3, the audio and video effects are tagged and viewed without the use of third-party applications or plug-ins.
Here's Apple's showcase of  HTML5 multimedia, audio, and graphics in action:  http://www.apple.com/html5/showcase/video/

HTML5 offers enhanced multilingual support

  • HTML5 supports a more semantic style of markup that allows for meaningful tags, and simpler, more understandable coding when dealing with multilingual content. For instance, HTML5 users can apply a simple "no" or "yes" code - to direct their translation partner to the content they are to work on. This eliminates the tedious process of annotation or list making.
  • HTML5's "bdi element" makes it easier to handle both left-to-right languages like English, and right-to-left languages such as Arabic and Hebrew, improving formatting and presentation especially when bi-directional languages are displayed side by side.

Businesses run on HTML5
HTML5 offers advantages to businesses over any other IT model - in terms of simplicity, lower cost, security, flexibility and mobility.

  • HTML5 can be deployed across multiple platforms and a wide range of mobile devices
  • Single source code for all platforms
  • Development across multiple platforms is more efficient
  • Offline working enhances productivity in the absence of an internet connection -  with client-side databases to store data

Leading companies moving to HTML5 include Adobe, Salesforce, Citrix, Netflix, Twitter etc.

Games and apps are more engaging, interactive and stunning
HTML5 enables the creation of games that connect with users wherever they are - whether on desktop or mobile devices.
Features like high performance 2D and 3D graphics, offline asset storage, rich audio APIs, and socket-based networking let you create gripping modern games with a reach like never before.

CSS3 - Elegance and style without the coding pain
Cascading Style Sheets (CSS) offer a simple mechanism for adding style (e.g., fonts, colors, spacing) to Web documents. CSS3 is the latest standard for CSS. CSS3 with its new technologies and extensions like 2D Transformations, Transitions, 3D Transforms and WebFonts makes it possible to create rich user experiences with no coding effort. Just apply some CSS to your existing applications.

With the advent of CSS3, apps can have an elegant, expressive, and flexible design. You can create visual enhancements like rounded corners, gradients, and shadows, text transformations, animations and 3D transformations.

Simplified color and image management allows for faster loading (fewer HTTP requests) and simpler redesigns. You can directly manipulate elements with mathematical access to graphics, rotating and zooming almost anything without swapping out images.

Presentation can be achieved with just CSS3 and no JavaScript.  This makes both development and maintenance easier, as developers don't need to know both CSS and JavaScript.  Control column width, banner size and other layout elements with CSS3.

Typography in your design is made easy as Google Web Fonts and TypeKit and Font Squirrel provide you with access to a large number of fonts you can use in your apps.

The following are some examples of what you can do in design, presentation and animation with CSS3:
Magazine-like layouts - wrap shapes, flow text and more with HTML and CSS3 regions
CSS 3D transforms - examples
CSS - Transitions and Transforms
CSS - Web Fonts
CSS Animations
Flexible Box model

CSS3 is completely backwards compatible, so you will not have to change existing designs. Browsers will always support CSS2.


Trend 6: Flash is out for mobile website design

Apple does not support Flash on iPhones, iPods and iPads as Flash is 100% proprietary, versus HTML5, CSS and JavaScript, which are open standards that Apple adopts. Flash was designed with a conventional mouse and keyboard in mind, and not for touchscreen devices.  Battery consumption is far higher with Flash. Reliability, security and performance is compromised on Flash.  Steve Jobs shared these and other concerns in his open letter on "Thoughts on Flash".

Flash has made a name for itself for development of animated, rich, immersive, interactive, expressive online content, particularly for games and video.

See examples below:
Best Flash Sites based on visual artistry, integrated sound, ease of use and uniqueness
Rich experiential content created with Flash.

Disadvantages of Flash:

  • Flash is not search-engine friendly.  Search engines cannot index Flash pages correctly as they cannot read the content. Since there are just a few keywords, search engines may consider the site as being deceptive, and potentially blacklist the site.
  • Flash makes page loading times slower, and could increase bounce rates as visitors don't have the patience to wait.
  • On internet connections with slower speeds, Flash consumes more bandwidth so applications and processes become much slower.  You need to target all kinds of users while building a website, not just those with high-speed connections.
  • No one on an iPad or iPhone (or most Android devices) will be able to access your site.

Adobe has discontinued development of Flash for mobile devices in favour of HTML5, as HTML5 is now universally supported on major mobile devices.  However Adobe continues to focus on Flash for PCs, for advanced gaming and premium video, as well as hardware accelerated 3D graphics for console-quality gaming and premium HD video with content protection.

Today the use of Flash continues to decline as HTML5, CSS3 and JavaScript technologies evolve versus single-vendor technologies in creating cross-platform Web and mobile experiences, Designers are opting for future-ready HTML5 designs. HTML5 can create dynamic layouts without all of the bugs and lags that Flash can produce. Flash will still survive for specialist video players, banner-ads, Facebook modules, and games.

Go To Web Design Trends 2013 - Part 3



<% Thispage ="http://" & Request.ServerVariables("SERVER_NAME") & Request.ServerVariables("URL") %>
data-num-posts="10" data-width="720">

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.


Related Articles, Tips & Ideas

Cool Website Menu Ideas

Logo Design Ideas

Brochure Design Tips

Text Ideas in Design

Logo Design Tips

<% Response.Buffer = True Dim objConn_template,strConn_template strConn_template = "Provider=SQLOLEDB.1;Persist Security Info=False;User ID=entheosweb_temp_2010;Password=73k*hj2T;Initial Catalog=entheosweb_template;Data Source=127.0.0.1" set objConn_template = Server.CreateObject("ADODB.CONNECTION") objConn_template.open strConn_template Dim sql,rs,rs2 Dim i,imageurl,myMatch,myMatches,RegularExpressionObject,comp Dim strHead,CategoryName,categorypage,Popurl Dim iCnt,psize,totpage ,rIndex,iCount,pageNo,Allurl ,ScreenshotsList set rs = Server.CreateObject("ADODB.recordset") set rs2 = Server.CreateObject("ADODB.recordset") function Pagecount2(tpages,page_no) Dim strURL,i strURL="" Response.Write "
" if tpages > 1 then if request("page") <> 1 and request("page") <> "" then response.Write "
" %> View<% response.Write "
" else response.Write "" end if if page_no+100 Then if i=clng(0 & page_no) then Response.Write " " & i & " " else Response.Write "  "& i & " " end if end if next else for i=page_no-10 to tpages if i>0 Then if i=clng(0 & page_no) then Response.Write " " & i & " " else Response.Write " "& i & " " end if end if next end if if clng(0 & request("page")) <> clng(0 & tpages) then response.Write ""%> View <% else response.Write "" end if end if Response.Write "
" end function %> <% server.ScriptTimeout = 1000 Set RegularExpressionObject = New RegExp With RegularExpressionObject .Pattern = "(([A-z\d/-]+\.[^,}.html.swf]+)+)" .IgnoreCase = True .Global = True End With sql="SELECT Top 1 TemplateID,authorsID,NumberOfDownloads,ScreenshotsList,price, ExclusivePrice FROM Mon_Template_Screenshots where (NumberOfDownloads>'2' and TemplateID>50000) order by newid()" set rs = Server.CreateObject("ADODB.recordset") set rs2 = Server.CreateObject("ADODB.recordset") rs.open sql,objConn_template,1,1 if not(rs.eof) then i=1 %> <% rs2.open "SELECT TemplateURL, URLDescription FROM Mon_Template_URL where ID=16",objConn_template,2,3 if not(rs2.eof) then TemplateURL=rs2("TemplateURL") URLDescription=rs2("URLDescription") end if rs2.close dim j j=1 while not rs.eof ScreenshotsList="" rs2.open "select ScreenshotsList from Mon_Template_Screenshots where TemplateID='"& rs("TemplateID") &"'",objConn_template,2,3 if not(rs2.eof) then ScreenshotsList=rs2("ScreenshotsList") end if rs2.close if i=1 then%> <% response.Write("") end if response.Write("") if i=4 then response.Write("") i=1 end if j=j+1 rs.movenext wend End if rs.close objConn_template.close set rs = nothing set rs2 = nothing set objConn_template = nothing set RegularExpressionObject = nothing set myMatches = nothing ScreenshotsList = "" Popurl = "" AuthorNickName = "" Allurl = "" TempDescription = "" imageurl = "" strHead = "" TemplateURL = "" URLDescription = "" Types = "" %>
") Set myMatches = RegularExpressionObject.Execute(ScreenshotsList) imageurl="" Popurl="" For Each myMatch In myMatches strHead=split(myMatch.Value,"/") if(ubound(strHead)>=1) then if strHead(1)=rs("TemplateID")&"-m.jpg" then imageurl=myMatch.Value elseif Mid(strHead(1),Len(strHead(1))-5,Len(strHead(1)))="-b.jpg" then if imageurl<>"" then Popurl= myMatch.Value Exit For else Popurl= myMatch.Value End if elseif Len(strHead(1))>8 then if Mid(strHead(1),Len(strHead(1))-8,Len(strHead(1)))="-bswi.jpg" then if imageurl<>"" then Popurl= myMatch.Value Exit For else Popurl= myMatch.Value end if end if if Mid(strHead(1),Len(strHead(1))-8,Len(strHead(1)))="-bcre.jpg" then if imageurl<>"" then Popurl= myMatch.Value Exit For else Popurl= myMatch.Value End if end if else Allurl =myMatch.Value End if End if next rs2.open "select AuthorNickName from Mon_Template_Authors where AuthorsID='"& rs("authorsID") &"'",objConn_template,2,3 if not(rs2.eof) then AuthorNickName=rs2("AuthorNickName") end if rs2.close rs2.open "select type,Description,Template_desc from Mon_Template_Info where TemplateID='"& rs("TemplateID") &"'",objConn_template,2,3 if not(rs2.eof) then Types=replace(replace(rs2("type"),"{",""),"}","") TempDescription=replace(replace(rs2("Description"),"{",""),"}","") if rs2("Template_desc")<>"" then Template_desc=replace(rs2("Template_desc"),"'","") else Template_desc="" End if end if rs2.close TempDescription=replace(TempDescription,"'","") %>
Featured Template
<% if Popurl<>"" then Popurl="http://templates.entheosweb.com/template_number/"&Popurl %> .asp">',430,449)" onmouseout="hidetrail()" alt="" border="0"> <%else %> .asp"> <%end if %> Template # <%=rs("TemplateID")%> <% if TempDescription<>"" Then %>
Type: <%=Types%> <%else%>
Type: <%=Types%> <%End if%>
Price: $<%=rs("price")%>
<% i=i+1 response.Write("