4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

Mobile Website Header/Logo

by ijohnson
2 replies
  • WEB DESIGN
    • |
Calling all experts!!!!!

I'm having some problems adjusting a header to use on a mobile site. Are there any specific dimensions to be considered when using a header or logo designed for a traditional site?

I also ran into a problem with the header turning black when it was uploaded onto the WordPress blog. What causes this to happen?

Are there any best practices or specific things to keep in mind when it comes to creating crisp, vibrant headers for mobile websites? Are there any mobile sites you could recommend for viewing who you feel are "doing it right" in all areas, i.e., design, seo, usability, etc.

I really appreciate any help I can get to resolve these issues.
#header or logo #mobile #website
  • Profile picture of the author phpbbxpert
    The image should be as small as possible.
    The idea of mobile optimization is to keep the site as light as possible.
    Minimal images and scripts. You don't want someone to be waiting all day for the site to load on their mobile and or using up their bandwidth.

    The header may have turned black when uploaded because it was not saved correctly or it uploaded in the wrong transfer mode.

    Open the one on your PC in your browser and see if it is the same there.
    {{ DiscussionBoard.errors[2573606].message }}
  • Profile picture of the author csmcmanus
    in most newer handheld devices, pixels pretty much stay true. a 200px is still gonna be 200px. your header length will not be to much of a hindrance however do pay attention as to how you are saving your image. jpeg's weigh different than gif's and png's. to optimize for for mobile i suggest you be more concerned with that size.

    a really cool tool that came out with cs3 was device central. you can test on multiple devices within that program and they give you specs on mobile screensize. good rule to follow i found from experience is no lengthier than around 200px. doing so will eliminate a smaller rendering/and or pushing the arrow button to the side to view the whole image.
    {{ DiscussionBoard.errors[2575708].message }}

Trending Topics