eBusiness Engineering Responsive Web Design Part 1

•

3 recomendaciones•1,094 vistas

pawelskowronek

Diseño Tecnología Empresariales

Responsive Web Design
Paweł Skowronek
0807883/2

1. What is Responsive Web Design?
2. Mobile vs. Desktop
3. What makes a website responsive?
4. Why websites should be responsive?

Responsive Web Design?

A ﬂexible grid (with ﬂexible images)
that incorporates media queries to
create a responsive, adaptive layout.
Ethan Marcotte

Marcotte, E., 2010. A Dao of Flexibility presentation. An Event Apart, Minneapolis.

Browser Screen Resolutions

January 2000 January 2011

640x480 800x600 1024x768 Higher
1024x768 Higher Other
Other

4%4% 11% 1% 14%

25%

56%
85%

Source: Browser Display
Statistics, w3schools.com

Mobile vs. Desktop Internet Users, 2007-2015E

Mobile Internet Users
Desktop Internet Users
2000

1500

1000

500

0
2007 2009 2011E 2013E 2015E

E - estimated (Stanley, 2010)

What makes a site responsive?

• Flexible/ﬂuid grid
• Responsive images
• Media queries

Flexible/ﬂuid grid

ﬁgure { width: 300px/960px = 31.25%; }
< LiveFront >, 2011

Responsive images
Desktop
Mobile

.square { width: 100%; }

Media queries

@media screen and (max-width: 768px) {...}

Desktop user
Tablet user
Smartphone user
480px 768px 1024px

Source: Elated.com, 2011

Netbook Desktop/Notebook
Tablet
Smartphone
<480px <768px <1024px 1024px

Desktop
1024px<

Why websites should be responsive?

• more portable devices
• more users
• more income!

$References • Marcotte, E., 2010. Responsive Web Design. A list apart, [online]. Available at: <http://www.alistapart.com/articles/ responsive-web-design> [Accessed November 2011] • Doyle, M., 2011. Responsive Web Design Demystiﬁed. Elated, [online]. Available at: <http://www.elated.com/articles/ responsive-web-design-demystiﬁed/> [Accessed November 2011] • w3chools.com, 2011. Browser Display Statistics. w3schools.com, [online]. Available at: <http://www.w3schools.com/ browsers/browsers_display.asp> [Accessed November 2011] • Stanley, M., 2009. Mobile Internet Report. Morgan Stanley Research, [online]. Available at: <http:// www.morganstanley.com/institutional/techresearch/pdfs/mobile_internet_report.pdf> [Accessed November 2011] • Richmond, H., 2011. The Growth of Mobile Marketing and Tagging. Microsoft tag, [online]. Available at: <http:// tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx> [Accessed November 2011] • Simpson, E., 2011. How to Design a Mobile Responsive Website. UX Booth, [online]. Available at: <http:// www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/> [Accessed November 2011] • .net, 2011. 21 top tools for responsive web design. .net, [online]. Available at: <http://www.netmagazine.com/features/ 21-top-tools-responsive-web-design> [Accessed November 2011] • Pettit, N., 2011. Beginner’s Guide to Responsive Web Design. Think Vitamin, [online]. Available at: <http:// thinkvitamin.com/design/beginners-guide-to-responsive-web-design/> [Accessed November 2011] • Wiggins, R., 2011. Responsive Web Design one website, many devices. Handcrafted Pixels, [online]. Available at: <http:// handcraftedpixels.co.uk/> [Accessed November 2011] • Bollinger, M., 2011. Designing for Desktop Web + Mobile - Responsive Design. < LiveFront >, TECH{dot}MN, [online]. Available at: <http://www.slideshare.net/livefront/responsive-design-7877412> [Accessed November 2011]$

Responsive Web Design

Thanks.
Paweł Skowronek

pawelskowronek@me.com

pawelskowronek.me

@pawelskowronek

Más contenido relacionado

Último

Eye-Catching Web Design Crafting User Interfaces .docx

MdBokhtiyarHossainNi

The hottest UI and UX Design Trends 2024

Ilham Brata

Independent Escorts Goregaon WhatsApp +91-9930687706, Best Service

meghakumariji156

Resume all my skills and educations and achievement

210303105569

Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl (Fatehpur ) Call Girls Fatehpur Just Call 8617370543Top Class Call Girl Service Available Call girls Fatehpur powered by my escort service are personalities with charm and friendly nature. These females understand the needs of men and work accordingly ... Nitya salvi is one of the best companion who offer best Jalgaon call girl service at low cost. Get Mobile number ☎️8617370543 , whatsapp details of your Favorite call ... Fatehpur Call Girl escort service is safe and secure. Our escorts are aware of the requirements of our customers and are ready to ensure that our escort services ... One shot: ₹2000/in-call, ₹5000/out-call Two shots with one girl: ₹3500/in-call, ₹6000/out-call Body to body massage with sex: ₹3000/in-call Full night for one person: ₹7000/in-call, ₹10000/out-call Flexibility Choices and options Lists of many beauty fantasies Turn your dream into reality Perfect companionship Cheap and convenient In-call and Out-call services And many more. WhatsApp Chat: 📞 8617370543 Visit The Website : https://www.nityasalvi.com/

Just Call Vip call girls Fatehpur Escorts ☎️8617370543 Two shot with one girl...

Nitya salvi

Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat

Abortion pills in Kuwait Cytotec pills in Kuwait

ab-initio-training basics and architecture

saipriyacoool

原版定制【微信:95270640】【卡尔顿大学毕业证（CU毕业证书）】【微信:95270640】（留信学历认证永久存档查询）采用学校原版纸张、特殊工艺完全按照原版一比一制作（包括：隐形水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠，文字图案浮雕，激光镭射，紫外荧光，温感，复印防伪）行业标杆！精益求精，诚心合作，真诚制作！多年品质 ,按需精细制作，24小时接单,全套进口原装设备，十五年致力于帮助留学生解决难题，业务范围有加拿大、英国、澳洲、韩国、美国、新加坡，新西兰等学历材料，包您满意。【业务选择办理准则】一、工作未确定，回国需先给父母、亲戚朋友看下文凭的情况，办理一份就读学校的毕业证【微信95270640】文凭即可二、回国进私企、外企、自己做生意的情况，这些单位是不查询毕业证真伪的，而且国内没有渠道去查询国外文凭的真假，也不需要提供真实教育部认证。鉴于此，办理一份毕业证【微信95270640】即可三、进国企，银行，事业单位，考公务员等等，这些单位是必需要提供真实教育部认证的，办理教育部认证所需资料众多且烦琐，所有材料您都必须提供原件，我们凭借丰富的经验，快捷的绿色通道帮您快速整合材料，让您少走弯路。留信网认证的作用: 1:该专业认证可证明留学生真实身份 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内，将在公安局网内查询个人身份证信息后，同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料，供国家高端企业选择人才留信网服务项目： 1、留学生专业人才库服务（留信分析） 2、国（境）学习人员提供就业推荐信服务 3、留学人员区块链存储服务 → 【关于价格问题（保证一手价格）】我们所定的价格是非常合理的，而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子我给客户的都是第一手的代理价格，因为我想坦诚对待大家不想跟大家在价格方面浪费时间对于老客户或者被老客户介绍过来的朋友，我们都会适当给一些优惠。选择实体注册公司办理，更放心，更安全！我们的承诺：可来公司面谈，可签订合同，会陪同客户一起到教育部认证窗口递交认证材料，客户在教育部官方认证查询网站查询到认证通过结果后付款，不成功不收费！

一比一定(购)卡尔顿大学毕业证(CU毕业证)成绩单学位证

wpkuukw

原版定制【微信:176555708】【伦敦国王学院毕业证（KCL毕业证书）】【微信:176555708】（留信学历认证永久存档查询）采用学校原版纸张、特殊工艺完全按照原版一比一制作（包括：隐形水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠，文字图案浮雕，激光镭射，紫外荧光，温感，复印防伪）行业标杆！精益求精，诚心合作，真诚制作！多年品质 ,按需精细制作，24小时接单,全套进口原装设备，十五年致力于帮助留学生解决难题，业务范围有加拿大、英国、澳洲、韩国、美国、新加坡，新西兰等学历材料，包您满意。【业务选择办理准则】一、工作未确定，回国需先给父母、亲戚朋友看下文凭的情况，办理一份就读学校的毕业证【微信176555708】文凭即可二、回国进私企、外企、自己做生意的情况，这些单位是不查询毕业证真伪的，而且国内没有渠道去查询国外文凭的真假，也不需要提供真实教育部认证。鉴于此，办理一份毕业证【微信176555708】即可三、进国企，银行，事业单位，考公务员等等，这些单位是必需要提供真实教育部认证的，办理教育部认证所需资料众多且烦琐，所有材料您都必须提供原件，我们凭借丰富的经验，快捷的绿色通道帮您快速整合材料，让您少走弯路。留信网认证的作用: 1:该专业认证可证明留学生真实身份 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内，将在公安局网内查询个人身份证信息后，同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料，供国家高端企业选择人才留信网服务项目： 1、留学生专业人才库服务（留信分析） 2、国（境）学习人员提供就业推荐信服务 3、留学人员区块链存储服务 → 【关于价格问题（保证一手价格）】我们所定的价格是非常合理的，而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子我给客户的都是第一手的代理价格，因为我想坦诚对待大家不想跟大家在价格方面浪费时间对于老客户或者被老客户介绍过来的朋友，我们都会适当给一些优惠。选择实体注册公司办理，更放心，更安全！我们的承诺：可来公司面谈，可签订合同，会陪同客户一起到教育部认证窗口递交认证材料，客户在教育部官方认证查询网站查询到认证通过结果后付款，不成功不收费！

怎样办理伦敦国王学院毕业证（KCL毕业证书）成绩单留信认证

eeanqy

Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We are available 24*7 Booking Contact Details :- WhatsApp Chat :- +91-7014168258 If you're looking for India Call girls you've come to the right place. You'll find some of the most beautiful call girls in our location with. These ladies have pleasing personalities, hot figures, and a passion for physical pleasure. Call girls in India Lucknow Many men have booked them for their erotic and soul-mixing performances, which are sure to leave you with unforgettable memories. #K09 Escort Service India is available in the city for men and women of all ages. They can satisfy your sexual needs and will make your experience even more enjoyable and memorable. Whether you're looking for a blow-job, stripping, lovemaking, or other dirty acts, you'll be able to find a match for your tastes and budget. These highly trained professionals will help you have an unforgettable night. One Shot — 5000/in call (time 1 hour), 6000/out call Two shot with one girl — 8000/in call (time 2 hour), 10000/out call Body to body massage with sex- 8000/in call (time 1 hour) Full night Service for one person– 12000/in call, 13000/out call (shot limit 3-4 shots) Full night Service for more than 1 person — please contact Us —7014168258 We are available 24*7 all days of the year. Call us — 7014168258 Thank you for Visiting.

Top profile Call Girls In Meerut [ 7014168258 ] Call Me For Genuine Models We...

gajnagarg

Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...

instagramfab782445

Pondicherry Escorts Service Girl ^ 9332606886, WhatsApp Anytime Pondicherry

meghakumariji156

High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service

meghakumariji156

原版定制【微信:176555708】【莫纳什大学毕业证（Monash毕业证书）】【微信:176555708】（留信学历认证永久存档查询）采用学校原版纸张、特殊工艺完全按照原版一比一制作（包括：隐形水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠，文字图案浮雕，激光镭射，紫外荧光，温感，复印防伪）行业标杆！精益求精，诚心合作，真诚制作！多年品质 ,按需精细制作，24小时接单,全套进口原装设备，十五年致力于帮助留学生解决难题，业务范围有加拿大、英国、澳洲、韩国、美国、新加坡，新西兰等学历材料，包您满意。【业务选择办理准则】一、工作未确定，回国需先给父母、亲戚朋友看下文凭的情况，办理一份就读学校的毕业证【微信176555708】文凭即可二、回国进私企、外企、自己做生意的情况，这些单位是不查询毕业证真伪的，而且国内没有渠道去查询国外文凭的真假，也不需要提供真实教育部认证。鉴于此，办理一份毕业证【微信176555708】即可三、进国企，银行，事业单位，考公务员等等，这些单位是必需要提供真实教育部认证的，办理教育部认证所需资料众多且烦琐，所有材料您都必须提供原件，我们凭借丰富的经验，快捷的绿色通道帮您快速整合材料，让您少走弯路。留信网认证的作用: 1:该专业认证可证明留学生真实身份 2:同时对留学生所学专业登记给予评定 3:国家专业人才认证中心颁发入库证书 4:这个认证书并且可以归档倒地方 5:凡事获得留信网入网的信息将会逐步更新到个人身份内，将在公安局网内查询个人身份证信息后，同步读取人才网入库信息 6:个人职称评审加20分 7:个人信誉贷款加10分 8:在国家人才网主办的国家网络招聘大会中纳入资料，供国家高端企业选择人才留信网服务项目： 1、留学生专业人才库服务（留信分析） 2、国（境）学习人员提供就业推荐信服务 3、留学人员区块链存储服务 → 【关于价格问题（保证一手价格）】我们所定的价格是非常合理的，而且我们现在做得单子大多数都是代理和回头客户介绍的所以一般现在有新的单子我给客户的都是第一手的代理价格，因为我想坦诚对待大家不想跟大家在价格方面浪费时间对于老客户或者被老客户介绍过来的朋友，我们都会适当给一些优惠。选择实体注册公司办理，更放心，更安全！我们的承诺：可来公司面谈，可签订合同，会陪同客户一起到教育部认证窗口递交认证材料，客户在教育部官方认证查询网站查询到认证通过结果后付款，不成功不收费！

怎样办理莫纳什大学毕业证（Monash毕业证书）成绩单留信认证

ehyxf

Isadora Agency and the UPLI team wanted to redefine how employees especially millennials engaged with own finances. In short, business goals included helping users build credit, maintain a budget, optimize debt and manage all financial accounts. The final product was something truly unique. Simple enough to track finances much like you track your health. Web design specialists at Isadora Agency were tasked with the app UI design, mobile strategy, illustration, iconography, and mobile app design of over 100 different mobile screens With a minimalist design, users quickly move from one category to the next. For example, you can select to pay down your debt or fund a vacation. Therefore, your personal dashboard allows you to see insights, progress, and trends. The Budget Progress screen was extra fun to design as we were able to incorporate our custom character illustration next to messages of encouragement. It’s truly remarkable how the team packed this mobile app design with so many tools and powerful customizable features. The core of the app UI design revolves around essential features that include budgeting, spending, and saving. For example, layers of friendly reminders and updates show how much you’ve saved or how close you remained within your budget. Meanwhile, providing multiple reasons to visit the app often. For instance, cutting-edge tools and intelligent messaging throughout the experience educate users as they grow more comfortable with individual finances.

Design-System - FinTech - Isadora Agency

Isadora Agency

NO1 Top Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakist...

Amil baba

Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models We are available 24*7 Booking Contact Details :- WhatsApp Chat :- +91-7014168258 If you're looking for India Call girls you've come to the right place. You'll find some of the most beautiful call girls in our location with. These ladies have pleasing personalities, hot figures, and a passion for physical pleasure. Call girls in India Lucknow Many men have booked them for their erotic and soul-mixing performances, which are sure to leave you with unforgettable memories. #K09 Escort Service India is available in the city for men and women of all ages. They can satisfy your sexual needs and will make your experience even more enjoyable and memorable. Whether you're looking for a blow-job, stripping, lovemaking, or other dirty acts, you'll be able to find a match for your tastes and budget. These highly trained professionals will help you have an unforgettable night. One Shot — 5000/in call (time 1 hour), 6000/out call Two shot with one girl — 8000/in call (time 2 hour), 10000/out call Body to body massage with sex- 8000/in call (time 1 hour) Full night Service for one person– 12000/in call, 13000/out call (shot limit 3-4 shots) Full night Service for more than 1 person — please contact Us —7014168258 We are available 24*7 all days of the year. Call us — 7014168258 Thank you for Visiting.

Top profile Call Girls In fatehgarh [ 7014168258 ] Call Me For Genuine Models...

gajnagarg

Simple Conference Style Presentation by Slidesgo.pptx

balqisyamutia

Minimalist Orange Portfolio by Slidesgo.pptx

balqisyamutia

Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models We are available 24*7 Booking Contact Details :- WhatsApp Chat :- +91-7014168258 If you're looking for India Call girls you've come to the right place. You'll find some of the most beautiful call girls in our location with. These ladies have pleasing personalities, hot figures, and a passion for physical pleasure. Call girls in India Lucknow Many men have booked them for their erotic and soul-mixing performances, which are sure to leave you with unforgettable memories. #K09 Escort Service India is available in the city for men and women of all ages. They can satisfy your sexual needs and will make your experience even more enjoyable and memorable. Whether you're looking for a blow-job, stripping, lovemaking, or other dirty acts, you'll be able to find a match for your tastes and budget. These highly trained professionals will help you have an unforgettable night. One Shot — 5000/in call (time 1 hour), 6000/out call Two shot with one girl — 8000/in call (time 2 hour), 10000/out call Body to body massage with sex- 8000/in call (time 1 hour) Full night Service for one person– 12000/in call, 13000/out call (shot limit 3-4 shots) Full night Service for more than 1 person — please contact Us —7014168258 We are available 24*7 all days of the year. Call us — 7014168258 Thank you for Visiting.

Top profile Call Girls In Sonipat [ 7014168258 ] Call Me For Genuine Models W...

nirzagarg

Destacado

Skeleton Culture Code

Skeleton Technologies

PEPSICO Presentation to CAGNY Conference Feb 2024

Neil Kimberley

Content Methodology: A Best Practices Report (Webinar)

contently

How to Prepare For a Successful Job Search for 2024

Albert Qian

A report by thenetworkone and Kurio. The contributing experts and agencies are (in an alphabetical order): Sylwia Rytel, Social Media Supervisor, 180heartbeats + JUNG v MATT (PL), Sharlene Jenner, Vice President - Director of Engagement Strategy, Abelson Taylor (USA), Alex Casanovas, Digital Director, Atrevia (ES), Dora Beilin, Senior Social Strategist, Barrett Hoffher (USA), Min Seo, Campaign Director, Brand New Agency (KR), Deshé M. Gully, Associate Strategist, Day One Agency (USA), Francesca Trevisan, Strategist, Different (IT), Trevor Crossman, CX and Digital Transformation Director; Olivia Hussey, Strategic Planner; Simi Srinarula, Social Media Manager, The Hallway (AUS), James Hebbert, Managing Director, Hylink (CN / UK), Mundy Álvarez, Planning Director; Pedro Rojas, Social Media Manager; Pancho González, CCO, Inbrax (CH), Oana Oprea, Head of Digital Planning, Jam Session Agency (RO), Amy Bottrill, Social Account Director, Launch (UK), Gaby Arriaga, Founder, Leonardo1452 (MX), Shantesh S Row, Creative Director, Liwa (UAE), Rajesh Mehta, Chief Strategy Officer; Dhruv Gaur, Digital Planning Lead; Leonie Mergulhao, Account Supervisor - Social Media & PR, Medulla (IN), Aurelija Plioplytė, Head of Digital & Social, Not Perfect (LI), Daiana Khaidargaliyeva, Account Manager, Osaka Labs (UK / USA), Stefanie Söhnchen, Vice President Digital, PIABO Communications (DE), Elisabeth Winiartati, Managing Consultant, Head of Global Integrated Communications; Lydia Aprina, Account Manager, Integrated Marketing and Communications; Nita Prabowo, Account Manager, Integrated Marketing and Communications; Okhi, Web Developer, PNTR Group (ID), Kei Obusan, Insights Director; Daffi Ranandi, Insights Manager, Radarr (SG), Gautam Reghunath, Co-founder & CEO, Talented (IN), Donagh Humphreys, Head of Social and Digital Innovation, THINKHOUSE (IRE), Sarah Yim, Strategy Director, Zulu Alpha Kilo (CA).

Social Media Marketing Trends 2024 // The Global Indie Insights

Kurio // The Social Media Age(ncy)

The search marketing landscape is evolving rapidly with new technologies, and professionals, like you, rely on innovative paid search strategies to meet changing demands. It’s important that you’re ready to implement new strategies in 2024. Check this out and learn the top trends in paid search advertising that are expected to gain traction, so you can drive higher ROI more efficiently in 2024. You’ll learn: - The latest trends in AI and automation, and what this means for an evolving paid search ecosystem. - New developments in privacy and data regulation. - Emerging ad formats that are expected to make an impact next year. Watch Sreekant Lanka from iQuanti and Irina Klein from OneMain Financial as they dive into the future of paid search and explore the trends, strategies, and technologies that will shape the search marketing landscape. If you’re looking to assess your paid search strategy and design an industry-aligned plan for 2024, then this webinar is for you.

Trends In Paid Search: Navigating The Digital Landscape In 2024

Search Engine Journal

From their humble beginnings in 1984, TED has grown into the world’s most powerful amplifier for speakers and thought-leaders to share their ideas. They have over 2,400 filmed talks (not including the 30,000+ TEDx videos) freely available online, and have hosted over 17,500 events around the world. With over one billion views in a year, it’s no wonder that so many speakers are looking to TED for ideas on how to share their message more effectively. The article “5 Public-Speaking Tips TED Gives Its Speakers”, by Carmine Gallo for Forbes, gives speakers five practical ways to connect with their audience, and effectively share their ideas on stage. Whether you are gearing up to get on a TED stage yourself, or just want to master the skills that so many of their speakers possess, these tips and quotes from Chris Anderson, the TED Talks Curator, will encourage you to make the most impactful impression on your audience. See the full article and more summaries like this on SpeakerHub here: https://speakerhub.com/blog/5-presentation-tips-ted-gives-its-speakers See the original article on Forbes here: http://www.forbes.com/forbes/welcome/?toURL=http://www.forbes.com/sites/carminegallo/2016/05/06/5-public-speaking-tips-ted-gives-its-speakers/&refURL=&referrer=#5c07a8221d9b

5 Public speaking tips from TED - Visualized summary

SpeakerHub

Everyone is in agreement that ChatGPT (and other generative AI tools) will shape the future of work. Yet there is little consensus on exactly how, when, and to what extent this technology will change our world. Businesses that extract maximum value from ChatGPT will use it as a collaborative tool for everything from brainstorming to technical maintenance. For individuals, now is the time to pinpoint the skills the future professional will need to thrive in the AI age. Check out this presentation to understand what ChatGPT is, how it will shape the future of work, and how you can prepare to take advantage.

ChatGPT and the Future of Work - Clark Boyd

Clark Boyd

Getting into the tech field. what next

Tessa Mero

Google's Just Not That Into You: Understanding Core Updates & Search Intent

Lily Ray

How to have difficult conversations

Rajiv Jayarajah, MAppComm, ACC

Introduction to Data Science

Christy Abraham Joy

Time Management & Productivity - Best Practices

Vit Horky

The six step guide to practical project management If you think managing projects is too difficult, think again. We’ve stripped back project management processes to the basics – to make it quicker and easier, without sacrificing the vital ingredients for success. “If you’re looking for some real-world guidance, then The Six Step Guide to Practical Project Management will help.” Dr Andrew Makar, Tactical Project Management

The six step guide to practical project management

MindGenius

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

RachelPearson36

During this webinar, Anand Bagmar demonstrates how AI tools such as ChatGPT can be applied to various stages of the software development life cycle (SDLC) using an eCommerce application case study. Find the on-demand recording and more info at https://applitools.info/b59 Key takeaways: • Learn how to use ChatGPT to add AI power to your testing and test automation • Understand the limitations of the technology and where human expertise is crucial • Gain insight into different AI-based tools • Adopt AI-based tools to stay relevant and optimize work for developers and testers * ChatGPT and OpenAI belong to OpenAI, L.L.C.

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...

Applitools

12 Ways to Increase Your Influence at Work

GetSmarter

ChatGPT webinar slides

Alireza Esmikhani

More than Just Lines on a Map: Best Practices for U.S Bike Routes

Project for Public Spaces & National Center for Biking and Walking

Has your project been caught in a storm of deadlines, clashing requirements, and the need to change course halfway through? If yes, then check out how the administration team navigated through all of this, relocating 160 people from 3 countries and opening 2 offices during the most turbulent time in the last 20 years. Belka Games’ Chief Administrative Officer, Katerina Rudko, will share universal approaches and life hacks that can help your project survive unstable periods when there seem to be too many tasks and a lack of time and people.

Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...

DevGAMM Conference

Destacado (20)

Skeleton Culture Code

PEPSICO Presentation to CAGNY Conference Feb 2024

Content Methodology: A Best Practices Report (Webinar)

How to Prepare For a Successful Job Search for 2024

Social Media Marketing Trends 2024 // The Global Indie Insights

Trends In Paid Search: Navigating The Digital Landscape In 2024

5 Public speaking tips from TED - Visualized summary

ChatGPT and the Future of Work - Clark Boyd

Getting into the tech field. what next

Google's Just Not That Into You: Understanding Core Updates & Search Intent

How to have difficult conversations

Introduction to Data Science

Time Management & Productivity - Best Practices

The six step guide to practical project management

Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...

Unlocking the Power of ChatGPT and AI in Testing - A Real-World Look, present...

12 Ways to Increase Your Influence at Work

ChatGPT webinar slides

More than Just Lines on a Map: Best Practices for U.S Bike Routes

Ride the Storm: Navigating Through Unstable Periods / Katerina Rudko (Belka G...

eBusiness Engineering Responsive Web Design Part 1

1. Responsive Web Design Paweł Skowronek 0807883/2

2. 1. What is Responsive Web Design? 2. Mobile vs. Desktop 3. What makes a website responsive? 4. Why websites should be responsive?

3. 1. What is Responsive Web Design? 2. Mobile vs. Desktop 3. What makes a website responsive? 4. Why websites should be responsive?

4. Responsive Web Design? A ﬂexible grid (with ﬂexible images) that incorporates media queries to create a responsive, adaptive layout. Ethan Marcotte Marcotte, E., 2010. A Dao of Flexibility presentation. An Event Apart, Minneapolis.

5. 1. What is Responsive Web Design? 2. Mobile vs. Desktop 3. What makes a website responsive? 4. Why websites should be responsive?

6. Mobile vs. Desktop Source: Apple, 2011

7. Browser Screen Resolutions January 2000 January 2011 640x480 800x600 1024x768 Higher 1024x768 Higher Other Other 4%4% 11% 1% 14% 25% 56% 85% Source: Browser Display Statistics, w3schools.com

8. Mobile vs. Desktop Internet Users, 2007-2015E Mobile Internet Users Desktop Internet Users 2000 1500 1000 500 0 2007 2009 2011E 2013E 2015E E - estimated (Stanley, 2010)

9. 1. What is Responsive Web Design? 2. Mobile vs. Desktop 3. What makes a website responsive? 4. Why websites should be responsive?

10. What makes a site responsive? • Flexible/ﬂuid grid • Responsive images • Media queries

11. Flexible/ﬂuid grid ﬁgure { width: 300px/960px = 31.25%; } < LiveFront >, 2011

12. Responsive images Desktop Mobile .square { width: 100%; }

13. Media queries @media screen and (max-width: 768px) {...}

14. Desktop user Tablet user Smartphone user 480px 768px 1024px Source: Elated.com, 2011

15. Netbook Desktop/Notebook Tablet Smartphone <480px <768px <1024px 1024px Desktop 1024px<

16. 1. What is Responsive Web Design? 2. Mobile vs. Desktop 3. What makes a website responsive? 4. Why websites should be responsive?

17. Why websites should be responsive? • more portable devices • more users • more income!

18. References • Marcotte, E., 2010. Responsive Web Design. A list apart, [online]. Available at: <http://www.alistapart.com/articles/ responsive-web-design> [Accessed November 2011] • Doyle, M., 2011. Responsive Web Design Demystiﬁed. Elated, [online]. Available at: <http://www.elated.com/articles/ responsive-web-design-demystiﬁed/> [Accessed November 2011] • w3chools.com, 2011. Browser Display Statistics. w3schools.com, [online]. Available at: <http://www.w3schools.com/ browsers/browsers_display.asp> [Accessed November 2011] • Stanley, M., 2009. Mobile Internet Report. Morgan Stanley Research, [online]. Available at: <http:// www.morganstanley.com/institutional/techresearch/pdfs/mobile_internet_report.pdf> [Accessed November 2011] • Richmond, H., 2011. The Growth of Mobile Marketing and Tagging. Microsoft tag, [online]. Available at: <http:// tag.microsoft.com/community/blog/t/the_growth_of_mobile_marketing_and_tagging.aspx> [Accessed November 2011] • Simpson, E., 2011. How to Design a Mobile Responsive Website. UX Booth, [online]. Available at: <http:// www.uxbooth.com/blog/how-to-design-a-mobile-responsive-website/> [Accessed November 2011] • .net, 2011. 21 top tools for responsive web design. .net, [online]. Available at: <http://www.netmagazine.com/features/ 21-top-tools-responsive-web-design> [Accessed November 2011] • Pettit, N., 2011. Beginner’s Guide to Responsive Web Design. Think Vitamin, [online]. Available at: <http:// thinkvitamin.com/design/beginners-guide-to-responsive-web-design/> [Accessed November 2011] • Wiggins, R., 2011. Responsive Web Design one website, many devices. Handcrafted Pixels, [online]. Available at: <http:// handcraftedpixels.co.uk/> [Accessed November 2011] • Bollinger, M., 2011. Designing for Desktop Web + Mobile - Responsive Design. < LiveFront >, TECH{dot}MN, [online]. Available at: <http://www.slideshare.net/livefront/responsive-design-7877412> [Accessed November 2011]

19. Questions?

20. Responsive Web Design Thanks. Paweł Skowronek pawelskowronek@me.com pawelskowronek.me @pawelskowronek

eBusiness Engineering Responsive Web Design Part 1

Recomendados

Recomendados

Más contenido relacionado

Último

Último (20)

Destacado

Destacado (20)

eBusiness Engineering Responsive Web Design Part 1

Notas del editor