Create Mobile Site For My Blog Follow google Guidelines

I want to make mobile site that follow google guidelines everytime user browse our site via smartphone, tablet Homepage ----------- 1) Background #FFD814 + logo 2) Tagline (font in white color +background in black color) 3) 320x50 (ads slot) 4) Search Bar 5) Post (thumbnail width 200 px +post title). Has 10 post at every page After post 2, will appear ads slot 300x250 and after that will continue post, 3, 4, 5, 6, 7, 8, 9, 10 6) Page number 7) Category (i can set which category will appear) 8) Blog info about, contact number, etc Single Post ----------- 1) Background #FFD814 + logo 2) Tagline (font in white color +background in black color) 3) 320x50 (ads slot) 4) Post (Full Image + Full Post. Tags after post 5) Ads Slot For 300x250 size 6) Related Post (Vertical Style) - thumbnail image + title post #no.1 - thumbnail image + title post #no.2 - thumbnail image + title post #no.3 7) Category (i can set which category will appear) 8) Blog info about, contact number, etc Category + Tags + Search Result ------------------- 1) Background #FFD814 + logo 2) Tagline (font in white color +background in black color) 3) 320x50 (ads slot) 4) Search box 5) Ads Slot For 325x50 size 6) Thumbnail Image 250px width + Title Post (10 Post). After post 2, will appear ads slot 300x250 and after that will continue post, 3, 4, 5, 6, 7, 8, 9, 10 7) Category (i can set which category will appear) 8) Blog info about, contact number, etc Image Gallery ----------- 1) Background #FFD814 + logo 2) Tagline (font in white color +background in black color) 3) Post Title 4) 325x50 size ads slot 5) Link Next & previous Image 6) Full Image Gallery and Link Next & previous Image 7) Ads slot 300x250 8) Category (i can set which category will appear) 9) Blog info about, contact number, etc