Md. Ali Hosssain.Web Designer.Jr. Instructor, Graphic Arts Innstitute.Email:Students.gai@gmail.comPhone:01731402303

04/12/231

• Fast Loading web site designs

• Clear Navigation

• All Resolutions

• Browser Compatibility

• Readable and professional looking fonts

• Minimize the use of images -

• Use of white space

• Check for broken links

Useful Tips for Effective Web Design

04/12/232

device screen width web site safe area

width height

iphone portrait (320 px) 310 px 352 px

iphone landscape (480 px) 468 px 202 px

ipad portrait (768 px) 750 px 920 px

ipad landscape (1024 px) 1010 px 660 px

screen : 1024 px 960 px 548 px

screen : 1152 px 1117 px 644 px

screen : 1280 px 1245 px 580 px

screen : 1360 px 1325 px 548 px

screen : 1366 px 1331 px 548 px

screen : 1440 px 1405 px 680 px

screen : 1600 px 1565 px 680 px

screen: 1680 px 1645 px 825 px

screen : 1920 px 1885 px 855 px04/12/233

These are the elements we could identify in this layout:

Wrapper

header• logo• Contact info• top navigation menu

main content• Optional left sidebar• Actual content: news, products• Optional right sidebar

footer• copyright notice• Optional sitemap

04/12/234

04/12/235

04/12/236

04/12/237

Basic two column layout

04/12/238

Two column layout with a header

04/12/239

Two column layout with a header and a footer

04/12/2310

Three column layout with header, navigation bar and footer

04/12/2311

04/12/2312