<< Back to the blog

Web Design Approaches - Part 1




By @islamzatary

Web Design Approaches

Why this approaches?? Mobile Generation
1. Mobile(Phablet) Browsers Stats
Mobile Browsers Stats

Web Design Approaches

2. Mobile(Phablet) Search Engine Stats
Mobile Search Engine Stats

Web Design Approaches

3. Mobile(Phablet) Social Media Stats
Mobile Social Media Stats

Web Design Approaches

1. Fixed web design.
2. Adaptive web design.
3. Responsive web design.
4. Fluid web design.
5. Hybrid design(Responsive + Fluid).

Web Design Approaches

1. Fixed web design: Set width and resizing the browser or viewing it on different devices won’t affect on the way the website looks.
Examples:
1. SDC
2. ADIA

Web Design Approaches

2. Adaptive web design(AWD): Introduce media queries to target specific device sizes, like smaller monitors, tablets, and mobile.
Advantages:
1. Uses the server to detect the device the website(desktop, tablet, mobile).
2. Template targeted (mobile devices and various screen sizes).
3. Send specific files for that device.
4. Page load faster.(m.domain.com)
5. Enhances the user experience.
6. Advertising Monetization.

Adaptive web design(AWD)


Disadvantages:
1. Bad for Search Engines (each article/section has two separate URL’s).
2. Stuck in the Middle (Tablet 5" - 11").

Examples:
1. Facebook
2. Linkedin
3. Bayt

Web Design Approaches

3. Responsive web design(RWD): built on a fluid grid and use media queries to control the design and its content as it scales down or up with the browser or device.
Advantages:
1. Uses specific CSS code to modify the presentation of a website based on the size of the device.
2. Information for every device is downloaded.
3. One url(Same Domain)
4. Same Experience for Everyone.
5. Less Maintenance.
6. SEO, Google love responsive.
7. Fast Implementation.

Responsive web design(RWD)

Disadvantages:
1. Website Performance(Page load slower).
2. Integrating Advertisements (more difficult to integrate advertising effectively).
3. A lot of sacrifices have to be made when using one single design for all devices.

Examples:
Demo
Smashingmagazine

Web Design Approaches

4. Fluid web design: built using percentages for widths. As a result, columns are relative to one another and the browser allowing it to scale up and down fluidly.
Example:
fluid demo

Web Design Approaches - Tools

1. Group 1 (Native): Multi Browser cross different devices, and you need to buy Iphone, Ipad(different iOS), Samsung, one of (Nexus, HTC, Sony,..) with different browser.
This will cost you at least $2500.
Devices are always more preferable than emulators.
An emulator can replace the original for 'real' use.
A simulator is a model for analysis.

Web Design Approaches - Tools

2. Group 2 (Browsers): there are no devices to buy, and its consists mostly of desktop browsers:
   1. IE8-IE11 tested using virtual machine. modern.ie, Windows Phone Emulator
   2. Latest Chrome, Firefox & Safari.
3. Emulator: Opera or SDK/IDE from Android and Apple to use virtual Machine.
4. Online:
   a. Browserstack.
   b. Screenfly.
   c. Firefox extension.
   d. Chrome Developer tools extension.

Web Design Approaches


Top to Bottom
Top to Bottom

Web Design Approaches - Mobile First

Mobile First: Mobile First Approach

Top to Bottom
Bottom to Top

Web Design Approaches - Braekpoints

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {}

Web Design Approaches - Braekpoints

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {}

Web Design Approaches

Frameworks:

1. RWD: Bootstrap(Ace) & Foundation.
2. AWD: Jquery Mobile.

Web Design Approaches - Email

Email Stats

Web Design Approaches - Email

1. Email Boilerplate
2. Custom Template
Email Preview

Web Design Approaches - Adaptive images

Backend: Adaptive Images

Front End:
1. Picturefill.
2. picturefill plugin or Pure Javascript.

Web Design Approaches - Best Practise

1. Use Proper breakpoints.
2. Make your Images Flexible and Workable.
3. Allow Compression of Site Elements and Content.
4. Get Rid of Non-Essential Content.
5. User Proper HTML5 tag element.
6. Identify Your Audience.
7. Track user behaviour.
8. Try use font icons instead of regular images.

Web Design Approaches - Resources

mobilefirst
one-solution-to-responsive-images
mobile-first
Browsers Stats
responsive-vs-adaptive-webdesign-which-is-best-for-you/
pros-cons-responsive-adaptive-designs/
email-template-for-all-devices

Web Design Approaches - Part 1




Practical



Wrapping up








<< Back to the blog

by @islamzatary