by-expression.com | Thoughts on the Web

Time 2021-08-09 09:43:00

Web Name: by-expression.com | Thoughts on the Web

WebSite: http://by-expression.com

ID:186211

Keywords:

com,expression,by,

Description:

Responsive CSS Menu by cdwise 8. 一月 2017 20:05 Given the interest in responsive design I've been seeing I thought I'd show you how to create a simple horizontal menu that turns into a stacked vertical menu on cellphones and other small format devices.I'm going to begin with the CSS 3 Horizontal menu tutorial.Then create the @media styles so that when viewed on a cellphone or other device.Move to External StylesheetTo accomplish this the first thing I would do is to move the existing styles to an external stylesheet.To do that right click on the local site folder you are working in and create a new empy css file. Typically I would name by stylesheet the same as the website. In this case I've named it "responsive.css".Now from the Folder list grab the newly created stylesheet with your mouse and drag it over the design portion of your open page in the document window and drop it.This will create the link link href="responsive.css" rel="stylesheet" type="text/css" / to the external styelsheet for you. Now when you look in the Manage Styles panel you will see three sections. The first "Current Page" section refers to all the styles that we created for page layout and the existing menu. The second "Current Page" section applies to the conditional IE 8 and lower styles. Finally, you will see an empty "responsive.css" section. If you select all the styles in the first Current Page you can drag them down to the responsive.css page. This is the fastest and easiest way to move your styles from the page to an external stylesheet.Alternative StylesThis is the point where you have to make a decision on what changes you want to make to your site when it is viewed on a mobile device. There are several ways you can send a separate set of styles to different devices or screen sizes.@media screen and (max-width: 480px) in the head section of your page works well when you only need to over ride a few styles but it is cumbersome to maintain.Using a media query to send a secondary stylesheet which is the method we'll be using here. link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" / Finally, using javascript or jQuery which is more difficult but maybe necessary if you are using dropdowns, flyouts or other more complex menus.Since Expression Web design view is limited in what it can do, even the styles used in the menu do not render correctly in design view.does not understand or render @media queries I find it best to start with regular styles in the head section below the conditional comment section for IE 8 and below. That way I can set a temporary width of 480px for the site container to see the affect in design view and when previewing locally. Now you will have an approixmate view of what the page will look like as you create the styles and a better view when you preview in browser. With a new size on the container you can see that we need to make changes.Just by adding:#nav a { display: block; }You can see that the design view display already looks better while it is almost acceptable in the browser:What makes this unacceptible in my view is unequal margins with the left side being away from the side of the viewport. This is another decision point. One option is to keep them as rounded buttons but to center them in the browser by adding:#nav ul { margin: 0; padding: 0; }Which gives us:Alternatively you can leave padding on the #nav ul at 0 and remove the rounded borders by adding "border-radius: 0;" to the #nav a in our new head section style block:My personal preference is for the edge to edge display but yours may vary.Whichever you choose is is now time move these styles:either to an @media head section: style type="text/css" @media screen and (max-device-width: 480px) { #container { width: 480px; } #nav ul { margin: 0; padding: 0; } #nav a { display: block; border-radius: 0;} } /style Or you can move them the bottom of your current stylesheet which is what I have done. You should also be able to an external stylesheet but when I do so it seems to break in IE 10 and Windows Phone. If you want to try it the syntax is: link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="small-device.css" / One Last ChangeBefore you start testing on your mobile device let's make one more change and that is to remove the 480px restriction on the width in your mobile styles and change it to either 100% or 96% if you want a bit of the purple sides to show. That way it will resize to fit the width of your mobile device screen.If you want you can also set break points for other common device sizes like 800px for some tablets in portrait orientation. Have fun playing playing with your site.Try the finished page with your browser or mobile device.One last note, Internet Explorer below IE 9 doesn't support media queries so if you are concerned about resizing your layout for various browsers sizes in older versions of IE you can use http://code.google.com/p/css3-mediaqueries-js/though frankly I don't see the need. 3e59ef42-3ed9-4293-82d0-88de96a12f52|2|1.0|96d5b379-7e1d-4dac-a6ba-1e50db561b04 Tags: Simple Responsive by cdwise 16. 四月 2014 21:50 I was perusing the Microsoft Expression Web forum and came across a thread where the original poster was wanting a simple responsive site that doesn t require a lot of javascript. This is actualy pretty easy to achieve if you don t care about older browsers, in this case anything older than say IE 9+ or any other browser released in the last 3-4 years.In a modern browser on the left and in IE 8- in the middle and phone or other small screen on the right. Not one line of javascript is used and the images will also scale according to the space available in the browser s viewport. Note, that the images will not scale in those older browsers but for the most part we are not concerned about the size of the image on the desktop/laptop or other full size browser so that s not usually an issue. As always you should test to make sure that the images and page render as expected or at least acceptably (which I define as attractive and functional within the limits of older browsers).Since I wanted to keep the focus on the template I opted to keep this design very simple and use only CSS for subtle design elements such as a gradient background, rounded corners and shadows on the main content as well as images. Images came from the Microsoft Office Image Gallery so you do need Office if you were going to use the same images. Text was generated using the Monty Python selection at Fillerama since you will have your own content anyway. With those pesky details out of the way here s how I created the page design and what you need to know to use it as the base for your site.My ProcessFirst, I created a new folder in my local test site in Expression Web 4 then created an empty HTML 5 page (you can use XHTML 1.0 Transitional if you prefer since I have not used any HTML elements in this template.) Name it whatever the default document is on your hosting server, in my case that would be index.html. If you do not currently have a site create a new one using Site New Site and selecting either 1 page site or empty site and add an new blank html page. Make sure you are working in split view so you can see both the code and design view.Second, I copied the text generated by Fillerama into the code view section between the body elements. I changed the default title text and added an h1 to the top of my page for a header/masthead section.Next, I wrapped a div around all the content so that I could style the content area. While I was at it I also wrapped a div around the text that would be the header, an empty div below that for navigation then one around the content, finally another around each of the sections that would make up the two columns. If I was not concerned about any version of IE below 9 instead of using div for many of these I d use footer , header , nav and section but I do want the page to display more or less correctly in older browser so I have stuck with div . If you want to see what HTML 5 elements your target browsers use check out Can I Use. Finally, I added an unordered list of hyperlinks that would become my menu and dragged the images I planned to use to the appropriate location in the document.Other than the application of CSS classes IDs if you look at the source code the demo page is how the page ' looks at this time. I posted an image of how the page will display if for some reason none of the CSS is processed so you can see that the page is functional if not very attractive. You can always check how your page will look by either turning off CSS using your browser s tools when you process the page or by commenting out your styles (in the head section or link to external file.)Adding Body StyleFor me I always start with the basics aka defining the body element with a font and colors that will be used as the page default. Since I like to honor whatever the visitor s settings are my font-size is set to 1em. Personally, I m not a fan of small text on web pages since my high resolution screens is optimized for my personal preferences so anyone s assumption that the text will be too big just antagonizes me. In addition I set the font family that I want to use on the page. To keep things simple on this template I stuck with a font-family listing that includes fonts commonly found on Windows and Apple devices with generics for a fallback.font-family: "Segoe UI", Tahoma, Geneva, sans-serif;font-size: 1em;If I wanted to do something fancier with type I d use either Typekit from Adobe (part of my Creative Cloud subscription) or Google Web Fonts (free).Next, I set margin and padding then decided on the background color I wanted. In this case a CSS gradient. Expression Web has no built in tools for creating CSS gradients but fortunately Colorzilla s Ultimate CSS Generator works well. Though I prefer to use the Firefox plugin version. After all you should have Firefox installed locally for testing anyway. Simply choose the type of gradient you want with the starting/ending colors. If you don t have a color scheme already and you need help creating one if you have a logo or image you want to use your header simply pick colors from it or use Adobe Kuler to create a color palette for you. Note: Colorzilla s gradient generator will give you a whole lot of css including filters for older versions of Internet Explorer. Since I prefer to keep things simple I only use the W3C version with a background color specified for older browser. If you really care about older versions by all means copy all the css provided with proprietary prefixes for Firefox, Safari, Opera and Internet Explorer.Because some browsers use margin and others use padding I simply 0 both out in my definition. So my full body definition is:body { font-family: "Segoe UI", Tahoma, Geneva, sans-serif; font-size: 1em; padding: 0; margin: 0; color: #000000; background: #066dab; /* Old browsers */ background: linear-gradient(to bottom, #c5deea 0%,#8abbd7 31%,#066dab 100%); /* W3C */ }Set off the ContentFor my page structure I use IDs applied to the div elements already added to the page. Starting with the #container which gives us the white area for our actual page content. Since I ve removed the margin/padding from the page I add an offset using margins on the container. If you have your Tools Page Editor Options Authoring set to CSS 3 Draft you will have options like border-radius available in the CSS properties panel. Unfortunately, since EW hasn t been updated in a couple years not all CSS 3 properties like linear-gradient are available. Others like box-shadow are available but without any help in the syntax you should be using. Fortunately, there are box shadow generators are available as well. As with the CSS gradient generator I only use the W3C standard format. So that I end up with:#container { border: 1px #2B0082 solid; background-color: #FFFFFF; width: 90%; padding: 0; margin: 1em auto; border-radius: 12px; border: 1px #05517E solid; box-shadow: 0px 0px 30px rgba(0,0,0,.65);}NavigationI m using a variant that is a combination of two of our earlier tutorials Responsive CSS Menu and CSS Simple Menu Bar so I will not walk you through creating it. If you need assistance in understanding the code used I d suggest reviewing those two tutorials.ColumnsThis is another section that reuses CSS from earlier tutorials but suffice to say the ID names should make it self explanatory. I can t emphasize too strongly how important it is to use meaningful names when you are creating you styles.Misc CSSThere are a few classes that I always use which illustrate why consistent meaningful naming conventions are important. These are: fltleft, fltright, clr and sometime clrright, clrleft.For this site because I want the images to scale with the space available to for the page to render in. Since I could easily image situations where I would not want to change the size/scale of an image I add a scalable class that is restricted to images.img.scalable { height: auto !important; width: auto !important; max-width: 100%; border-radius: 5px;}For square images I created another class that would add a border and shadow that would mirror the content section style..fancy { border: 1px solid rgba(255,255,255,.2); box-shadow: 0px 0px 30px rgba(0,0,0,.65);}In modern browsers you can apply more than one class to an HTML element. Just remember that the same inheritance rules apply so the order you use them in is important. Older browser will only render the first class in the list. img alt="whatever" height="420" src="images/1dunce.jpg" width="300" / Making ResponsiveOnce I have the page looking how I want it in a browser I will move all the styles to an external stylesheet and attach it to the page. I leave a styleblock in the head section after the external stylesheet link which if I turn the page into a DWT will be in a separate editable region block so that I don t have to worry about inheritance issues for page level styles.Now that I have all my CSS in an external stylesheet I add an @media section which I always comment so I know what media I am targetting./*1 Column for Narrow Browser Windows and Smartphones in both orientations*/@media only screen and (min-width: 0px) and (max-width: 700px) {/*media styles go here */}Now I look to see what needs to be changed to reflow the page and navigation to better suit a small viewport. In this case I want the page to linearize and the menu to become a block instead of wrapping which means there are 4 CSS definitions that I need to change to accomplish my goal. They are setting the #container from 90% to 100% (though this is not critical) but resetting the #maincol is along with removing the float. For the #sidebar you need to remove the 72% left margin and reset the #nav a to display block so the entire width of each hyperlink section will respond to click/touch. The CSS to do this is simple:/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/@media only screen and (min-width: 0px) and (max-width: 700px) {#container { width: 100%;}#nav { margin: 0; padding: 0;}#nav a { display: block; padding: 0;}#maincol { width: 100%; float: none;}#sidebar { margin-left: 0;}}What is probably the most important thing to remember with a media style block is the containing set of {} for the @media definitions. Leave off either the opening or closing curly brace and your media styles will fail.FinalDownload the Simple-Responsive.zipof the folder I used for customizing or following along to create your own version. For another simple responsive page take a look at http://by-expression.com/post/2014/03/10/Redesign-Day-2 for the single page resume site remake. 888204e6-1abd-49ab-9c1e-016f664fbf45|42|3.1|96d5b379-7e1d-4dac-a6ba-1e50db561b04 Tags: html, css3, template, tutorial CSS | Templates | Training | Tutorial Redesign–Day 7 by cdwise 15. 三月 2014 19:29 Okay, I initially said we weren’t going to do any WordPress themes but after consideration and looking at some of the sites submitted I decided to show how a few simple changes to a Wordpress preinstalled template can personalize a site. Site is: needhelp4mac.com Which uses the twentyeleven theme. As submitted it looked like By uploading a custom image for the header it already looks different: But that sure takes up a lot of space so scrolling down from where uploaded the image to where it says Header Text and uncheck the option to display it: Results in: Finally, by adding the following CSS to a custom stylesheet:.custom-background { background: rgb(249,249,251);/* Old browsers */ background: linear-gradient(45deg,rgba(249,249,251,1) 0%,rgba(215,214,219,1) 19%,rgba(249,249,251,1) 49%,rgba(215,214,219,1) 87%,rgba(249,249,251,1) 100%);#page { box-shadow: 10px 10px 5px #A7A7A9;}We get a nice drop shadow effect on the page with a diagonal gradient background, all done with CSS :Not including the time to create or edit the image used you have a custom look in less than 10 minutes. 0d83bf35-f528-43cf-ba7e-cbbe6c0bf4c0|33|3.0|96d5b379-7e1d-4dac-a6ba-1e50db561b04 Tags: CSS | Web Design | Training | Mac Redesign Day 6 by cdwise 14. 三月 2014 13:18 The majority of the websites submitted for redesign were genealogy sites, either for individuals or clubs like our day 3 site. Today we are redoing an individual’s personal site for themselves and their family. Foster, Colenso, Drummond, Leeman and Ussher This site was selected from the ones submitted because I’ve never seen a site that wasn’t a big database driven content management based site that had 4251 lines of HTML and scripting code. I suspect that this non-standard doctype and the comment code below it explain many of the issues I see in code view: !DOCTYPE HTML PUBLIC"-//IETF//DTD HTML//EN !--This file created 03:47 13/12/2008 by Claris Home Page version 2.0-- Even after removing the extraneous lines there was still nearly 1,000 left which even for a page as long as this one is means a lot of lines. In doing the initial clean up there were 93 lines of p /p where empty paragraph elements were used for spacing. As mentioned in reviewing an earlier site this can lead to very inconsistent display cross browser. Do not use the spacebar or enter key to create whitespace on a web page. Use margin or padding depending on how you want the space to be created. In addition the freefind.com search form encompasses all most all of the content on the page which is not how you would normally implement a form of any sort, particularly if you wished to style it to blend in with your site. So for the purposes of this redesign it will be omitted. The other issue I see that is most likely related to the generator program used are non-standard html attributes like: x-sas-useimageheight="" x-sas-useimagewidth="". Something that really should be avoided if you want consistent cross browser rendering. Also, spaces in file names which require encoding so that the empty space is replaced with a %20 code. If the encoding by the editor used ever fails then the link to the image or file will be broken. One thing that was done right is the use of alt attributes on the navigation images. Without which anyone who could not read the blue on purple text would not be able to use the menu to navigate through the site. I have to admit that cleaning up the code on this site took far longer than any of the others we have redesigned. Not only was there a lot of strange propriety code and blank lines but tables were improperly used. Not only were there nested tables and content in tables that shouldn’t have been but separate tables when the content logically should be in one continuous table. Often there were paragraphs inside of table cells with br making it appear as if the table was properly created with each line in a separate td . Which means the tabular data as shown in the screen shots below should be marked up properly. Colors Looking at the table on the left side an attempt to color code the generations was made which does seem like a good idea but sadly it doesn’t appear to have been implemented when you look at internal pages. Instead of being colored by generation or time looking at: Color coding seems to be by family since looking at the Colenso the entire background is a bright purple with dates listed from 1641 to 1921. The colored backgrounds make it very difficult to read, particularly the dates as you can see in the image above or on the page itself. What I had expected was something more like this (Colenso family information that was in purple in the above screenshot): Note: I have no clue which generation each section belongs to so sort of used my best guess. This would still create a colorful site so we took the opportunity to make sure that colors were in the same color hue values instead of having warm and cold versions of the same color randomly interspersed in the generation color coding table. Final Design One thing that really bothered me, the variety of purples with some of them on the blue side of the purple spectrum and others on the pink/red side. While I understand the desire to use the Welsh flag the primary red/green colors simply do not go with purple. Fortunately, there are other Welsh symbols that work better like the Prince of Wales feathers and daffodils. Even leeks would be a better option if any shade of purple is to be used as the primary color. By switching from the Welsh Flag to the Prince of Wales Feathers the clash of colors goes away. Using yellow daffodils would be another option since purple and yellow are complimentary colors. The other thing that we did was replace or resize some of the images. The background was replaced with a diagonal css gradient in the site owner’s favorite color – purple. By keeping all the purple elements in the same color space we get a semi-monotone design that has a variety of purples without clashing. You can view it at wizerways.net/mandxIf you wish to see how the first set of Colenso family members look it at mandx/surname.htmlNote: only the first table has been converted to a properly marked up table. 7dd5cba3-6897-4fa2-9627-1ac0cb777901|47|3.1|96d5b379-7e1d-4dac-a6ba-1e50db561b04 Tags: CSS | Training | Web Design | Dreamweaver | Expression Web Redesign Day 5 by cdwise 12. 三月 2014 23:12 Our Day 4 redesign is TADA Productions, a non-profit theatre in Lincoln, Nebraska. The first impression we had when viewing the site “hello 1998”. The ticket images for the menu are sort of cute but reminds me of something you’d see at a production in the church reception hall, not a professional company. There are so many issues with this site that this review can only touch on the worst issues with the site. Like many people I have a high resolution computer screen and found the text hard to read. The theater address is in such a light font it broke up while the last line of text was so small as to be impossible to read. As a result I went to resize the text using my browser tools (Firefox “View Zoom Text Only, Internet Explorer “View Text Size”) and nothing happened. On closer inspection I discovered that almost all the text on the page is contained in an image. Putting all your text in an image creates a host of problems not limited to: Accessibility – as you can tell from the image to the right without images there is no content for the visitor. While some site owners might say, “so what, blind people are not my target audience”. But many people who are sighted browse with the assistance of screen readers either because they have dyslexia or find reading text difficult due to a physical condition such as macular degeneration. Besides which most governmental entities from municipal governments all the way up through the state and federal level have accessibility requirements. While they can’t force a personal site to be accessible if you get any sort of federal, state or city money accessibility is part of the package for grant money. Even many art councils and other funding sources require that those they fund be accessible to the disabled including both physical premises and websites. Google, Bing other search engines - are the biggest and often most important blind person looking at your website. Looking at the screen capture above right to see exactly what search engines and anyone else who can’t read the content from images sees when they visit this site. Search by production name for plays in Lincoln, Nebraska and this site doesn’t show up in either Google or Bing though their facebook page did. Usability Framesets like the one used on this site not only went out of use over a decade ago they prevent the visitor from being able to bookmark an individual page such as a particularly play they are thinking of attending. It also means they can’t send a link to a friend to encourage them to attend the play either. Besides there is absolutely no reason using modern template methods that the exact same look could not be done without using frames. Movement on a website attracts the eye which means that the Flash slide show in the top frameset will distract the visitor from whatever content is in the main frame. In addition, the Flash slideshow did not always work properly in Internet Explorer. Far better solution would be to use a modern css/javascript slideshow which also contains information on the productions. One Mandatory Fix Get real content on each page, and by real content we mean text as text. That way people can actually read about the theater and its productions. Search engines can find the site, index the productions and let people find the site. This could easily be done without changing the look/feel of the site hardly at all as you can see from the screen shot of a minimalistic makeover that uses the same design elements but brings content to the forefront in a useable format. While the site still looks like a 1990 something website removing frames and putting real text instead of all images or worse yet images of text makes the site far more visitor friendly. Better Yet Bring the site out of the 1990s and get rid of the flash header. Put a slide show that has each of the productions with information about the production on the slide in plain text. I chose a different slideshow from the one used on the astronomy site just to feature a different type but the exact slideshow that would best showcase their upcoming productions is up to the theater. Finished version with slideshow The html5-slideshow-maker used is the free version with credit both in the head section and in the last slide so if one of its 60 templates is used I would suggest purchasing the application to remove those credits and give you a few more customization options. At $14.95 (mac) or $19.95 (windows) for a full license the price is certainly reasonable for the function it provides. 31a544f1-bb4a-4967-b604-15a61559fcf3|18|3.2|96d5b379-7e1d-4dac-a6ba-1e50db561b04 Tags:

TAGS:com expression by 

<<< Thank you for your visit >>>

Thoughts on the Web

Hot Websites