Redesign3 BannerFull | ban pixels wide max

Slides:

Advertisements

Similar presentations

Coding a Responsive HTML

Advertisements

ECA 228 Internet/Intranet Design I

1 After completing this lesson, you will be able to: Add a header and footer to a worksheet. Change margins and center a worksheet. Change the orientation.

Tutorial 6 Creating Fixed-Width Layouts

CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.

Creating a Poster It is easier than you think! 1.

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

CHAPTER 11 Tables. How Are Tables Used Data Display  Very tidy and very useful Better Text Alignment  Putting text in tables allows you to format indents.

Tutorial 6 Creating Tables and CSS Layouts. Objectives Session 6.1 – Create a data table to display and organize data – Modify table properties and layout.

Principles of Web Design 6 th Edition Chapter 7 – Page Layouts.

ITP 104.  While you can do things like this:  Better to use styles instead:

Lecture: Tables. Table Tags (all container tags) establishes a table (________) establishes a row (________) says what’s in the row more than one TD within.

Continued BrokersLink Redesign. General Changes All Headlines, Main Nav options and Sub Nav options will be in the Google font Roboto Slab (Normal 400.

CONCEPTS FOR FLUID LAYOUT Web Page Layout. Website Layouts Most websites have organized their content in multiple columns (formatted like a magazine or.

Responsive design - Bedrock to our site Responsive site templates included.

 Word doc for you to download › Link at the beginning of class › 10 Questions › Answers to be added inline  Post to Sakai when completed › No resubmits.

Images. The Element To place an image on our web page, we use the self-closing element: The src attribute ("source") is required and supplies the name.

 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.

Lesson 05 // Web Design, Layout & Structure 1.Web Design/Designer-Coder Relationship 2.Fixed vs Fluid Website Layouts 3.Screen Resolutions.

ChronoZoom Touch and Low Resolution behavior. Touch vs Low Resolution Touch and low resolution behavior are independent – Example: iPad is high resolution,

Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 5: Working with Tables Kelly L.

Web Design I Spring 2009 Kevin Cole Gallaudet University

INTRODUCTORY Tutorial 5 Using CSS for Layout and Printing.

INFO1300 LAB7 OCT.11TH RESPONSIVE DESIGN. WHAT IS RESPONSIVE WEB DESIGN A mix of flexible grids and layouts, images and an intelligent use of CSS media.

Qmags At The Cutting Edge of Digital Publishing. Mobile (Platform, Specification and Features) Template Elements ( Your home page will be the only unique.

WEB DESIGN PRINCIPLES Dale Blasingame School of Journalism & Mass Communication Texas State University.

Nesting and Floating. Nesting and Floating Elements To make our page content appear the way we want, and to make the best use of screen space, we can.

Creating a Google Site For a Digital Portfolio Purpose.

Navigation grid – Wide desktop 1 Main navigation bar maximum width 890 px (= 4 content columns) 3 text columns, each 256 px wide 51 px margins in between.

Positioning, CSS Layout Ing. Jiří Štěpánek.  Positioning = defining elements placement, size and behavior within a page  Important for creating layout.

CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.

Mimi Opkins.  One of the major benefits of using CSS is that you’re not forced to lay your sites out in tables.  The layout possibilities of CSS give.

Cascading Style Sheets for layout

Nesting and Floating.

Implementing Responsive Design

Concepts for fluid layout

Nesting and Floating.

How to use this SPARKlab Authoring Template (PowerPoint 2008 for Mac)

Introduction to Bootstrap Bootstrap සදහා හැදින්වීම

Advanced CSS BIS1523 – Lecture 20.

Basic Introduction to Portal Designer

Cascading Style Sheets for layout

What’s NOT new? Content URLs Site structure CMS

CS3220 Web and Internet Programming Introduction to Bootstrap

ClubRunner Tutorial Website Designer.

Responsive Design.

Objectives Create a reset style sheet Explore page layout designs

Fixed Positioning.

Box model, spacing, borders, backgrounds

Responsive Framework.

06 | Introduction to Bootstrap

Responsive Web Design (RWD)

Floating and Positioning

Chapter 2 Bootstrap Grid System

Web Design Principles.

CS3220 Web and Internet Programming Introduction to Bootstrap

Nesting and Floating.

CSS Boxes CS 1150 Fall 2016.

Bootstrap 4 December 17, 2018.

Web Client Side Technologies Raneem Qaddoura

Web Client Side Technologies Raneem Qaddoura

Concepts for fluid layout

Cascading Style Sheets CSS LAYOUT WITH GRID

17 RESPONSIVE WEB DESIGN.

Presentation transcript:

Redesign3 BannerFull | ban1 1600 pixels wide max BannerNav | ban3 280 pixels wide BannerContent | ban2 910 pixels wide Left Menu | lmenu ID 600 pixels wide Right Content | right 280 pixels wide Left Content | left 280 pixels wide Right Content 2 | right2 280 pixels wide ListSummary2 ListSummary1

Redesign2 BannerFull | ban1 1600 pixels wide max BannerNav | ban3 280 pixels wide BannerContent | ban2 910 pixels wide Left Menu | lmenu ID 910 pixels wide Left Content | left 280 pixels wide ListSummary1

Redesign1 BannerFull | ban1 1600 pixels wide max BannerContent | ban2 1225 pixels wide ID 1225 pixels wide ListSummary1

RedesignRight BannerFull | ban1 1600 pixels wide max BannerContent | ban2 910 pixels wide Right Content | right 280 pixels wide ID 910 pixels wide Right Content 2 | right2 280 pixels wide ListSummary2 ListSummary1

Horizontal Menu | hmenu Global Elements in Template Identity | dept Horizontal Menu | hmenu Footer | footer

Image Dimensions (maximum) BannerFull BannerContent BannerNav 1600px max 1225px / 910px 280px Maximum width. Images will never scale larger than 1600px. BannerFull fills the width of the browser width and sits directly next to the horizontal menu and header. Beyond 1600px, an optional gradient fill can be set when using the updated Banner Rotation smart form. Depends on Template BannerContent sits directly above content but does not attach to anything. 1225px on Redesign1, RedesignRight. 910px on Redesign2, Redesign3. BannerNav sits directly above left navigation and does not attach to anything. 280px on Redesign2, Redesign3 only.

Breakpoints At 1280px and above All content at maximum width. Then, at 1600px, BannerFull photos reach max and optional background gradient shows. At 992px to 1279px Center content and left menu are narrower. Photo is smaller. At 768 to 991px Content begins to stack vertically. Horiz menu is narrower. Header is normal. At 601 to 767px Condensed mobile header and collapsed horiz menu take effect. Below 600 Mobile layout. Captions over banner photo moves below photo.

Adaptive Images Ektron will generate smaller variations of photos for responsive design if: Original is larger than 250KB Original dimensions exceed: lg = over 1000px wide or 600px tall md = over 700px wide or 500px tall sm = over 400px wide or 400px tall Images with display at these breakpoints: Original = Screen is 1200+ px wide. lg = Screen is 992 to 1199px wide. md = Screen is 601 to 991px wide. sm = Screen is less than 600px wide.