Editing Responsive and Mobile Webpages
Tips for editing RWD websites and templates
Responsive websites (RWD) are more fragile and the responsiveness can be easily compromised by adding the wrong page element or editing the css incorrectly.
Keeping Your Responsive Template Responsive
Key: "MQs" below means "Media Queries".
If your website or web template is either a mobile design, mobi-Hybrid®
or responsive design use the following guidelines while editing.
If You Must Include a Wide Element
- Widths: The maximum width for any item you should add to the pages should be 300 pixels. The smallest smartphone screens are 320 pixels wide. The 20 pixel difference is to allow for the webpage outer margins.
- Bloaty Apps: Avoid adding too many elements, images, video, widgets, to any one page. Page load speed should be considered for better SEO and user experience.
Optionally you can hide some elements on small screen displays using Media Queries in the "media-queries.css" file using "display: none;" css code. Search in your "media-queries.css" for "display: none;" examples like the footer or sidebar hiding.
- Error Check: Error check your html pages, test the Media Queries and also check them with the Google Mobile Friendly Test and Pagespeed Insights. Check your website on mobile devices.
- Images: If you want to add larger images they should be setup with responsive code to stretch to the page width. Templates include some examples of full width images so you can view the source code and css classes used. Also see the responsive image section on Adding Images To Your Pages Using Notepad.
- Tables: Tables can be added but should be no wider than 300 pixels. Optionally use percents for table widths.
- Use percents for widths rather than any fixed widths for elements wider than 300 pixels.
- MQs: Media Queries code may be at the bottom of the main .css file or they may be in a separate file named "media-queries.css". The MQs css code only starts working once the web browser width breakpoint or "threshold" has been reached. See Media Queries support.
- Smartphone Hiding: See Page Elements Not Displaying On Mobile.
- Menus: Too many menu items may look bad. Try to keep your menu titles short and do not add too many. Instead add links to the main body of the pages or use the site map page for more links.
- Editing Tip: Before you edit any html page or other template file, you may want to make a backup copy of the file so you can revert to the last edit you did.
- SEO Tip: For better SEO make sure you have a link directly on the homepage (index.html) to the site map html page. List all your pages on the site map. See Optimizing Your Webpages.
- SEO Tip: If your website uses a top level desktop site and a sub-site inside a "mobile" folder, use different text on the mobile pages for better SEO. Re-write the mobile version articles if possible. Be sure you include a link on the top level homepage that links to the mobile site inside the "mobile" folder.
- Software: While editing using an html wysiwyg editor, do not resize elements or move elements or add wide text boxes. This can easily compromise the responsive code. As a general rule only edit the page text.
HTML editors may add widths to images and that takes away the responsive code. Editing the source code may be a better option.
- About: See What is Responsive Design
If you do need to have a very wide page for a table of text for example that can not be made responsive, remove the meta viewport line in the head section of the page. It is the following code:
<meta name="viewport" content="width=device-width">
This will make the html page non-responsive and it can be zoomed on mobile. Do not do this modification on your home page or "index.html" or it may be bad for mobile SEO.