july 18 duyen - 10 web design trends for 2013
DESCRIPTION
Weekly presentationTRANSCRIPT
2013 Web Design Trends
Author: Duyen.NguyenDate: 18/07/2013
1. Responsive Web Design (RWD)2. Flat Design3. Parallax4. Large Photo Backgrounds5. Infinite Scrolling
2013 Web Design Trends
1. Responsive Web Design (RWD)
1. Responsive Web Design (RWD)
1. Responsive Web Design (RWD)
How to know if website is Responsive Web Design?
1. Responsive Web Design (RWD)
1. Resize browser2. Use Tool on Firefox: Web Developer > Responsive Design View
1. Responsive Web Design (RWD)
https://creativemarket.com/anarieldesign/1247-Calisto-Responsive-Template-Card/live-preview
http://www.anderssonwise.com/ http://2012.newadventuresconf.com/
http://www.izwebz.com/
Examples:
2. Flat DesignFlat Design or Flat UI has been one of the most talked about trends in web and user interface design this year.
2. Flat Design
Features:1. No gradients or shadows2. Simple Elements3. Beautiful Typography4. Strong focus on color
2. Flat Design
No gradients or shadows
2. Flat Design
Simple Elements
2. Flat Design
Beautiful Typography
2. Flat Design
Strong focus on color
2. Flat Design
The 5 things that people associate with flat design are:• Simple• Clean • Colorful• Modern• Boring
2. Flat DesignWe gathered different association and brought them together in the word cloud that you see below:
2. Flat Design
http://etchapps.com/ https://coderwall.com/futureal http://www.microsoft.com/en-gb/default.aspx
Examples:
3. Parallax
3. Parallax
http://ianlunn.co.uk/plugins/jquery-parallax/
http://www.iutopi.com/ http://www.soleilnoir.net/believein/#/fashion
http://www.bagigia.com/
Examples:
Parallax is good for SEO?
3. Parallax
From SEO perspective some advantages of having parallax scrolling website are
• Use HTML5/CSS3 (Google favors new technology)• Parallax website is perfect for link bait.• The parallax scrolling website has a higher level of interaction with the users• It increases page view interval and interaction.• Is known as the parallax effects and it is done using jQuery. • It looks hot and it is not using Flash, so it is even hotter.
With these advantages it also has some disadvantages, which are,• A parallax site appears to Google's search engine spiders as one page. Now, that doesn't mean that you can't
rank for that one page, but it's going to be difficult to target multiple keywords on just one page (THAT’S RISK)• Slow: Google favors sites that load quickly. Many parallax sites are image-heavy and take some time to load• Google is smart. Google spiders understand the structure of a page, so they can determine the importance of
content by the position of content on the page-- important content at the top, less important content at the bottom. With parallax sites, you are trying to fit all the content on to one page, so the concept of the "fold" goes away and important content is very likely to be positioned at the bottom of the page. (Disable CSS to see the structure of site)
NOT GREAT FOR SEO
4. Large Photo Backgrounds
4. Large Photo Backgrounds
https://squareup.com/ http://www.geo-fun.com/ http://vegas.jaysalvat.com/ http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/index.html
Examples:
5. Infinite Scrolling
5. Infinite Scrolling
5. Infinite Scrolling
http://pinterest.com/ http://www.flickr.com/explore http://images.google.com/ https://www.facebook.com/
Examples:
5. Infinite ScrollingAdvantages 1. Can improve load time (page speed) for pages that have lots of content.2. Retains visitors on one page, allowing them to view lots of content without a page
refresh.3. Template designs can benefit with more cleanness, more room for content and less
distracting elements like the list of numbers for paging.
Weakness4. If not properly optimized, pages with lots of content can soak up lots of browser
memory. Desktop computers as well as on mobile devices and tablets can potentially run out of memory and crash, specially when the page loads tons of images.
5. It makes it extremely difficult for users to view the footer.6. There is no permalink to a specific section of the page.
THANK YOU