Mobile Friendly Website Design
Having a great looking mobile view of your website has become an essential part of any modern website. Weaver Xtreme has you covered! Weaver Xtreme works seamlessly on all mobile devices, automatically adjusting the styling for three screen sizes: desktops, small tablets, and phones. Large tablets like the iPad are treated the same as a standard desktop.
The Weaver Xtreme Mobile menu is one of the best available. Instead of creating a potentially huge single list of menu choices as found on most other WordPress themes, the Weaver Xtreme mobile menu is a true collapsing menu, and is among the easiest menus for mobile users to use.
An Overview of Mobile Friendly Website Design
Responsive Design
This section will explain some of the technical details of how mobile devices are supported. You may have heard the term “Responsive Themes” to describe themes that support mobile devices. Responsive design allows the content of any website to automatically adjust to the size of the display screen. You can easily determine if a website is responsive from a desktop browser by using the mouse to make the display window narrower and narrower. If the site is responsive, the images will shrink automatically to fit in the window. As the window gets smaller and smaller, some content (such as sidebars) will rearrange itself, or disappear altogether.
All this magic is done entirely by using appropriate CSS styling, and special CSS rules called “@media” rules which allow the site to use different CSS rules depending on the width of the site. The other major component of responsive design is using relative sized for content such as font sizes or images. As a rule, using fixed pixel sizes (px) for elements will render the site non-responsive. While it can still be appropriate to use fixed px sizes for some items with small widths, in general all sizes are replaced by percentages (%). Then as the screen size shrinks, content will adjust automatically.
One of the big advantages of a totally responsive design is that it depends solely on the width of the display screen. It is not necessary to know if the site is being displayed on a specific device or device type. Weaver Xtreme‘s design is totally Responsive at its heart.
Advantages of Pure Responsive Design
- Works with all WordPress cache plugins.
- Will display nicely on any mobile device, as well as respond as user shrinks desktop browser.
- In general, you will pay less attention to mobile vs. desktop content visibility. Responsive mode has some ability to selectively display content depending on device, but it is all based on the display width of the mobile browser. Anything you “hide” for a mobile browser will also be hidden on a narrow desktop browser window.
- View what your site will look like on mobile devices simply by shrinking your browser window.
- Most modern mobile browsers will not actually download content that is hidden for their specific screen width, so responsive display is very efficient.
Mobile Device Pure Responsive Custom CSS
When designing for responsive display, you must always use relative sizes: percent, ems, and so on. Never use px for anything other than a few pixels of fine tuning placement..