Skip to main content

Creating a mobile-friendly web page with Dreamweaver CS5.5

Acknowledging the rising popularity of smart phones and tablet computers, Adobe has begun to integrate the ability to create mobile content across its entire Creative Suite and Dreamweaver is no exception. One feature, which was introduced in Dreamweaver CS5 and improved in CS5.5, is support for CSS3 Media Queries.
Media Queries allow web designers to create style sheets based upon the screen size of the device used to view the page. It’s easier to understand by looking at an example:
@import url("tablet.css") only screen and (min-width:321px) and (max-width:768px);
For the query above the style sheet, tablet.css will be used only for devices with a screen width between 321 and 768 pixels. Larger and smaller devices will ignore tablet.css.
Simply stated, media queries make it possible for a web page to use separate style sheets for phones, tablets and desktops (and even screen sizes in between). My personal preference is to create a single style sheet for all devices and then use media queries to overwrite existing styles and create new, device-specific styles as needed. This also helps to avoid problems with older browsers that don’t support media queries.
I’ll work through a simple example. Once you understand the concept, you’ll be able to adapt more challenging designs for mobile use. I’m going to assume you have a basic understanding of Dreamweaver and HTML/CSS so I won’t be going into a lot of detail on the steps that aren’t directly related to creating media queries.

Site Setup

Note: Under Local Info in the Advanced Settings tab of the Site Setup dialog you will notice a field for Site-Wide Media Query file. Ignore it for now. It only works if you have an existing media query file that you want to use for your site.

Create and save a new HTML page.

For this example we’ll work with Dreamweaver’s built-in 2 column liquid, left sidebar, header and footer layout and save the CSS to a new file in a folder named css. Using a liquid layout is not necessary but will allow the layout to maximize screen usage at all sizes.

We’ll make 4 changes to the default layout:

  1. Change the .container width property to 90% to better use available screen width on small devices.
  2. Change the .container max-width property to 960px (This isn’t necessary but I don’t like reading very long lines of text).
  3. Change the .container min-width property to 760px. Note: Since we’ll be setting up rules for smaller screens, this would seem to be unnecessary but it’s useful for older browsers that don’t support media queries. The value of 760px will better accommodate the media queries we’ll be setting up.
  4. Add a 960px wide image to replace the image placeholder in the header.

Dynamically size an image

The header image creates our first challenge. This image will be too large to work with mobile devices. We’ll solve this issue by deleting the image height and width attributes from the html and sizing the image using CSS.
Property Inspector
Fig. 1: The Properties Inspector with image selected and the width and height attributes deleted.
  1. With the image selected delete the height and width attributes in the Properties Inspector (fig. 1 above).
  2. Next, in the twoColLiqLtHdr.css file, create a new style for the header image:
    .header img {
     width:100%;
    }
By removing the height and width attributes from the menu tag and using a percentage value in the CSS width property we cause the image to resize dynamically as the width of the page changes.

Add media queries and the device specific CSS files.

Media Queries dialog
Fig. 2: The Media Queries dialog
  1. Select the Insert>Media Queries menu item
  2. In the Media Queries dialog: (fig. 2 above)
    1. Under Write media queries to click to choose the Site-wide media queries file option (you can choose to save the queries to the current document but saving them to an external file makes them available for all of your site’s files).
    2. Click the Specify button to create and save your media query file. I saved mine as media.css (you must save the media query file as a .css document) in the same css folder where I saved my main CSS file, twoColLiqLtHdr.css.
    3. Leave Force devices to report actual width checked.
    4. In the box below, click the Default Presets button in the lower-right corner. This will define three media queries (for desktops, tablets and phones) but you’ll still need to create and save a CSS file for each of the queries.
    5. Create the CSS files
    1. Select the Phone query from the list if it’s not already selected.
    2. Under Properties at the bottom of the dialog:
      1. Accept the defaults for Description and Min and Max Width.
      2. Choose the Create new file menu option and click the folder icon to create and save your phone-based CSS file. I chose to name my file simply phone.css and saved it in my css folder.
    3. Repeat the steps above to create CSS files for Tablets and Desktops (as you probably have figured out by now, I called mine tablet.css and desktop.css and saved them in my css folder). 
    4. Click OK to dismiss the Media Queries dialog.
Warning: Since we want the style rules in our media query files to overwrite style rules with the same names in the twoColLiqLtHdr.css file, the link to the media query file (media.css) MUST appear after the link to the main CSS file as shown below. It should happen that way by default but, if the order is reversed, you’ll need to fix it in the code.
<link href="css/twoColLiqLtHdr.css" rel="stylesheet" type="text/css">
<link href="css/media.css" rel="stylesheet" type="text/css">
Note: After you’ve played with Adobe’s default media queries for a while you may want to edit them or add more. You can do that at anytime by choosing the Modify>Media Queries… menu option.

The tablet.css file

Since the layout I chose was designed for larger screens, I’ll ignore the desktop.css for now and concentrate on tablets and phones.
Let’s begin with tablets. The first thing we need to change is the min-width property for our container div. It’s currently set to 760px in twoColLiqLtHdr.css. Since the tablet media query is used for screens from 321 to 768 pixels a value of 320 pixels would make more sense. Unfortunately the min-width property is not supported in Dreamweaver’s Rule Definition dialog so we’ll need to add the rule directly in the code of tablet.css.

Container width

Related files toolbar 
Fig. 3: Split View with tablet.css selected in the Related Files toolbar and displayed in the Code section of the Document window.
  1. Make sure you are working in Split View and click the tablet.css link in the Related Files list at the top of the Document window. The tablet.css file will be displayed on the left in the code portion of the Split window (fig. 3 above).
  2. Add this rule to the file:
    .container {
     min-width: 320px;
    }
You should be able to see the effect of this rule by switching to Live View and resizing the document window. Notice that the layout will now resize all the way down to 320px wide.
Tip: You can test your layout at various common screen sizes by selecting a size from the menu revealed by clicking on the down arrow at the right of the Multiscreen button in the Document Toolbar at the top of the Document window (fig. 4 below). You can also preview the layout at multiple screen resolutions simultaneously (Fig. 6) by clicking the Multiscreen button itself.

The Multiscreen menu
Fig. 4: Selecting a preview screen size from the Multiscreen menu.

Sidebar and menu width

Ignoring the problems with the phone layout for the moment we still have an issue with the tablet layout. On narrower screens the left sidebar and menu are very cramped. We can solve that by removing the sidebar float and making it full width:
.sidebar1 {
 float: none;
 width:100%;
}
Now the sidebar appears above the main content rather than to its left.

Nav button width

Full width the nav buttons are rather wide. We can arrange them in two columns by floating the list items left and setting their width to 50%:
ul.nav li {
 float:left;
 width:50%;
}

Content width

Finally, the width of the content div is 80%. We need it to fill the full width of our layout so we’ll add this final rule to tablet.css:
.content {
 width: 100%;
}
Our finished tablet.css looks like this:
@charset "utf-8";
.container {
 min-width: 320px;
}
.sidebar1 {
 float: none;
 width:100%;
}
ul.nav li {
 float:left;
 width:50%;
}
.content {
 width: 100%;
 }
And on a 480 pixel wide device our layout now looks like Fig. 5 below.

480px wide preview 
Fig. 5: The page previewed at 480 pixels wide showing the effects of the tablet.css style sheet.

The phone.css file

We need similar rules for phone.css with the a couple changes: The min-width of the layout will be 200px, which should accommodate even pretty dumb smart phones. And we’ll let the buttons be the full width of the layout. So our phone.css file will look like this:
@charset "utf-8";
.container {
 min-width: 200px;
}
.sidebar1 {
 float: none;
 width:100%;
}
.content {
 width: 100%;
}

The finished page

Multiscreen preview
Fig. 6: A multiscreen preview of the page showing the different layouts for phone, tablet and desktop devices.
Figure 6 shows the Multiscreen preview of our customized layout. With just a few simple style rules we’ve created a layout that comfortably accommodates mobile devices and still looks good on a desktop computer.
Of course if this was an actual project rather than a simple demo we’d probably want to customize headline sizes and other features for maximum readability on smaller screens but, now that you understand the basics of CSS media queries, that should be a snap.
Good luck creating your own mobile friendly site. If you’d like to experiment with a more elaborate project you can download my free Dreamweaver Multiscreen template. And, if you have any questions about this tutorial, ask them in the Dreamweaver Club forum and I’ll be sure to follow up.

Comments

  1. Hi. I want to record several of one's posts and thank
    you to

    My homepage - car insurance for women

    ReplyDelete

Post a Comment

All types of Comments are welcome

Popular posts from this blog

SEO Traffic v2.0.20041213

DOWNLOAD SEO Traffic v2.0.20041213 simplifies the process of generating search-optimized web pages by automatically creating a large number of them using premium keywords from Overture, Google, and Espotting. Instead of spending countless hours meticulously crafting keyword-optimized pages, why not let SEOT do it for you, completely free of charge? This tool offers the perfect balance of flexibility for professionals and simplicity for beginners. Say goodbye to manual labor and let SEOT Traffic handle your page creation effortlessly.

Understanding Online Work From Home Businesses

Millions of people are searching the internet daily to try and find the right opportunity to start a business at home making money online . Don't believe me?; just go to your favorite search engine and search for phrases like ' work from home ', ' work at home ', ' online businesses ' and things about working from home . You will see thousands of website choices in the results. If using Google.com you will see on the right panel lists of websites under the heading 'Sponsored Links'. Sponsored links are paid for on google by using a tool or website at www.adwords.com . Many marketers are paying a lot of money to advertise this way and rookies need to be careful as the costs can get out of hand. Sponsored links are a good indication of what the competition is doing and also of the viability of the product. The most popular method of making money online is through affiliate marketing. What this means is that you can become an a...

What are the revenue sources?

There are two basic sources of income your website will have: Affiliate Marketing and Google Adsense. How you will get paid and from who? Income from Affiliate Marketing Companies that offer affiliate programs pay those who promote them in two ways. In the first case, upon the sale which comes from your affiliate link, your  commission automatically goes to your paypal account.  For example, if through the affiliate link one buys a book priced 20 USD and the commission is set at 25%, then, at the time of sale, you recieve in your Paypal account USD 5 and the remaining 15 goes to the owner's Paypal account . In the second case,  the payments are made after a short time . For example, the company "Commision Junction" manages the affiliate programs of thousands of companies. Among them are : TOSHIBA, HP, YAHOO, LEXMARK, DELL … So when someone promotes products of these companies and qualifies a commission, then periodically, o nce or twice a month , the company ...

Search Marketing Tips For Yandex, Russia’s Top Search Engine

Globally, Russia is the eighth largest market of Internet users, and as we know, Google is playing second fiddle to Yandex , which is currently the main search engine in Russia with well over half of the market share. Yandex makes hundreds of millions of dollars in revenue and provides a broad range of online services (email, free hosting, PPC advertising network (Yandex Direct), maps, news, weather, and dictionaries). Comscore ranked the web property first in Russia with 34.9 million unique visitors in August 2010 , It is also the 25th site in the Alexa Top 100. What’s more, Yandex is the default search provider in the Russian version of Firefox. Russian Language In Connection With SEO If your company is turning eyes to the Russian market, you might be considering  making a Russian-language version of your website to attract more local customers. You could have built your SEO strategy based on your experience in the English-speaking Internet, but if you’re buil...

GOMO: Create a Professional Mobile Site to your Blog & Website for Free

Some report says By 2013 more people will use their mobile phones than PCs to get online. 80% of mobile internet users abandon a site if they have a bad user experience. Mobile sites are designed for the small screen, with the needs of mobile users in mind. A mobile-friendly site can help your blog growth and connect with customers and increase sales. But a bad mobile experience can drive your customers to your competition. GOMO (Google Mobile)  partner with Duda mobile providing online tool to make your desktop website more mobile friendly with professional templates and free hosting. Duda mobile premium service free for one year(value $108) with unlimited email and phone support. How to: Step 1: Go to GOMO site through this link  www.howtogomo.com .  Then Enter your site URL in the specific column like below image. Then hit MAKE MY SITE MOBILE button.  Step 2: It redirects theme window, s elect your site theme fr...

WORK AT HOME & MAKE EASY MONEY

Assuming that you've worked at an office five days (or more) for every week for more drawn out than a few years, its likely you fantasize about telecommuting. Perhaps you recently do telecommute infrequently, however are finding it hard to stay centered. I'm here to separate it into the most significant fundamentals for kicking off effectively. As a full-time independent author who recently passed her two-year commemoration, I've absolutely had my ups and downs regarding the matter of renouncing office (however not dependably weekend) warrior status. Gain experience from my accidents, go onward and flourish! Who, Who, Who Are You? Telecommuting isn't for every living soul. I don't say this to sound unrivaled or selective, daiquiri ice enhanced dessert isn't for everybody either. Whether its set to truly work for you is all about how you like to use your day, and your capacity to autonomously supervise your time. You may as well inquire as to whether you sup...

5 Money Making, Recession Resistant Home Businesses

Ideas for Starting a Successful Business in a Down Economy In a recession, or in other times when the economy is lagging and jobs are being lost, most people consider it to be a very poor time to start thinking about starting a home business. However, tough economic times can also present great money making opportunities to those who prepare and are willing to take a chance on being successful. Starting a home business in the midst of a recession may seem scary, but not having a backup plan in case you should suddenly lose your job can be even more scary. Here are 5 relatively recession resistant, money making home business ideas to consider. 1. Internet Marketing Services Internet marketing services are in high demand in an industry that is growing by leaps and bounds. Anyone who has an online business presence needs to know how best to effectively market their website on the Internet and most will consult an Internet marketing firm for assistance. That...

STRATEGIES TO INCREASE WEB TRAFFIC

Site improvement ( SEO ) system and best practices change always as web crawlers like Google press on to take off new calculation overhauls, for example Panda and Penguin. The effect is that marks and advertisers can no more extended take alternate ways. It's all about building trust and driving quality site activity that will effect the end result. This originates from enhancing navigate rates for natural list items, which is the place the underutilized capacity of rich pieces becomes an integral factor. A rich scrap is basically only a minor outline of the information that a client can hope to see on a web site page. Rich pieces have no immediate impact on enhancing rankings, however they add huge worth to a natural posting in the web search tool results and can incredibly expand site activity. They can come in the manifestation of Google creator qualified data, appraisals and surveys, occasion notices and items. Rich pieces enhance navigate rates breathtakingly by en...

Adding a Neat CSS3 Dropdown Menu in Blogger

Presenting a remarkable dropdown menu with pure CSS3, originally created by Andrew from script-tutorials.com. I have made slight modifications to ensure its seamless integration into our Blogger template. Located in the upper right corner of this menu are the contact links and social media icons for Facebook, Twitter, Google Plus, and RSS feed. Directly below these links, you'll find the dropdown navigation menu, while the search form resides on the left side. To enhance the user interface and interaction, the CSS dropdown menu incorporates subcategories with elegant CSS3 effects such as box-shadow, text-shadow, and a smooth transition triggered by hovering over the parent link. Please visit this demo page to see it in action. Adding the CSS dropdown navigation menu in Blogger Step 1. Access your Blogger Dashboard and go to Template > click on the Edit HTML button Step 2. Click anywhere inside the code area and press the CTRL + F keys to open the search box. Type the tag be...

10 Important Tips To Increase Fans On Your Facebook Page

The first direct marketing tool that one can think of today is Facebook. It’s gone from being just another social network, to being ‘The social network’. No just that, it’s now great medium for business. Simply speaking, this is because facebook is where people are. And if they are there, why not get them to notice who you are and what you do? These virtual profiles belong to real people, with real needs. So, here’s some quick ways to increase the number of fans on your business page: 1. Cater To Your Target Group The first rule is to know and target the people who could be interested in your products or services. So, everything you do should be for the people who will actually be your clients. 2. Start Activities Once you have your TG in mind and you obviously know all the plusses of your products, so start activities promoting the same. You need to start interacting or creating activities that people enjoy and like to participate in. A way to encourage part...